Règles d’or en Ergonomie Web

Règles d’or en Ergonomie Web : Toujours le bon choix ?

  http://www.webmarketing-com.com 

01 08 2013Geoffrey Laloux

La professionnalisation des sites web a mis en évidence l’importance de l’ergonomie et des concepts d’expérience utilisateur et d’architecture de l’information. Depuis, fleurissent ça et la diverses écoles qui définissent ou propagent les « best practices » que la plupart des WebDesigners s’échinent à appliquer…

Le fait qu’une pratique soit majoritairement appliquée ne signifie pourtant pas pour autant qu’elle est correcte… force est de constater que bien souvent les concepteurs de sites reproduisent par défaut des schémas et appliquent des règles « bien connues » sans nécessairement réévaluer la pertinence de leurs modèles.

Cet article est le premier d’une série qui vise à passer rapidement en revue les règles les plus souvent mises en avant afin de voir si elles sont toujours valides, s’il existe des alternatives, voire des contre-indications.  Pour Inaugurer cette série, nous commençons par 3 des plus grands classiques : les règles de Miller, de Pareto et du « 3 Clics ».

La Loi de Miller

Plus connue sous le nom de « principe du 7 plus ou moins 2 », la règle de Miller se base sur la psychologie cognitive et stipule que le cerveau humain est capable de traiter simultanément un maximum de 7 éléments en moyenne. C’est ce que l’on appelle (pompeusement) l’empan mnésique ou mémoire à court terme.  Appliquée au Web cela se traduit par l’idée qu’un menu de navigation par exemple devrait compter un maximum de 7 entrées (ou plus exactement entre 5 et 9). Au-delà l’utilisateur ne serait plus à même de comprendre rapidement la structure de navigation ou de la retenir. C’est une des règles les plus connues et généralement des plus suivies.

Pourtant, depuis  2011, un article de Jeanne Farrington publié dans la revue Performance Improvement Quarterly avance que la mémoire à court terme serait limitée à un maximum de 5 éléments, au-delà la difficulté augmente et devient vraiment problématique  à partir de 7 pour la majorité des personnes. Selon cette lecture que personnellement je partage totalement l’empan mnésique serait donc plutôt de 5+ maximum 2 éléments.  Cette reformulation de la règle est en revanche loin d’être majoritairement suivie.

Règle des 3 clics

Autre règle archi connue, est celle des 3 clics qui annonce que tout contenu devrait se trouver à un maximum de 3 clics du point de départ.  Prenons le cas d’un site e-commerce sur lequel je veux acheter un portable. Idéalement je devrais trouver mon produit en 3 clics.

Un clic depuis la page d’accueil pour arriver sur la page catégorie (Smartphone), un second clic pour arriver sur la page de sous-catégorie (la marque ou la gamme de prix) et enfin un 3eme clic pour atteindre la page produit.

On le voit cette limite des 3 clics est très restrictive et quasiment impossible à tenir si  on a affaire à un site avec beaucoup d’informations ou de produits à vendre car on ne dispose que de 2 pages « d’aiguillage » pour trouver le bon produit (3 si  on compte la page d’accueil). Appliquée strictement cette règle peut nous pousser à définir des catégories de produits « fourre-tout »  ou des pages d’aiguillages qui contiendraient plusieurs dizaines de liens.

Dans la pratique on constate pourtant que le nombre de clics n’est pas le plus important. Ce qui compte c’est que l’utilisateur doit avoir à chaque clic la certitude de progresser dans sa recherche et de s’approcher de son but. Pour cela il est primordial de soigner les éléments qui renseignent sur :

• Le chemin parcouru depuis le point de départ (par exemple un chemin d’Ariane) ;
• L’endroit où l’on se trouve actuellement (par exemple par une mise en avant de la catégorie produit sélectionnée) ;
• Le chemin qu’il reste encore à parcourir. Ce dernier point cependant n’est réalisable que dans des processus définis comme par exemple l’achat en ligne. Dans ce cas la présence d’un indicateur de progression est indispensable.

IL ne faut pas pour autant conclure que le nombre de clics peut être infini, si on garde en mémoire la règle de Miller on arrive à la conclusion que 7 clics pour obtenir son information est un maximum qu’il est préférable de ne pas dépasser.

 

