Quels référentiels essentiels pour le développeur ? Partie 1 – Conception d’interfaces

Les développeurs doivent naviguer parmi une multitude de référentiels, normes et bonnes pratiques pour concevoir des interfaces, optimiser l’accessibilité, garantir la qualité, et répondre aux enjeux écologiques et sécuritaires

Cette série d’articles explore les principaux référentiels en front-end et back-end qui structurent le métier, en commençant par la conception d’interfaces.

En UX/UI, plusieurs référentiels et modèles théoriques servent de base pour évaluer et concevoir des interfaces utilisateur optimisées.

Les critères ergonomiques de Bastien et Scapin pour réduire la charge cognitive des interfaces

Les critères ergonomiques de Bastien & Scapin ont été développés en 1993 par le Laboratoire d’Ergonomie des Systèmes Complexes de l’INRIA (Institut National de Recherche en Informatique et en Automatique). Ce référentiel est spécifiquement adapté aux interfaces interactives et est couramment utilisé en France pour l’évaluation de l’ergonomie des systèmes informatiques.

Les 8 critères de Bastien & Scapin :

1. Guidage : faciliter l’utilisation en aidant l’utilisateur à naviguer à chaque étape.
2. Charge de travail : réduire l’effort cognitif nécessaire pour accomplir les tâches.
3. Contrôle explicite : donner à l’utilisateur un contrôle clair sur ses actions.
4. Adaptabilité : permettre de personnaliser l’interface selon les préférences de l’utilisateur.
5. Gestion des erreurs : prévenir les erreurs et aider à leur correction.
6. Homogénéité/cohérence : assurer une cohérence visuelle et fonctionnelle.
7. Signifiance des codes : utiliser des labels et icônes explicites.
8. Compatibilité : aligner l’interface avec les habitudes de l’utilisateur.

Ce référentiel est particulièrement utile pour l’évaluation de l’ergonomie des applications et systèmes complexes, comme les logiciels professionnels et les plateformes de gestion.

Il sert également pour les interfaces professionnelles où la réduction de la charge cognitive est essentielle.

Les heuristiques d’utilisabilité de Jakob Nielsen pour détecter les problèmes d’utilisabilité

En UX (expérience utilisateur), une heuristique est une règle empirique ou une recommandation basée sur des bonnes pratiques pour concevoir des interfaces utilisateur efficaces, intuitives et conviviales.

Ce référentiel mondialement reconnu évalue l’utilisabilité des interfaces à travers 10 heuristiques :

1. Visibilité de l’état du système : informer l’utilisateur de ce qui se passe dans le système.
2. Correspondance entre le système et le monde réel : utiliser un langage et des concepts familiers aux utilisateurs.
3. Contrôle utilisateur et liberté : offrir des options pour revenir en arrière et corriger les erreurs.
4. Cohérence et normes : maintenir des conventions standards pour éviter la confusion.
5. Prévention des erreurs : éviter les erreurs fréquentes en fournissant des aides contextuelles.
6. Reconnaissance plutôt que rappel : minimiser la charge de mémoire de l’utilisateur.
7. Flexibilité et efficacité d’utilisation : permettre aux utilisateurs expérimentés d’aller plus vite.
8. Esthétique et design minimaliste : éviter la surcharge d’informations et se concentrer sur l’essentiel.
9. Aide aux utilisateurs pour reconnaître, diagnostiquer et corriger les erreurs : fournir des messages d’erreur clairs et concis.
10. Aide et documentation : offrir des informations d’aide et des guides facilement accessibles.

Les heuristiques de Nielsen sont idéales pour détecter rapidement des problèmes avant les tests utilisateurs. Ils sont particulièrement utiles pour optimiser les parcours utilisateur sur les sites e-commerce ou les applications mobiles.

Grille Userfocus

Les principes de design de Donald Norman pour les interfaces tactiles et interactives

Donald Norman est considéré comme l’un des pères de l’ergonomie cognitive et du design centré utilisateur. Ses principes sont axés sur la compréhension de la psychologie des utilisateurs et sur la manière de créer des interfaces compréhensibles et intuitives.

Les 6 principes de Donald Norman :

