Quand j’ai commencé à travailler en ergonomie il y a un an, avec rien de plus dans mon sac à dos que mon titre de docteure en neurosciences cognitives et mon intuition, il m’a semblé nécessaire de me former à cette discipline. J’ai lu des blogs. J’ai regardé des conférences. J’ai lu des articles et des livres. Et finalement, j’ai réalisé que beaucoup de ce que j’appelais très naïvement « le bon sens » ou « l’intuition » correspondait à des règles de base d’ergonomie. Voici ici un condensé de ce que j’ai appris en un an d’auto-formation, du plus générique au plus spécifique.
Cet article comprend :
- Un résumé de l’objectif de l’ergonomie ou de l’UX design
- Une liste de quelques lois à connaître et à appliquer
➥ Lois de la Gestalt, Loi de Fitts, Concept d’affordance, Loi de Hick et Nombre de Miller - Un rappel des critères ergonomiques de Bastien & Scapin
- Une liste de bonnes pratiques sur divers sujets
➥ Mise en page, Accessiblité, Transitions, Utilisation du drag & drop, Ergonomie mobile et Formulaires
Ce “pense-bête” est déjà long, je n’y ai pas intégré la justification de chacune des bonnes pratiques proposées. Les sources en bas de chaque section vous permettront souvent d’en savoir plus.
Mais commençons par le commencement…
L’objectif de l’ergonomie ou de l’UX design
Note : ergonomie vs. UX design est une vaste question à laquelle cet article n’a pas pour but de répondre. Dans un souci de simplification (et surtout parce que cela reste encore obscur pour moi) j’utiliserai l’un ou l’autre pour référer à la même chose : mon boulot.
Peter Morville résume les qualités d’une bonne UX en 7 attributs. Une interface doit être :
- Utile : qui répond à un besoin
- Utilisable : qui est efficace (ça fonctionne), efficiente (ça demande peu d’efforts, c’est rapide) et satisfaisante
- Accessible : qui est utilisable par tous (handicap)
- Navigable : dans le sens où l’utilisateur trouve facilement ce dont il a besoin
- Attractive : qui donne envie, qui procure de l’émotion
- Crédible : en laquelle on a confiance, des éléments d’interface peuvent y contribuer
- “De valeur” (Valuable) : qui apporte quelque chose au propriétaire de l’interface
Quelques lois à connaître et à appliquer
Les lois de la Gestalt
Loi de la bonne forme :
Loi principale dont les autres découlent : un ensemble de parties informe (comme des groupements aléatoires de points) tend à être perçu d’abord (automatiquement) comme une forme. Cette forme se veut simple, symétrique, stable, en somme une bonne forme.
Loi de proximité :
Nous regroupons les points d’abord les plus proches les uns des autres.
➥ 2 éléments physiquement proches dans l’interface seront interprétés comme correspondant à un bloc cohérent, par exemple à des fonctions de même type.
Loi de similarité :
Si la distance ne permet pas de regrouper les points, nous nous attacherons ensuite à repérer les plus similaires entre eux pour percevoir une forme.
➥ 2 éléments se ressemblant visuellement seront interprétés comme correspondant à un ensemble cohérent, par exemple à des fonctions de même type.
Loi de clôture :
Une forme fermée est plus facilement identifiée comme une figure (ou comme une forme) qu’une forme ouverte.
➥ Une zone fermée avec un contour ou un fond différent sera encore davantage interprétée comme correspondant à un bloc cohérent, regroupant par exemple des fonctions de même type.
La loi de Fitts
Plus la cible est proche et grosse, moins l’utilisateur met de temps à l’atteindre.
Plus la cible est éloignée et petite, plus l’utilisateur met de temps à l’atteindre.
➥Les fonctions les plus utilisées doivent être de taille respectable et proches de l’action précédente (ne pas mettre les champs d’un formulaire d’un côté et le bouton valider à l’autre bout de l’écran par exemple). Cela se justifie par la loi de Fitts mais également par le fait que le regard est assez focalisé sur la tâche en cours, et qu’un bouton éloigné et petit sera difficilement vu par l’utilisateur.
Le concept d’affordance
« L’affordance est la capacité d’un objet à suggérer sa propre utilisation. »
➥Pour qu’un bouton soit utilisé il faut qu’il ressemble à un bouton. 🙂
La loi de Hick
La loi de Hick est un modèle de l’interaction homme-machine qui décrit le temps qu’il faut à un utilisateur pour prendre une décision en fonction du nombre de choix à sa disposition. Ce temps est logarithmique.
➥Si l’on ajoute un élément à une liste proposant un faible nombre de choix, le temps de réponse va fortement augmenter.
➥A contrario, si on ajoute un choix à une liste de choix déjà longue, le temps de réponse va faiblement augmenter.
Le nombre de Miller : 7 ± 2
7 ± 2 correspondrait approximativement au nombre maximal d’éléments qu’est capable de traiter l’esprit humain. Les expériences rapportées par Miller (1956) concernent par exemple le nombre de stimuli (sons, objets visuels) qu’on est capable de percevoir simultanément, ou encore le nombre d’éléments qu’on est capable de mémoriser à court-terme (aussi appelé empan mnésique). Cependant, d’après Farrington (2011), la loi du nombre magique sept est fondée sur une interprétation erronée de l’article de Miller. Le nombre correct de nouveaux éléments pouvant tenir dans la mémoire courante serait plus probablement de trois ou quatre.
➥Finalement assez peu applicable en ergo car dans le cas d’un menu par exemple, l’utilisateur a les items devant les yeux et n’a pas besoin de conserver la liste en mémoire de travail pour faire son choix
➥Cela dit, trop de choix tue le choix, et la limite de 7 ± 2 me semble assez sage pour concevoir un menu (aïe aïe aïe, je retombe dans l’intuition là…), s’il n’est pas compartimenté en sections.
Exemple du menu de l’interface du catalogue Auchan : je sais pas vous, mais moi je n’ai même pas le courage de tout lire pour trouver ce que je cherche. Présenté en 3 ou 4 blocs par types de fonctions ça passerait certainement mieux.
Critères ergonomiques de Bastien & Scapin
Les critères ergonomiques de Bastien et Scapin (1993) sont un bon départ pour créer une interface ergonomique. Ils sont découpés en 8 points :
- Guidage : Ensemble des moyens mis en œuvre pour conseiller, orienter, informer et conduire l’utilisateur lors de ses interactions avec l’ordinateur. L’application des lois de la Gestalt et du principe d’affordance y contribuent. L’utilisation de pictogrammes connus, de labels explicites, d’informations complémentaires (format de date dans un formulaire par exemple) et de feedback immédiats lors de chaque action remplissent également ce rôle. L’utilisation de l’interface devient intuitive. Enfin, il est nécessaire de faire un effort de lisibilité, en termes de mise en forme et d’adaptation du vocabulaire aux utilisateurs ciblés.
- Charge de travail : Ensemble des éléments de l’interface qui a un rôle dans la réduction de la charge perceptive ou mnésique des utilisateurs, de même que dans l’augmentation de l’efficacité du dialogue. Cela passe par la brièveté des messages à lire, la limitation des étapes à effectuer et la réduction de la densité informationnelle. Une interface allégée avec des espaces entre les contenus réduira la charge de travail.
- Contrôle explicite : Ensemble des moyens mis en œuvre pour prendre en compte les actions des utilisateurs, indiquer explicitement aux utilisateurs les conséquences de leurs actions, et donner la possibilité aux utilisateurs de contrôler le traitement des actions. Le fait de permettre aux utilisateurs d’interrompre une action si celle-ci est susceptible de prendre du temps est primordial.
- Adaptabilité : Adaptation au contexte, aux besoins et aux préférences des utilisateurs. La flexibilité de l’interface devra permettre à l’utilisateur de personnaliser son interface en fonction de ses besoins, et d’accéder aux fonctions de plusieurs manières différentes selon son niveau d’expertise (via un menu, raccourcis clavier…).
- Gestion des erreurs : Ensemble des moyens mis en place pour éviter ou réduire les erreurs de l’utilisateur, pour lui indiquer clairement le type de problème et le moyen de le résoudre dans les messages d’erreur, et pour lui permettre de les corriger. Les erreurs considérées ici sont des erreurs de saisie, de format, etc.
- Homogénéité : Cohérence visuelle pour des contextes identiques et différences d’interfaces pour des contextes différents. Les différents écrans du parcours de paiement sur un site d’achat en ligne devront être construits de la même manière par exemple.
- Signifiance des Codes et Dénominations : Clarté et cohérence des libellés.
- Compatibilité : Accord entre les caractéristiques des utilisateurs et des tâches, d’une part, et l’organisation des sorties, des entrées et du dialogue d’une application donnée, d’autre part. Par exemple, les termes employés doivent être familiers aux utilisateurs, et relatifs à la tâche à réaliser.
Bonnes pratiques
Une mise en page agréable
Pour réduire la distraction pendant la lecture :
- Faire attention au choix des typos : en savoir plus sur practicaltypography.com
- Éviter la pagination : les gens préfèrent la vue unique sauf si le contenu est vraiment très long ou très lourd
- Éviter énorme logo qui prend la moitié de l’écran
- Aligner le texte à gauche
- Mettre l’image principale au-dessus du titre pour ne pas interrompre le flux de lecture
- Aligner les autres images à droite pour ne pas interrompre le flux de lecture
- Proposer du contenu pertinent dans les légendes des images : celles-ci sont lues 300 fois plus que le reste
- Tenir compte de l’effet de banner blindness : bannière et partie en haut à droite de l’écran ne sont pas vues consciemment par la plupart des gens (apprentissage d’un schéma de sites internet dans lequel l’information recherchée ne se trouve pas dans ces zones)
- Ne pas utiliser des images uniquement parce qu’elles sont jolies
- N’utiliser des animations que pour appuyer un contenu ou une fonctionnalité
- Ne proposer du contenu alternatif qu’en fin de lecture : ne pas offrir trop de choix, ne pas surcharger l’écran
- Placer intelligemment les publicités (en fin de lecture) et privilégier la qualité à la quantité
- Privilégier un contraste positif (fond clair, caractères noirs) à un contraste négatif (l’inverse)
- Mettre en valeur les informations importantes, les mots-clés
- Fournir un sommaire pour les longs textes
- Fournir un format imprimable pour les longs textes
Pour favoriser la lisibilité sur écran :
- Taille de police : min = 12pt, normal = 16pt
- Taille des lignes : 45-75 caractères (best = 66) espaces compris
- Interlignes : 1,5x la taille de la police ; entre 2 paragraphes : 1,5x l’interligne
B A BA d’accessibilité
- Séparer les longs blocs de texte en plusieurs paragraphes
- Choisir une typographie sans serif, éviter les soulignements, italiques, et lettres capitales
- Éviter de tronquer les mots
- Si une liste contient plus de 3 items : remplacer les puces par des numéros
- Choisir des labels courts et explicites
- Marquer le contraste entre le texte et l’arrière-plan
- Éviter les mouvements (vidéos qui se lancent toutes seules par exemple) : laisser l’utilisateur actionner la lecture
- Éviter les clignotements. Si un élément d’interface doit clignoter, assurez-vous que la fréquence des flashs n’excède pas 3Hz
- Dans les graphiques colorés, ajouter un pattern en plus des couleurs pour résoudre les problèmes liés au daltonisme
Des transitions !
Des transitions qui ont du sens permettent une continuité visuelle qui aide l’utilisateur à savoir d’où il vient, où il est et où il va. Google a proposé en 2014 un ensemble de règles de design, utilisées notamment dans la version 5 d’Android : le Material Design. Ces règles de design misent sur une utilisation accrue des mises en page basées sur une grille, des animations, des transitions et des effets de profondeur tels que l’éclairage et les ombres. Les entrées brusques d’écran sont proscrites, la transition a toujours un but. On peut notamment proposer l’ouverture d’un écran à partir du point sur lequel on a cliqué, ou la conservation de l’élément sur lequel on a cliqué qu’on déplace, grossit, colore ou autre, pour le transformer en titre de l’écran (voir des exemples).
Les éléments mouvants doivent se déplacer en fonction de leur masse supposée : préférer un mouvement qui accélère à un mouvement linéaire. La direction d’une transition doit être cohérente avec le sens de la transition : ouverture d’une fenêtre vs fermeture.
Utilisation du drag & drop
Pas que ce soit une action primordiale, mais j’ai lu des choses là-dessus donc autant les résumer ici.
- N’utiliser le drag & drop que si cela simplifie ou optimise l’interaction, c’est-à-dire si cela augmente l’efficacité et l’efficience
- Informer l’utilisateur de la possibilité d’une telle interaction : message dans le panneau dans lequel les éléments doivent être déposés, aide au survol… (“Faites glisser ceci pour effectuer cela”)
- Marquer l’affordance des éléments déplaçables : modifier le curseur au survol (curseur en croix)
- Rendre visible la destination : highlight de la zone dans laquelle l’élément doit ou peut être déposé
- Fournir un feedback de déplacement : afficher l’objet en transparent ou en miniature ou un symbole (ligne, rectangle…) qui suit le mouvement du drag & drop
- N’oublier pas la loi de Fitts : il sera plus simple d’interagir avec une cible grande et proche
- Si les conditions ne peuvent être toutes remplies, proposer une alternative au drag & drop
Et sur mobile ?
Les bonnes pratiques énoncées ci-dessus sont d’autant plus importantes dans le contexte du mobile. Un mobinaute a de nombreuses contraintes :
- Attention limitée : Souvent en mouvement (dans la rue) ou en multi-tâche (en regardant la télé), sa capacité attentionnelle est réduite (3 à 5 secondes d’attention parait-il !). Il faut donc supprimer au maximum les écrans non indispensables, donner un contrôle maximal à l’utilisateur en lui permettant de couper le son, arrêter une animation, etc, le guider dans ses interactions et éviter au maximum les erreurs qui le feraient quitter la page.
- Capacités de device limitées : La puissance des smartphones est souvent inférieure à celle d’un ordinateur, le réseau est souvent moyen, et la data est couteuse. Il faut donc éviter les objets trop lourds (animations notamment) et optimiser le poids des pages.
- Taille de l’écran : L’écran est tout petit, il faut donc réorganiser les pages pour que les éléments les plus importants soient visibles immédiatement (les placer en haut de l’écran), augmenter la taille des boutons pour qu’ils soient facilement cliquables et limiter l’utilisation du clavier qui est assez peu confortable sur mobile
Taille des cibles recommandée en pixel :
- 7-8 mm de large ou de haut pour des fonctions rarement utilisées
- 9-10 mm de large ou de haut pour les fonctions essentielles
- 2mm d’espace entre 2 boutons
Les formulaires, toute une affaire
-
- Affichage des libellés :
- Les champs de formulaires ne doivent pas contenir de texte, seulement des guides de format.
- Afficher le libellé au-dessus du champ semble être la meilleure alternative d’après une étude en eye-tracking. Si vous préférez afficher les labels à gauche, alignez-les à droite pour réduire l’espace entre le label et le champ.
- Gestion des erreurs :
- La correction automatique des erreurs ou la suggestion peut aider à réduire les erreurs dans les adresses mails.
- La validation en temps-réel de chaque champ conforte l’utilisateur.
- Proposer des listes déroulantes lorsque cela est possible.
- Affichage des libellés :
- Choix de date : un champ permettant d’entrer directement la date et le format inscrit sur le côté (avec correction des erreurs et feedback) semble être la meilleure alternative d’après une étude comportementale.
- Sur mobile :
- N’afficher que les champs obligatoires dans les formulaires
- Remplacer les radio-button + bouton valider (2 taps) par des boutons de sélection en face de chaque item (1 tap)
Conclusion
Ouf, voilà, bravo à ceux qui ont tout lu. N’hésitez pas à m’apporter des corrections, avis ou autre en commentaires. J’enrichirais cet article le cas échéant.
À suivre, un jour ou l’autre, un autre article “Bases d’ergo” sur les méthodes (analyse d’interface, analyse d’activité, tests utilisateurs, maquettage) que j’utilise.
Sources
L’objectif de l’ergonomie ou de l’UX design : ↑ Retourner dans l’article
- User Experience Design | Semantic Studios
- Améliorer l’expérience utilisateur | D.C.C. Marketing
- Qu’est-ce que l’expérience utilisateur ? | UX-FR
Quelques lois à connaître et à appliquer
Les lois de la Gestalt : ↑ Retourner dans l’article
La loi de Fitts : ↑ Retourner dans l’article
Le concept d’affordance : ↑ Retourner dans l’article
La loi de Hick : ↑ Retourner dans l’article
Le nombre de Miller : ↑ Retourner dans l’article
- George Armitage Miller | Wikipédia
- Le nombre magique sept plus ou moins deux | Wikipédia
- Empan mnesique | Le bloc-notes ; ergonomie & UX
Critères ergonomiques de Bastien & Scapin : ↑ Retourner dans l’article
- Critères ergonomiques de Bastien et Scapin | Ergoweb
- Les critères heuristiques de Bastien et Scapin | Le bloc-notes ; ergonomie & UX
- Article original de Bastien et Scapin, 1993 [PDF]
Bonnes pratiques
Une mise en page agréable : ↑ Retourner dans l’article
- Adrian Zumbrunnen | On distraction-free reading experiences on Vimeo
- Pixel Perfect Precision Handbook | Ergognome
- Faciliter la lecture d’informations sur le web | Ergolab
- Typography in ten minutes | Practical typography
- Banner blindness | Wikipédia
B A BA d’accessibilité : ↑ Retourner dans l’article
Des transitions ! ↑ Retourner dans l’article
Utilisation du drag & drop : ↑ Retourner dans l’article
- Quelle ergonomie pour le drag & drop ? | Ergolab
Et sur mobiles ? ↑ Retourner dans l’article
- Pixel Perfect Precision Handbook | Ergognome
- LukeW | Touch Target Sizes
- Ergonomie : les règles d’or d’une appli mobile réussie | Agence Idnext
“assurez-vous que la fréquence des flashs n’excède pas 3Hz”: pour les étoiles on peut se permettre un peu plus il me semble.
Les étoiles sont une exception bien sur ! 😉
[private joke]
Merci pour ce partage de connaissance. Paradoxalement, une bonne ergonomie est invisible pour l’utilisateur. Tes explications sont donc trés intéressantes pour prendre conscience de cette “magie” qui rend les interfaces intuitives et fluides.
Voici quelques suggestions pour tes prochains articles de blog sur l’art de positionner, regrouper et hierarchiser l’information. :
1) Horizontalité (pile) vs Verticalité (séquence)
2) Jouer avec les couleurs pour hierarchiser l’information (foncé vs pastel)
3) Profondeur des liens (architecture de rangement de l’information)
4) Zones vides ou cachées (aérer le contenu,…)
Merci Sam pour ton commentaire. Est-ce que tu peux développer un peu ? Donner des exemples concrets notamment. “aérer le contenu” je vois bien (je pensais l’avoir fait mais peut-être insuffisamment) mais le reste c’est un peu obscur pour moi…
Margaux,
J’essayerai de t’apporter demain le livre “Présentations zen” de Gary Reynolds…
https://www.amazon.fr/Pr%C3%A9sentation-zen-pr%C3%A9sentations-simples-percutantes/dp/2744095699