Exemple : l’achat en ligne sur Eurostar comporte 7 étapes logiques, toutes annoncées à l’avance. A chaque étape franchie, le curseur reflète la progression et indique l’étape à venir. Le chemin d’Ariane permet de voir le trajet accomplis. 

Règle de Pareto (80/20)

Marronnier de tous les séminaires en management, la règle de Pareto est issue du monde des statistiques et est sensée affirmer que 80% des ventes d’un business quel qu’il soit proviennent de 20% des clients, le reste étant ce que Chris Anderson a appelé  la « longue traine » pour la première fois en 2004 dans le magazine Wired.

En matière d’architecture de l’information, on  extrapole et on proclame que 20% du contenu permet de satisfaire 80% des recherches.  Ce qui revient à dire qu’une « bonne » architecture doit servir en priorité « seulement »  20% des contenus les plus importants quitte à éventuellement délaisser le reste.

% contenu	% des attentes
20%	80%
80%	20%

Cette assertion est tout de même à affiner :

Gerry Mc Govern fut le premier à faire remarquer que 25% des activités d’un site (vente, pages vues, interactions, recherches etc.) portent sur seulement 5% du contenu. La longue traine quant à elle ne couvre que 60% des contenus, ce qui laisse la place entre les deux à un espace qui représente plus ou moins un gros tiers du contenu.  Selon Mc Govern, une bonne architecture de l’information doit tenir compte de 40% des contenus pour satisfaire 80% des demandes, ce qui est tout de même deux fois plus important que dans le modèle basé sur Pareto.

% contenu	% des attentes
5%	25%
35%	55%
60%	20%

Si elles ne sont pas fondamentalement fausses ou obsolètes, on le voit les 3 règles abordées dans ce premier article ont évoluées et doivent être nuancées ou adaptées à  l’évolution des connaissances.

Dans les prochains articles j’aborderai d’autres règles communément admises comme l’effet de Zigarnik, la loi de Fitt, la Gestäld etc.

Comme promis voici la seconde partie du mini dossier consacré aux règles d’or en ergonomie web. Rappelons que l’objectif est de prendre quelques règles d’ergonomie parmi les plus citées et considérées comme « universelles » et de voir si dans la pratique ces recommandations sont toujours valides ou non…

Dans la première partie j’avais abordé la loi de Miller, la règle des 3 clics et la loi de Pareto. Passons maintenant aux recommandations sur la loi de Fitts et la ligne de flottaison (le fold).

La loi de Fitts

Vous connaissez probablement déjà mais je résume quand même: édictée en 1954 par le psychologue Paul Fitts, cette loi permet de modéliser mathématiquement le temps nécessaire pour accomplir l’action qui consiste à pointer sur un objet cible (et par extension le fait de cliquer sur un bouton virtuel par exemple).

Avec la mesure de la taille de l’objet cible et de son éloignement du point de départ de l’action, le modèle de Fitts permet de calculer la facilité avec laquelle une personne peut effectuer la même action avec un objet cible différent (de taille et d’éloignement différents).

Formulée en 1954 ce modèle n’a évidemment aucun rapport avec l’informatique et encore moins ave les interfaces web. Ce sont les études menées ultérieurement par de nombreux autres chercheurs qui sont venues confirmer sa validité et son intérêt en ergonomie web.

Grossièrement résumés les enseignements du modèle de Fitts dans le domaine du web donnent ceci :

• Les boutons et autres éléments cliquables sont plus faciles à trouver s’ils sont d’une taille raisonnable ;
• Les bords et les coins d’un écran sont particulièrement faciles à trouver car le pointeur de la souris « bloque » sur ces limites même si on continue de bouger le curseur ;
• Le risque d’erreur (de cliquer à coté) augmente proportionnellement avec la distance que la souris doit parcourir pour atteindre le point cliquable.

Tout ça pour ça me direz vous…  et pourtant grâce à Fitts on sait que l’on peut par exemple augmenter de 34% les taux de conversion d’un site de ecommerce (voir l’etude en anglais)  en proposant une navigation contextuelle verticale (avec bouton « ajouter au panier ») en plus de la navigation horizontale en haut de page car cela permet de réduire la distance à parcourir depuis la fiche produit.