1. Visibilité : les éléments importants doivent être visibles et facilement identifiables.
2. Feedback : fournir un retour d’information pour chaque action de l’utilisateur.
3. Contraintes : limiter les actions de l’utilisateur pour éviter les erreurs.
4. Correspondance : l’interface doit correspondre aux attentes et expériences antérieures des utilisateurs.
5. Consistance : les éléments de design doivent être cohérents dans toute l’interface.
6. Affordance : l’interface doit donner des indices visuels sur la manière dont les objets peuvent être utilisés (ex. : boutons cliquables).

Les principes de Norman sont souvent utilisés lors de la phase de conception pour s’assurer que chaque élément d’interface est intuitif et que l’interaction est fluide.

Avec ses 6 principes, Norman met l’accent sur la psychologie des utilisateurs, comme la correspondance avec leurs attentes ou l’affordance. Ce référentiel est idéal pour concevoir des interfaces tactiles et interactives.

Les 8 règles d’or de Shneiderman pour les applications complexes

Ben Shneiderman, professeur en informatique et pionnier de l’interaction homme-machine, a proposé huit règles qui servent de guide pour concevoir des interfaces utilisateur intuitives.

Les 8 règles d’or de Shneiderman :

1. Efforcez-vous de proposer de la cohérence : les actions similaires doivent mener à des résultats similaires.
2. Permettez des raccourcis pour les utilisateurs fréquents : accélérez les interactions pour les utilisateurs avancés.
3. Fournissez des retours d’information informatifs : informez des changements et des résultats d’actions.
4. Créez des dialogues pour finalités claires : assurez-vous que chaque interaction a un début, un milieu et une fin bien définis.
5. Prévenez les erreurs : limitez la possibilité d’erreurs en facilitant les bons choix.
6. Autorisez la réversibilité des actions : l’utilisateur doit pouvoir revenir en arrière facilement.
7. Favorisez un contrôle utilisateur interne : permettez aux utilisateurs de décider de leurs actions.
8. Réduisez la charge cognitive : diminuez l’effort mental nécessaire pour accomplir les tâches.

Ces règles sont particulièrement pertinentes dans les projets où l’efficacité et l’intuitivité des interactions sont prioritaires, comme les applications web ou mobiles.

Les 8 règles de Shneiderman visent à améliorer l’efficacité et la cohérence des interactions utilisateur, en facilitant les raccourcis pour les utilisateurs avancés et en autorisant la réversibilité des actions. Elles sont idéales pour les outils métiers ou les applications complexes.

L’UX Honeycomb de Peter Morville pour aligner les objectifs business avec les attentes des utilisateurs

Peter Morville a développé un modèle en nid d’abeille appelé UX Honeycomb pour expliquer les dimensions clés de l’expérience utilisateur. Son modèle souligne que l’expérience doit couvrir plusieurs facettes pour atteindre un équilibre optimal entre l’utilité, la convivialité et la valeur ajoutée.

Les 7 facettes du UX Honeycomb :

1. Utile (Useful) : le produit doit répondre à un besoin réel.
2. Utilisable (Usable) : le produit doit être facile à utiliser.
3. Trouvable (Findable) : les informations et les fonctionnalités doivent être faciles à trouver.
4. Crédible (Credible) : l’interface doit inspirer confiance.
5. Désirable (Desirable) : le design doit être attractif pour engager l’utilisateur.
6. Accessible (Accessible) : le produit doit être utilisable par tous, y compris les personnes en situation de handicap.
7. Valuable (Valuable) : le produit doit apporter de la valeur à l’utilisateur et à l’entreprise.

Ce modèle est utile pour assurer que chaque aspect de l’expérience utilisateur est pris en compte lors de la conception.

Les standards émergents

Bien que certains design systems comme Material Design ou Carbon soient déjà largement adoptés, d’autres, comme le Design System du W3C, sont encore en cours de développement et promettent de standardiser encore davantage les pratiques UX/UI. Ces frameworks offrent des composants réutilisables qui simplifient la conception et garantissent la conformité aux normes d’accessibilité.

Le design system du W3C

Le Design System du W3C est une initiative en cours de développement par l’organisme de standardisation du web, le W3C (World Wide Web Consortium). Il vise à offrir une collection standardisée de principes, outils, et composants pour aider les développeurs et designers à créer des interfaces web cohérentes, accessibles et optimisées.

Ses objectifs principaux

