Dans un article intitulé "30 Usability Issues To Be Aware Of", Smashing Magazine recense 30 concepts et définitions que toute personne s'intéressant à l'ergonomie et à l'utilisabilité devrait connaître. Ce billet en est une adaptation en français :

Le principe des 7±2 éléments

Le cerveau humain étant limité dans sa capacité à traiter l'information, celui-ci aborde la complexité en traitant l'information par blocs. Les études menées par George A. Miller tendent à montrer que notre mémoire à court-terme ne peut retenir que 5 à 9 éléments à la fois. Ce fait est souvent utilisé comme un argument pour limiter le nombre d'options de navigation d'un menu à 7. Celà dit ce principe fait débat.

La règle des 2 secondes

En vertu de ce principe, un utilisateur ne devrait pas avoir à attendre plus de 2 secondes certaines réponses du système, comme le passage d'une application à une autre, ou le lancement d'un programme. Le choix des 2 secondes est arbitraire, mais il s'agit d'un ordre de grandeur raisonnable. Ce qui est sûr, c'est que moins l'utilisateur attend, meilleure est son expérience.

La règle des 3 clics

Selon cette régle, les utilisateurs tendent à abandonner un site lorsqu'ils ne sont pas capables d'accéder à l'information ou au service en l'espace de 3 clics. Cette régle mets donc l'accent sur la necessité d'une navigation claire, d'une structuration logique, et d'une arborescence simple à appréhender.

Le chiffre de 3 clics n'est cependant pas critique : le plus important est que l'utilisateur sache où il en est, et qu'il n'ait pas l'impression de perdre le contrôle.

La loi de Pareto ou la règle des 20/80

Cette loi postule que 80% des effets viennent de 20% des causes. Bien connue du marketing, cette loi peut aussi s'appliquer en matière d'utilisabilité. Par exemple, des progrès très importants peuvent souvent être accomplis en identifiant les 20% d'utilisateurs, des activités ou des processus qui représentent 80% du profit, et en ciblant les efforts sur cette population.

Les 8 règles d'or de la conception d'interface

Suite à ses recherches sur la conception d'interfaces, Ben Shneiderman a proposé un ensemble de règles empiriques, applicables dans la plupart des systèmes interactifs. Ces règles concernent tout aussi bien les interfaces utilisateurs que les interfaces web.

  • Recherchez la cohérence avant tout.
  • Offrez des raccourcis aux utilisateurs avancés.
  • Offrez un retour d'information (feedback).
  • Concevez des dialogues avec une fin explicite.
  • Offrez des moyens simples de gestion des erreurs.
  • Permettez des retours en arrière simples.
  • Faites en sorte que l'utilisateur se sente le maître.
  • Ne sollicitez pas trop la mémoire à court-terme de l'utilisateur.

La loi de Fitts

Enonçé par Paul Fitts en 1954, ce modèle du mouvement humain prévoit que le temps nécessaires pour atteindre rapidement une zone cible est fonction de la distance et de la taille de la cible. C'est le cas par exemple d'un mouvement de souris. Jouer sur la taille et la distance de la cible peut alors influer sur l'accessibilité et l'efficacité de l'interface.

La pyramide inversée

La pyramide inversée est un mode d'écriture où le résumé d'un article est présenté dès le début de celui-ci. Cette approche est bien connue des journalistes : l'article débute donc par une conclusion, suivie d'éléments-clés et finalement d'élément de moindre importance. Les internautes recherchant une gratification immédiate, la pyramide inversée est importante aussi bien en matière d'écriture qu'en matière d'expérience utilisateur.

Satisfaction

Les utilisateurs du web ne recherchent pas la meilleure façon de résoudre leur problèmes, mais bien la résolution effective de ceux-ci. Ils ne sont pas intéressés par la solution la plus intelligente, mais aux contraire favorisent les solutions qu'ils jugent "satifaisantes", même s'il existe des solutions plus performantes sur le long terme.

Le syndrome de l'oisillon

