Heuristiques de Nielsen : les 10 commandements de l’utilisabilité
Les heuristiques de Nielsen sont une liste de dix principes d’utilisabilité édictée dans les années 90 par le spécialiste de l’ergonomie des interfaces Jakob Nielsen. En UX, on les utilise notamment comme critères pour apprécier les interfaces dans le cadre de revues expertes que l’on appelle « évaluations heuristiques », mais elles sont un repère utile à n’importe quel stade d’un projet.
Un nombre considérable d’erreurs de conception courantes peuvent être évitées si l’on tient compte de ces dix commandements de l’utilisabilité. C’est la raison pour laquelle tout designer interactif devrait au minimum en avoir entendu parler.
La suite de ce billet tente d’expliquer et d’illustrer aussi clairement que possible chacune de ces recommandations.
1. Le statut du système doit être visible
Quand un utilisateur interagit avec un système, il a besoin de savoir si ses actions sont bien prises en compte. Est-ce que l’article a été ajouté au panier, est-ce que l’e-mail a été envoyé, est-ce que le clic / tap est suivi d’effet ?Autrement dit, qu’est-il entrain de se passer ?
Mettre en place des indicateurs de statut permet à l’utilisateur de savoir où il en est, et d’identifier la source de ses erreurs le cas échéant. Ne pas lui fournir de retour d’information revient à lui demander de jouer au golf les yeux bandés. C’est très compliqué et particulièrement frustrant !
Il y a de multiples façons de fournir un feedback à l’utilisateur : état cliqué, effets de survol, messages d’erreur ou de confirmation, barre de progression… Les snackbars utilisées dans les applications Google sont des indicateurs de statut particulièrement efficaces. Ces brefs messages temporaires et contextualisés informent l’utilisateur sur ce qu’il se passe durant son interaction avec le système : « message envoyé », « conversation placée dans la corbeille », « ajouté à l’album » etc.
En UX design, un manque d’information équivaut à un manque de contrôle. Tenir ses utilisateurs informés de ce qu’il se passe en temps réel est la première des heuristiques de Nielsen et sans doute la plus importante.
2. Le système doit correspondre au monde réel
Le meilleur moyen de favoriser la compréhension d’une interface c’est de s’appuyer sur des concepts et un lexique que l’utilisateur connaît déjà. La notion de « panier » en e-commerce est un bon exemple d’application de cette heuristique. Le panier d’un site marchand n’a pas grand chose à voir avec celui que l’on utilise au supermarché. Cependant, il remplit la même fonction : contenir les futurs achats dans l’attente du paiement. Il n’est donc pas illogique d’employer un même mot pour désigner ces deux concepts.
Ce type d’analogie est également valable pour les aspects graphiques de l’interface. La couleur rouge, par exemple, est très souvent utilisée dans le monde réel pour attirer l’attention (panneaux routiers, borne d’incendie, feux arrière des voitures), elle est donc toute indiquée pour les messages d’erreur que l’on souhaite visibles.
Cette quête de similarité avec le monde réel concerne également le langage de l’interface. Il faut veiller à s’adresser aux utilisateurs avec les mots de la vie courante. C’est pourquoi, sauf exception, on évitera d’employer un lexique trop technique ou un jargon de spécialiste. Le site web de Lydia emploie l’expression « métabancaire » qui ne doit pas parler à grand monde. À l’inverse, Bankin utilise des mots simples qui permettent à n’importe qui de comprendre immédiatement la valeur du service. Et comme les termes du quotidien sont aussi ceux que les gens tapent dans les moteurs de recherche, c’est plutôt bon pour le référencement.
3. Contrôle de l’utilisateur et liberté
Les gens se trompent constamment. Ces erreurs conduisent parfois à la découverte de la pénicilline ou à l’invention du Post-it, mais la plupart du temps, elles ne mènent tout simplement à rien. Il faut donc fournir aux utilisateurs distraits une « sortie de secours », un moyen simple d’annuler une action et de revenir en arrière.
Lorsque l’on ferme un fichier Illustrator sans avoir enregistré les modifications au préalable, une fenêtre modale apparaît pour nous rappeler de le faire. Nous pouvons tout à fait choisir d’ignorer cet avertissement et quitter l’application sans enregistrer, cependant le système nous offre la possibilité de revenir en arrière dans le cas où l’on se serait trompé. Combien d’heures de travail ont été sauvées par cette simple fenêtre d’annulation ?
4. Le système doit être cohérent avec les standards
À moins que vous ne vous appeliez Google ou Facebook, il faut se rendre à l’évidence : les utilisateurs passent la plupart de leur temps sur d’autres produits que les vôtres. Par conséquent, si votre système obéit aux standards les plus répandus, ils n’auront pas à apprendre à s’en servir.
Exemple : lorsqu’un utilisateur consulte un site web mobile, il s’attend à trouver le menu dans la partie haute de l’écran, généralement à gauche, représenté sous la forme d’un pictogramme à deux ou trois bandes. Chacun est libre de placer le menu dans la moitié inférieure de l’écran et de le symboliser par une maison, un champignon ou un castor, mais ça ne devrait pas favoriser sa découvrabilité.
Apple, Gmail et Behance, trois sites aux objectifs très différents, se plient à cette convention du « burger menu », afin de simplifier la compréhension de leur interface.
5. Prévention des faux-pas et des erreurs
Permettre la réparation des erreurs de l’utilisateur est indispensable, mais il serait préférable qu’elles ne se produisent pas du tout !
En UX, on distingue les « faux-pas » et les « erreurs ». Les premiers interviennent plutôt accidentellement, lorsque l’utilisateur est inattentif ou pressé. Exemple : l’interversion de deux caractères dans un mot de passe ou un clic accidentel. Les secondes se produisent lorsque l’utilisateur a des objectifs inadéquats par rapport à une situation. Exemple : placer le mauvais fichier dans la corbeille.
Les formulaires sont une source de « faux-pas » inépuisable. D’abord parce qu’ils sont souvent mal conçus, et ensuite parce que les utilisateurs ont tendance à les compléter rapidement sans y prêter beaucoup d’attention. Un des moyens de réduire ces « faux-pas » est de fournir des guides à l’utilisateur. Par exemple, lorsque l’on souhaite collecter un numéro de téléphone valide, il est judicieux comme le fait Kapten, d’afficher les caractères tapés par l’utilisateur selon le format en vigueur dans son pays. En France, une suite de cinq nombres. On sait que les gens ont plus de facilité à scanner l‘information lorsqu’elle est structurée en paquets. On augmente ainsi significativement les chances que l’utilisateur détecte une faute de frappe éventuelle.
Les erreurs peuvent quant à elles être prévenues par la mise en place de garde-fous. C’est le principe des rails latéraux sur la piste de bowling réservée aux débutants. La boule ne peut pas atterrir dans la rigole, car elle n’y a tout simplement pas accès. Exemple : il est impossible de sélectionner un vol de retour antérieur au vol de départ sur le site de Kayak car les dates sont grisées.
6. Reconnaître plutôt que se souvenir
Il est plus simple de reconnaître quelque chose que de s’en souvenir. La reconnaissance est un phénomène automatique et intuitif qui ne nécessite pas vraiment d’effort mental. C’est le processus qui se produit lorsque l’on croise un visage familier : « Tiens, voilà le type de la compta ! ».
À l’inverse, se souvenir est un processus réflectif et rationnel beaucoup plus coûteux sur le plan cognitif. C’est le mécanisme à l’œuvre quand on essaye de se rappeler du prénom de la personne en question.
Une interface qui requiert trop d’efforts de mémoire est mal conçue. L’utilisateur doit pouvoir trouver ou retrouver ses marques très rapidement. Les instructions pour utiliser le système doivent être immédiatement visibles et /ou facilement accessibles. Il faut également laisser aux utilisateurs la possibilité de retomber sur les chemins qu’ils ont déjà empruntés.
Spotify applique à la lettre cette heuristique en proposant un accès rapide aux titres précédemment écoutés.
7- Flexibilité et efficacité d’usage
Les utilisateurs ont des niveaux d’expertise variés. Certains sont débutants, d’autres beaucoup plus avertis. Une bonne interface doit s’adresser à tous les profils. Les novices doivent trouver leurs marques sans être parasités par des fonctionnalités dont ils n’ont pas l’usage et il faut permettre aux experts de gagner en efficience en leur dédiant des parcours plus rapides et /ou plus complets.
Sur macOS, dans la page « Préférences réseaux », les options les plus techniques, plutôt destinées aux connaisseurs, sont volontairement dissimulées derrière le bouton « avancé... ». Les réglages de base demeurent accessibles au premier niveau.
Sur iOS, dans l’application Notes, les utilisateurs avertis peuvent gagner un peu de temps en swipant de droite à gauche pour supprimer une ligne. La même action peut également s’accomplir via un parcours plus classique et un peu plus long pour les utilisateurs moins expérimentés.
8. Esthétique et minimalisme
La plupart des utilisateurs traitent le contenu rapidement sans le lire de façon exhaustive. Plus le contenu est parasité par de l’information superflue, plus cette opération est laborieuse et source d’erreurs. Par conséquent il faut autant que possible, et sans dénaturer l’âme du produit, le débarrasser de toutes les informations non nécessaires.
Le contenu utile rivalise souvent avec l’interface elle même, ou ce que Nielsen appelle le « Chrome », en référence aux décorations de métal brillant qui ornaient les voitures américaines dans les années 1950. Plus l’espace mental et visuel alloué au chrome est grand, moins il reste de place pour le reste. Less is more !
La page « paiement » de Lydia est un très bon exemple d’équilibre entre esthétique et minimalisme. L’interface est limitée aux seuls éléments utiles : un clavier, deux boutons, un champ de texte et une tabbar.
9. Aide à la reconnaissance, au diagnostic et à la réparation des erreurs.
Lorsque une erreur intervient, il faut aider l’utilisateur à en prendre conscience et à la réparer rapidement. C’est à cela que servent les messages d’erreur. Afin d’être pleinement efficaces, ils doivent posséder trois caractéristiques importantes :
- Ils doivent être visibles : l’utilisateur doit les remarquer et ne pas les confondre avec le reste du contenu.
- Ils doivent être explicites afin que l’utilisateur comprenne la source de l’erreur. On évitera les textes obscurs et abscons du type : « erreur 00002 ».
- Ils doivent être constructifs, et apporter de l’aide dans la résolution du problème.
Le formulaire de création de compte Dropbox est plutôt exemplaire en ce domaine. Il spécifie clairement à l’utilisateur étourdi la source de son erreur, en l’occurrence l’absence d’arobase dans le champ e-mail.
10. Aide et documentation
Les utilisateurs ne lisent jamais la documentation… Jusqu’à ce qu’ils rencontrent un problème qui les contraigne à le faire ! Tous les systèmes doivent donc offrir une forme d’assistance en cas de pépin. Il peut s’agir d’info-bulles discrètes et contextualisées ou d’une rubrique plus globale accessible dans la navigation principale.
Le centre d’aide de Pinterest est plutôt bien réalisé. Trois scénarios d’utilisation complémentaire sont adressés : une recherche libre pour les gens pressés, une longue liste de questions fréquentes pour les personnes plus consciencieuses, et enfin, un formulaire de contact dans le cas où l’utilisateur ne trouve pas de réponse à sa question.
Conclusion
Ces recommandations découlent du bon sens. Il suffit pourtant de parcourir le web pour se rendre compte que la prévention des erreurs, la documentation ou le respect des standards sont régulièrement négligés au détriment de l’expérience utilisateur.
Les heuristiques de Nielsen permettent d’identifier rapidement certains problèmes élémentaires et de les corriger. Elles ne sont pas la panacée — les tests utilisateurs étant en définitive la meilleure source d’information sur l’efficacité d’une interface — mais elles sont une check-list assez complète et un bon outil d’évaluation à la disposition des designers.