1. Standardisation des pratiques UX/UI
   • Offrir un cadre unique en intégrant des bonnes pratiques reconnues mondialement.
   • Uniformiser les approches pour faciliter la maintenabilité et l’interopérabilité des interfaces.
2. Accessibilité en priorité
   • Mettre en avant les normes d’accessibilité, comme les WCAG, pour garantir des interfaces inclusives et utilisables par tous, y compris les personnes en situation de handicap.
3. Simplicité et légèreté
   • Promouvoir des interfaces rapides et performantes en réduisant la surcharge inutile de ressources, tout en simplifiant l’expérience utilisateur.
4. Composants réutilisables
   • Proposer une bibliothèque de composants standardisés (boutons, formulaires, grilles) conformes aux normes du W3C.

Les avantages attendus

• Interopérabilité : faciliter la compatibilité entre différents outils et plateformes grâce à des standards unifiés.
• Gain de temps : offrir aux équipes de développement des composants prêts à l’emploi pour accélérer les projets.
• Accessibilité intégrée : fournir par défaut des éléments respectant les bonnes pratiques d’accessibilité.
• Cohérence : garantir une expérience utilisateur uniforme sur divers sites et services.

Le Material Design (Google)

• Développé par Google, Material Design est un système complet pour concevoir des interfaces visuelles et interactives.
• Il propose des lignes directrices détaillées sur les couleurs, typographies, animations, et composants UI (boutons, cartes, menus, etc.).
• Particularité : Met un fort accent sur les animations et la physique des interactions pour offrir une expérience fluide.

Le lightning Design (Sales force)

• Ce Design System de Salesforce est conçu pour les applications d’entreprise.
• Il inclut des composants accessibles et réutilisables pour construire des interfaces professionnelles cohérentes.
• Particularité : Très adapté aux besoins des applications complexes de gestion.

Le Carbon Design System (IBM)

• IBM a créé Carbon pour ses produits et services numériques.
• Il met en avant la flexibilité, les performances et l’accessibilité.
• Particularité : Fournit des outils pour concevoir à la fois des interfaces web et des expériences multi-plateformes.

Le Fluent Design System (Microsoft)

• Fluent est utilisé par Microsoft pour ses applications (Windows, Office, etc.).
• Il se concentre sur une esthétique moderne et des expériences immersives.
• Particularité : Inclut des principes pour les environnements tactiles et interactifs (comme HoloLens).

Ant Design (Alibaba)

• Un Design System open source très populaire, créé par Alibaba.
• Orienté vers les applications professionnelles, avec une bibliothèque de composants pour React.
• Particularité : Très adopté dans l’écosystème React pour le développement rapide d’applications front-end.

Le Systeme de Design de l’État SDE

Développé par la Direction Interministérielle du Numérique (DINUM), le SDE est un référentiel conçu pour harmoniser et améliorer les interfaces des services publics numériques en France. Il s’inspire de design systems similaires comme le GOV.UK Design System britannique ou le US Web Design System, tout en étant adapté aux besoins spécifiques du contexte français.

Gov.uk Design System

• Ce Design System a été conçu pour les services publics britanniques.
• Il offre des composants et modèles qui garantissent une navigation simple et accessible pour tous les citoyens.
• Particularité : Mettant l’accent sur l’inclusion, il est optimisé pour les appareils bas de gamme et les connexions lentes.

Les bonnes questions à se poser

Les développeurs juniors, issus de parcours souvent axés sur des compétences techniques, ont généralement une compréhension limitée des notions d’UX/UI et de leur impact. Dans ces cas, il est préférable de discuter en termes d’utilisateurs ou d’objectifs concrets plutôt que de s’appuyer sur des référentiels.

Même si l’UX/UI n’est pas directement leur responsabilité, une connaissance de base des référentiels leur permet de mieux saisir les choix des designers et de respecter leurs intentions lors de l’intégration. Par ailleurs, dans des projets dépourvus de designer dédié, ils peuvent être amenés à évaluer une interface et à proposer des ajustements simples en s’appuyant sur ces référentiels.

Pour mieux intégrer les concepts d’UX/UI dans leur travail, les développeurs, même juniors, peuvent se poser une série de questions clés. Ces interrogations, axées sur l’utilisateur, la clarté de l’interface et la performance, permettent de réfléchir à l’impact de leurs choix techniques sur l’expérience utilisateur et de garantir des interfaces intuitives et efficaces.

