Découvrir le concept d’affordance.
Imaginons que vous arrivez devant une porte. Vous ne l’avez pas encore approchée et pourtant, avant toute action, vous savez d’un simple regard si vous devez la pousser, la tirer ou la faire coulisser. En effet, des indices tels que la présence d’une poignée, d’un bouton, voire d’un écriteau « poussez » vous indique la façon dont vous pouvez l’ouvrir. Lorsque vous arrivez sur un site web, c’est pareil. Les objets d’une interface digitale vous fournissent des indices quant à la façon dont vous pourrez interagir avec eux.
Aider l’internaute à se diriger, c’est d’abord le diriger dans la bonne direction. Et sur Internet, il ne s’agit plus de poignées de porte mais, de champs de saisie, de liens, de boutons… L’internaute doit savoir très vite, d’après l’apparence d’un objet, si ce dernier est cliquable, s’il peut le mener quelque part ou lui permettre d’accomplir une action. Ces caractéristiques d’action suggérées par la forme et le comportement des objets sont ce que l’on appelle des affordances.
Plusieurs dimensions d’un objet participent à son affordance :
- sa forme : un rectangle avec un texte majuscule centré suffira pour être perçu comme un
bouton ; un texte souligné sera immédiatement perçu comme un lien. - sa couleur : les couleurs vives, surtout appliquées à de petites surfaces, sont perçues comme
des liens, ou utilisées pour des boutons. Un rectangle de couleur blanche vide sera perçu
comme un champ de formulaire. - son libellé : les mots tels que « S’inscrire », « Envoyer», « Ajouter au panier » sont des indices
de l’action. - Enfin, son animation au survol de la souris : en passant sa souris sur un objet qui s’anime,
cet objet sera fortement perçu comme « cliquable ».
Vous l’avez compris, il n’est donc pas question de souligner un titre non cliquable, de créer une animation au survol d’une image si elle n’est pas cliquable, ou encore d’habiller un simple titre avec un fond coloré rectangulaire sous peine d’obtenir ce que l’on appelle des affordances erronées et de décevoir très fortement nos utilisateurs.
Les affordances permettent aux utilisateurs d’anticiper le comportement des objets qu’ils voient à l’écran et donc de mieux se diriger. En optimisant l’affordance de « cliquabilité », vous augmentez l’utilisabilité de votre interface et facilitez le traitement mental de vos pages par vos utilisateurs.
Pour aller plus loin, je vous lance un défi. Rendez-vous sur le site de votre commune. Cherchez des exemples d’affordance erronée et imaginez la façon simple dont vous pourriez corriger ces erreurs. Quelles dimensions de l’objet allez-vous renforcer ?