Ce syndrome décrit la tendance naturelle des utilisateurs à adhérer au premier type d'interface expérimenté, et à juger les autres en fonction de leur degré de similarité avec le premier. La conséquence est que les utilisateurs préfèrent en général les systèmes auxquels ils sont habitués et rejettent ceux qui ne leur sont pas familiers. Ce qui posent des problèmes en matière de redesign : les utilisateurs, habitués à un design, se sentent souvent mal à l'aise lorsque une nouvelle interface est mise en place.

Banner blindness

Les internautes tendent à ignorer tout ce qui ressemble à de la publicité, et ils sont même assez bons à ce jeu. La publicité est bien perçue, mais elle est ignorée la plupart du temps. La raison en est que les utilisateurs cherchant de l'information se concentrent uniquement sur les zones où ils pensent pouvoir trouver celle-ci, c'est-à-dire les liens et les zones de texte.

Les effets Cliffhanger et Zeigarnik

L'être humain ne supporte pas l'incertitude : qu'une question lui vienne à l'esprit, il lui faut absolument une réponse. L'effet Cliffhanger, qui est fréquemment utilisé pour pimenter les intrigues, exploite cette tendance en introduisant une interruption soudaine qui laisse l'utilisateur face à révélation choc, ou à une situation non-résolue. Cet effet est aussi très souvent utilisé dans la publicité, où poser des questions ouvertes ou provocantes pousse l'utilisateur à lire une publicité ou à cliquer sur une bannière.

Découvert en 1927, l'effet Zeigarnik désigne le fait qu'une tâche a tendance à être mieux mémorisée lorsque elle est interrompue. Appliqué au web, cet effet établit une connection émotionnelle avec les lecteurs, et est extrêmement efficace en terme de marketing. Les internautes mémorisent alors mieux les publicités. Cet effet est aussi exploité pour fidéliser les utilisateurs d'un site (ex : "Abonnez-vous à notre fil RSS pour ne pas manquer la suite de l'article").

Les lois de la Gestalt

Aussi appelé "psychologie de la forme", cet ensemble de principes constitue un des fondamentaux de la conception d'interfaces.

  • Loi de proximité : lorsque nous percevons une collection d'objets, nous considérons les objets proches les uns des autres comme formant un groupe.
  • Loi de similitude : lorsque nous percevons des objets jugés similaires, nous les voyons comme formant un groupe.
  • Loi de Prägnanz : au sein de notre champ visuel, certains objets sont perçus comme étant de premier plan (les figures), tandis que les autres sont perçus comme d'arrière plan (le fond).
  • Loi de symétrie : nous concevons souvent les objets comme des formes symétriques ayant un centre.
  • Loi de bonne continuité : nous tendons naturellement à clôre ou compléter des objets qui ne sont en réalités pas clos (ex : le logo IBM)

L'effet d'autoréférence

L'autoréférence est particulièrement importante en matière d'écriture web, et peut améliorer significativement la communication entre l'auteur et le lecteur. Nous nous souvenons en effet davantage des choses lorsque elles ont un lien avec nos concepts, nos expériences. Il est donc souhaitable d'exploiter l'autoréférence quand on souhaite communiquer plus efficacement.

L'eye-tracking (ou oculométrie)

L'eye-tracking est un procédé qui consiste à enregistrer le parcours du regard sur une interface, pour ensuite dresser une carte des zones les plus vues. Cette technique permet notamment d'évaluer la facilité de navigation d'un site.

Le "pli" (fold)

Le "pli" se définit comme étant la limite inférieure en dessous de laquelle le contenu du site n'est plus visible. Cette limite est dépendante de la résolution de l'écran. La région au dessus du pli, visible sans scrolling, est appelée "page écran".

La zone fovéale

La fovéa est la partie de l'oeil humain en charge de la vision centrale. Cette vision centrale nous sert à lire, conduire, regarder la télévision, et à accomplir toutes les activités où le besoin de détail est très important. La zone fovéale désigne la zone du regard où le maximum de détail peut être perçu. cette zone occupe un angle de vision d'environ 2 degrés.

Les annotations

