Webdesign - Règles d’or en Ergonomie Web : Toujours le bon choix ? (la suite) - 9 septembre 2013

Règles d’or en Ergonomie Web : Toujours le bon choix ? (la suite)

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).

Google Loves Me

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).

ergonomie web: algorithme de Fitts

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.

Ergonomie Web: limites de la loi de Fitts
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) »Ergonomie Web: navigation en croix

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).
Ergonomie Web
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).

Ergonomie Web: utilisation du foldConclusion

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.

Si l’ergonomie web et l’architecture de l’information vous intéressent :