Pour améliorer la cliquabilité des éléments sur votre interface web, suivez la loi de Fitts !
Qu’est ce que la loi de Fitts ?
La Loi de Fitts (1) précise qu’une cible est d’autant plus rapidement atteinte qu’elle est proche et grande. Appliquer ce principe en ergonomie du web revient à améliorer la cliquabilité des éléments sur une interface. Il s’agit :
- d’augmenter la taille des éléments cliquables
- et de réduire leur éloignement par rapport au point de départ du mouvement de la souris.
Cette loi est effective dans les cas où le site doit inciter le visiteur à cliquer sur un objet : inscription à un formulaire, participation à un concours… Les éléments soumis à cette loi sont par exemple les barres de navigation, icônes, boutons, liens hypertextes…
Les éléments cliquables à optimiser
Pour appliquer la loi de Fitts à une interface, on conseille de hiérarchiser l’importance respective des différents éléments cliquables, en prenant en compte leur fréquence d’utilisation présumée. Naturellement, faciliter la cliquabilité des éléments de navigation principaux primera sur un lien hypertexte isolé dans le contenu.
Augmenter la taille réelle des éléments cliquables…
La loi de Fitts amène en premier lieu à recommander l’agrandissement de certains éléments pour cliquer dessus plus rapidement et surtout réduire le nombre d’erreurs . En ergonomie, le terme « erreur » signifie que l’utilisateur doit réitérer son action donc perdre en rapidité, voire abandonner sa visite. Il ne faut donc pas hésiter à augmenter la taille réelle des éléments cliquables.
Cela amène parfois à repenser la nature même des éléments cliquables. Dans l’exemple d’une liste de résultats paginés, on peut cliquer sur le numéro de la page à atteindre ou cliquer sur l’objet signifiant « Page suivante » : bouton, flèche, lien hypertexte. On privilégiera ce dernier, plus facile à cliquer avec son format plus important.
La cliquabilité du lien hypertexte est plus importante
que celle du bouton fléché (source : sephora.fr)
… et la taille virtuelle
En cliquant sur le libellé, la case est activée (source : easyjet.com)
Attention aux boutons qui, par leur design, suggèrent une cliquabilité qui n’existe pas. Augmentez alors la surface cliquable de l’élément en activant le bouton et son libellé textuel.
Dans une zone qui comprendrait plusieurs éléments actifs, pensez à espacer les éléments cliquables par un espace neutre (zone de buffer). Une erreur de clic sur un élément actif peut s’avérer critique et interrompre la navigation du visiteur.
Le bouton de droite est plus efficace car sa surface cliquable ne se limite pas au texte (sources : hsbc.fr, surcouf.com)
Aucune zone neutre n’est prévue entre les boutons (source : lcl.fr)
Le manque de distance peut être compensé par un changement de couleur de l’élément au survol du pointeur, favorisant ainsi la discrimination mentale entre les éléments.
Les éléments cliquables doivent être proches
La deuxième partie de la loi de Fitts est plus difficile à appliquer sur le Web car de nombreux emplacements sont conventionnels. La règle générale est alors d’adopter la logique d’utilisation des internautes : placer le bouton de validation à la fin du formulaire, doubler des boutons d’actions de la barre du haut à d’autres endroits utiles dans la page…
D’autres modes d’interaction avancés peuvent être utilisés, comme les raccourcis clavier (touche Entrée pour valider) ou le clic droit qui reprend le menu contextuel de l’endroit où est positionnée la souris (surtout valable sur les interfaces applicatives).
Références : A. Boucher, Ergonomie Web pour des sites efficaces. Eyrolles, 2007.