1. Sur la clarté et la navigation

• « Si un utilisateur arrivait sur cette page, comprendrait-il immédiatement quoi faire ? »
• « Est-ce que les actions principales (par exemple : ajouter au panier, s’inscrire) sont faciles à trouver ? »
• « Que se passe-t-il si un utilisateur se trompe ? Peut-il facilement corriger son erreur ? »

👉 But : Aider à réfléchir à la visibilité, au guidage et à la prévention des erreurs.

2. Sur les besoins des utilisateurs

• « Qui va utiliser cette interface, et dans quel contexte ? Une personne novice s’en sortirait-elle ? »
• « Est-ce que cette fonctionnalité répond réellement à un besoin de l’utilisateur ou elle complique l’interface ? »
• « Est-ce que les choix faits ici conviennent aussi bien sur mobile que sur desktop ? »

👉 But : Sensibiliser à l’importance de comprendre les utilisateurs finaux et leurs attentes.

3. Sur l’accessibilité

• « Est-ce que cette page est utilisable sans souris (uniquement avec le clavier) ? »
• « Est-ce que le texte est lisible pour quelqu’un avec des difficultés de vision ? »
• « Les images ou icônes sont-elles accompagnées d’alternatives (textes ou balises alt) ? »

👉 But : Introduire des notions essentielles comme la navigation clavier et les critères d’accessibilité sans jargon complexe.

4. Sur les performances et la simplicité

• « Est-ce que le temps de chargement de cette page est acceptable ? Si non, que pourrait-on simplifier ? »
• « Est-ce qu’il y a des éléments visuels ou interactifs qui ne servent à rien et pourraient être retirés ? »
• « Comment pourrait-on rendre cette action plus rapide à exécuter ? »

👉 But : Amener à prioriser les performances et à éviter de surcharger l’interface.

5. Sur la collaboration et les retours

• « Comment t’assures-tu que cette interface correspond aux attentes du designer ou du chef de projet ? »
• « Est-ce que tu demandes des retours sur l’interface avant de la valider ? Si oui, à qui ? »
• « Comment pourrais-tu tester rapidement si cette interface fonctionne bien avant de la livrer ? »

👉 But : Encourager la communication et l’évaluation des interfaces dans un processus collaboratif.

En conclusion

Les référentiels de conception d’interfaces, bien que souvent négligés dans les formations techniques courtes, jouent un rôle clé dans la qualité des projets web. Pour un développeur junior, ces outils ne sont pas une priorité absolue, mais ils permettent d’acquérir une sensibilité aux besoins des utilisateurs et de contribuer à des interfaces plus intuitives. Ils sont particulièrement utiles dans des environnements où les ressources en design sont limitées ou lorsqu’il est nécessaire de collaborer efficacement avec des designers et chefs de projet.

En revanche, pour un développeur senior ou un Concepteur Développeur d’Applications (CDA), ces référentiels deviennent cruciaux. Ils garantissent une conception axée sur l’utilisateur, optimisent la collaboration pluridisciplinaire, et anticipent des problèmes potentiels dès les premières phases de conception. Que ce soit pour améliorer l’ergonomie, garantir l’accessibilité ou aligner les objectifs métiers et utilisateurs, les référentiels comme ceux de Bastien & Scapin, Norman, ou encore les design systems, sont des outils stratégiques indispensables.

En somme, intégrer ces référentiels dans son approche permet non seulement de concevoir des interfaces efficaces et cohérentes, mais aussi de répondre aux attentes toujours plus exigeantes des utilisateurs et des projets numériques d’aujourd’hui.

Ressources

Le REAC (Référentiel d’Activités et de Compétences) se distingue comme un document officiel clé en France : il définit précisément les compétences, activités, et tâches indispensables pour maîtriser un métier spécifique. Pour les développeurs, le REAC sert de socle pour les parcours de formation. Ils garantit que les compétences enseignées sont parfaitement alignées avec les besoins actuels du marché.

REAC Développeur Web & Web Mobile

REAC CDA Concepteur développeur d’applications

L’évaluation experte via des critères ergonomiques de Bastien & Scapin