Utilisabilité

En attendant les vidéos des conférences organisées au siège de Microsoft lors de la journée mondiale de l’utilisabilité, je me permets un rappel des 30 principes d’utilisabilité, dont le résumé ci-après est issu de smashing magazine.
Tous ne sont pas à prendre au pied de la lettre, mais une piqûre de rappel ne fait jamais de mal.


1. Principe des 7±2
Limite de la mémoire à court-terme oblige, entre 5 et 9 items peuvent être mémorisés. Bien que parfois mis en question, il est entendu de limiter à 7 items les choix de navigation.
Le concepteur d’un site Web évitera ainsi de dépasser 7 rubriques principales.

2. Règle des 2 secondes
Il est acquis que l’internaute n’est pas patient. Il n’aime pas attendre, et d’autant moins lorsqu’il n’a pas été averti du délai.
Le système réagira donc de préférence en moins de 2 secondes.

3. Règle des 3 clics
L’internaute est également volage. Et s’il n’est pas séduit en 3 clics, il risque fort de partir butiner ailleurs.
Cette règle ne constitue plus aujourd’hui l’incontournable qu’elle fût. L’attention est désormais portée sur le guidage de l’utilisateur et l’accent mis sur la structuration d'informations au sein desquelles l’internaute ne se sentira pas perdu.

4. Règle des 80/20 (loi de Pareto)
La loi de ce sociologue qui observe que 80 % des richesses sont détenues par 20 % des personnes, a été modélisée, puis reprise et adaptée par différents domaines.
En ergonomie, il est acquis que seules 20% des fonctionnalités sont utilisées dans 80% du temps.

5. Les 8 règles d'or de la conception d'interface
Les heuristiques de Ben Shneiderman s’appliquent à la majorité des interfaces applicatives ou web.
Elles se résument à quelques points à retenir en phase de conception : cohérence, raccourcis, feedback, contenus explicites, gestion des erreurs, retours aisés, la main à l’utilisateur, pas de surcharge mnémonique.

6. Loi de Fitts
Selon leur position et les contraintes relatives au mouvement de la souris, toutes les zones de l’écran ne sont ni visibles, ni accessibles de manière équivalente.
Il conviendra donc d'agencer les élements de l'interface en tenant compte de cette loi.

7. Pyramide inversée
Le style éditorial adapté au Web doit respecter le principe qui veut que l’on commence par la conclusion.
Plus un contenu est important, plus il est situé haut dans la page.

8. Satisfaction
Même si plusieurs solutions coexistent, l’internaute ne trouve satisfaction que dans celle qui lui correspond.

9. Syndrome de l'oisillon
l’IHM originelle est toujours l’étalon de référence. L’utilisateur y est habitué et présente généralement une tendance naturelle à rejeter d’emblée les refontes ultérieures.

10. Banner blindness
La publicité est mal-aimée ; à tel point qu’elle en est ignorée par les internautes pendant leur recherche de contenus particuliers. Ceux-ci vont même jusqu’à rejeter tout ce qui ressemble de près ou de loin à une bannière publicitaire.

11. Effet Cliffhanger et effet Zeigarnik
L'effet Cliffhanger joue sur la peur du vide et de l’absence de réponse propre à l’être humain.
La publicité s’en inspire parfois, insistant sur l’effet choc, la provocation, ou l’intrigue.
L’effet Zeigarnik souligne le fait que l’interruption subite d’un évènement en facilite la mémorisation.
A suivre …

12. Gestalt Theory
La psychologie de la forme démontre que l’Homme est rompu à des habitudes de catégorisation et de regroupement.
Les lois de "proximité", de "bonne continuité" et de "similitude", appliquées à la conception d’IHM sous-entendent qu’il est nécessaire de toujours regrouper les items de forte proximité catégorielle - y compris les éléments navigationnels – et d’optimiser les séparateurs.
L’internaute percevra d’autant plus facilement des informations qu’elles sont regroupées (en rubriques, paragraphes, zones dédiées à certains types d’infos).

13. Effet d'autoréférence
A l’heure où les réseaux sociaux font parler d’eux plus que de raison, référer au vécu de l’internaute est un excellent moyen de capter son attention.