Faut-il pour autant en conclure que pour maximiser le taux de clic sur un élément il suffit de rendre cet élément toujours plus grand ? En théorie oui mais avec une nuance : le modèle de Fitts démontre que la « trouvabilité » (findability en anglais) d’un objet augmente avec sa taille (surface) mais pas de manière linéaire. Si augmenter la taille d’un petit objet le rend nettement plus visible, augmenter la taille d’un gros objet augmente également sa visibilité mais proportionnellement beaucoup moins.

La démonstration est mathématique, le modèle de Fitts étant un logarithme binaire, il existe un point à partir duquel les bénéfices deviennent marginaux et où les considérations esthétiques ou pratiques peuvent s’imposer sans avoir d’impact trop important sur les taux de clic.

L’objet A qui double se taille gagne nettement en visibilité, alors que l’élément B gagne moins en visibilité alors qu’il double également sa taille.

Les choses importantes doivent se trouver au-dessus du « fold »

« Les internautes n’aiment pas les longues pages, ils ne « scrollent » pas, toutes les informations importantes doivent se trouver au-dessus de la ligne de flottaison (le fold) »

En se basant sur ces assertions beaucoup de webdesigners « bourrent » la partie haute de leurs pages avec tous les « call to action », les bannières de promotion, les dernières nouvelles, le témoignage client, sans oublier le logo de l’entreprise et le mot du président.

Héritée du monde de la presse papier ou tous les gros titres devaient se trouver sur la couverture et dans la partie haute de manière à rester visible quand le journal est plié en deux sur l’étal du marchand de journaux, cette pratique a beaucoup de mal à résister aux usages actuels du web.

Notamment parce que la notion même de « fold » ou de ligne de flottaison est remise en cause.

• Il y a les interfaces « responsives » qui s’adaptent automatiquement à la multitude des tailles d’écrans disponibles, impossible dans ces conditions de définir « le » fold ;
• Les Smartphone nous habituent à une navigation tout en longueur, « scroller » devient habituel et facile grâce aux écrans tactiles ;
• Les interfaces pour tablette qui proposent des « sauts de page » en mode vertical et en horizontal (navigation en croix).

Navigation en croix

Conséquence on trouve de plus en plus de site « une page » qui tiennent soit sur un écran unique (la hauteur de la page = la résolution verticale de l’écran) soit qui s’affichent sur des longueurs kilométriques (15.000 pixels, voire plus…). Construire une mise en page calquée sur la hauteur type d’écran n’est plus une norme, c’est devenu tout au plus une habitude.

Le site Econsultancy a recensé   14 sites qui utilisent de manière intéressante une présentation tout en longueur.

Le « fold » ne doit donc pas constituer une limite absolue à condition de respecter quelques conseils :

• Ne faites pas correspondre la ligne de rupture avec un espace vide, cela pourrait donner l’impression que la page s’arrête au bas de l’écran. Utilisez des éléments pour « chevaucher » la limite et indiquer qu’il y a des choses à voir plus bas. (fig.3 et fig.4) ;
• Ne négligez pas les aides à la navigation « intra page », n’oubliez pas les « back to the top », les ancres, les menus dynamiques qui accompagnent la navigation (comme les boutons « partager » de Webmarketing & Co’m) etc. ;
• N’hésitez pas à placer vos « calls to action » à divers endroits dans la page. Pour les newsletters par exemple il est conseiller d’avoir le CTA au-dessus ET en dessous du fold. (on retrouve ici les principes de Fitts) cf. fig.5 ;
• Il reste quand même primordial de répondre aux questions fondamentales  (qui, quoi) en haut de page. (cf. les règles en écriture de contenus).

 

Conclusion

Comme pour la première partie, on peut constater que les « lois » de l’ergonomie doivent être sans cesse réévaluées afin de s’assurer qu’elles restent compatibles avec l’évolution des pratiques et des interfaces.

Cette évaluation constante est d’autant plus indispensable que les pratiques évoluent rapidement et que beaucoup de préceptes appliqués en ergonomie ont été édictés bien avant l’apparition des interfaces web.