L'annotation est une action automatique fournissant des informations sur la destination d'un lien ou la fonction d'un contrôle. Concernant les liens, une annotation peut être délivrée grâce à l'attribut "title". Les annotations participent à l'usabilité d'un site, en permettant aux utilisateurs de savoir précisément où ils vont.

Dégradation élégante

La dégradation élégante désigne la capacité d'un site ou d'une page à fournir une information ou un service même si certains de ses composants ne peuvent être utilisés. En pratique, cela revient à s'assurer que le site reste utilisable quelle que soit la configuration de l'utilisateur.

La granularité

La granularité mesure à quel degré un ensemble complexe d'informations a été réduit en un nombre plus petit d'éléments. La granularité de l'information peut être adapté en fonction du public visé.

Les zones sensibles

Les zones sensibles sont des zones cliquables qui changent de forme ou d'apparence une fois survolées ou cliquées. Ces zones utilisent souvent la propriété CSS ":focus".

La lisibilité perceptive

La lisibilité perceptive (legibility) mesure la facilité d'un texte à être lu. Elle ne s'intéresse qu'à la perception visuelle, et non à la compréhension du texte.

La navigation en "démineur"

Ce terme (minesweeping) désigne un mode de navigation à l'aveugle où l'utilisateur promène sa souris sur la page, en utilisant le changement d'apparence du curseur pour détecter les liens. Un tel comportement indique la plupart du temps un défaut de conception de l'interface.

La navigation "mystère"

La "navigation mystère" (mystery meat navigation) est un terme décrivant des interfaces de navigation difficilement utilisables du fait que les destinations des liens ne sont pas clairement identifiables. C'est souvent le cas des éléments de navigation à base d'icônes non-standards.

La cohérence visuelle

Ce concept décrit la cohérence de l'agencement physique du site (places du logo, des éléments de navigation, typographie...). La cohérence est essentielle pour un repérage et une navigation efficaces.

L'enrichissement progressif

L'enrichissement progressif est une stratégie de conception d'interfaces où les fonctionnalités sont ajoutées par couches. A la couche de base, accessible à tous les navigateurs, sont ajoutées des fonctionnalités supplémentaires pour les utilisateurs de navigateurs modernes. L'avantage principal de ce mode de conception est l'accessibilité des interfaces ainsi produites.

La lisibilité cognitive

La lisibilité cognitive (readability) mesure la facilité d'un texte à être compris, en se basant sur la complexité des phrases et sur le vocabulaire employé. Le plus souvent, ce type de lisibilité se mesure en terme d'âge ou d'années d'étude nécessaires pour comprendre le texte. La lisibilité cognitive est à distinguer de la lisibilité perceptive.

La conception centrée utilisateur

La conception centrée utilisateur (CCU) est un mode de conception où les utilisateurs, leurs besoins, leurs interêts, et leurs comportements définissent les fondations d'un site en termes de structure, de navigation, et d'information. La CCU est aujourd'hui devenue un standard, en particulier grâce à l'essor du web 2.0 où le contenu est généré pour une large part par les utilisateurs.

La vigilance

La vigilance, ou état de veille, est la capacité à rester attentif lors de l'accomplissement de tâches longues, monotones ou répétitives, comme la relecture de documents, la gestion d'emplois du temps, la sauvegarde régulière de fichiers etc. Dans les applications web modernes, les tâches de cet ordre sont automatisées et gérées en arrière-plan, ce qui améliore l'usabilité puisque la vigilance des utilisateurs est limitée.

Le design intuitif (Walk-Up-And-Use design)

Le design d'une interface est dit intuitif quand un utilisateur est capable d'utiliser l'interface dès la première fois, sans aucune introduction ou formation.

Les Wireframes

Le wireframe, ou "maquette fonctionnelle", est un squelette qui décrit les idées, les concepts et la structure d'une interface ou d'un site (exemples ici et ). Les wireframes peuvent être utilisés pour présenter un projet de site aux parties prenantes. Le design d'un wireframe est en général très sommaire, et il s'agit même fréquement de simples croquis (JPG) réalisés sur papier.