14. Oculométrie (eye-tracking)
Cette technique est utilisée pour enregistrer les mouvements de l’œil d’un sujet parcourant un site. L’analyse des résultats permet de dresser une carte des zones les plus regardées.
Elle sert de fondement aux décisions de conception d’interfaces.

15. Fold
L’espace correspondant à cette zone de visibilité (ie sans scrolling) constitue la « page écran ».
Elle est la référence en terme de visibilité de l'interface.

16. Zone fovéale
En termes de vision, la résolution est maximale dans la zone fovéale (zone de notre champ de vision dans laquelle nous percevons le plus de détails). Dans cet espace, d’un angle de 2°, aucun balayage visuel n’est nécessaire. C’est donc sur cette zone qu’il est intéressant de concentrer les informations majeures du site à concevoir.

17. Gloss
L’internaute a besoin de se sentir maître de ce qu’il fait sur le site Web. Il faut donc l’informer clairement des conséquences de ses clics (lien interne au site ou non, accès à telle ou telle information).

18. Tolérance aux conditions dégradées
Quelle que soit la configuration du poste de l’utilisateur (types de navigateur, connexion …) et donc les capacités d’accès à certaines parties du site, ce dernier doit rester fonctionnel.
Ainsi, il est recommandé de toujours fournir une version texte des éléments vidéo ou photos, de manière à ce qu’ils soient appréhendés s’ils ne peuvent pas être visualisés.

19. Granularité
Adaptable au public cible du site, la granularité consiste à diviser un ensemble complexe de données ou d’informations, en unités plus petites et donc plus aisées à appréhender.

20. Zones sensibles
Afin de mettre en avant des zones cliquables, on leur attribue un effet qui change leur apparence au rollover. Ceci est particulièrement utile dans le cas d'images cliquables utilisées pour des teasers.

21. Lisibilité
La lisibilité - ou legibility - indique dans quelle mesure un texte est lisible (ie facile à lire visuellement - et pas obligatoirement intellectuellement).

22. Navigation « en démineur »
Un défaut d’identification visuelle des liens oblige les internautes à promener leur souris sur l’interface afin de les détecter.
Les liens doivent donc toujours être graphiquement différenciés.

23. Navigation « mystère »
En l’absence d’indication sur la destination d’un lien ou sur l’action liée à une icône, le concepteur pousse l’utilisateur à naviguer en aveugle. Ceci est particulièrement en opposition avec le besoin de maîtrise de l’internaute.

24. Cohérence visuelle
Un site correctement conçu doit respecter des règles logiques d’agencement des éléments navigationnels et éditoriaux, sans lesquels l’utilisateur est rapidement désorienté et donc insatisfait.

25. Enrichissement progressif
Afin de rendre une interface accessible indépendamment de contraintes techniques, il est conseillé de la concevoir selon un processus qui consiste à partir du minimum exécutable dans la majorité des cas, et d’y ajouter des couches successives de fonctionnalités accessibles aux mieux lotis, sans défavoriser les autres.

26. Lisibilité cognitive
La lisibilité cognitive - ou readability - réfère au degré de compréhensibilité d’un texte (en fonction du vocabulaire utilisé, ou de sa complexité).

27. Conception centrée utilisateur
Base de l’ergonomie, il s’agit de concevoir un produit en réponse aux besoins de ses utilisateurs finaux. Elle nécessite le recueil préalable de ce que l’on appelle les « besoins-utilisateurs » sur lesquels se baseront la structure du site mais aussi les choix navigationnels et éditoriaux.

28. Vigilance
Automatiser les tâches autrefois dévolues à l’utilisateur et requérant toute son attention (correction orthographique ou sauvegarde régulière d’un document, par exemple) permet de libérer l’attention de l’utilisateur au profit du cœur de sa tâche.
La conception d’applicatifs présentant des fonctionnalités de ce type concourt à optimiser leur utilisabilité.

29. Design intuitif
Il est fondamental de concevoir des interfaces de manière à ce qu’elles soient utilisables d’emblée par un utilisateur novice (ie sans formation, ni aide préalable de ce type)

30. Wireframes
Le processus de conception intègre idéalement une maquette fonctionnelle (wireframe) à but de démonstration ou servant de base à des tests de validation.