Best Of - Définition : l’affordance - 23 avril 2013

Définition : l’affordance

Faites en sorte que les éléments de votre site soient faciles à interpréter! Utilisé en usabilité, le terme « affordance » fait référence à la capacité d’un objet à suggérer sa propre utilisation. Par exemple une chaise amène l’idée de s’asseoir, un classeur celle de ranger etc…

Cette notion est particulièrement importante en ce qui concerne les interactions homme-machine ainsi que dans ce que l’on nomme le « design d’interaction » dans lequel il s’agit de permettre aux utilisateurs de comprendre l’utilisation des objets virtuels (boutons, etc…), et ce seulement en visualisant ceux-ci.

Salon Emarketing 2018

Les principaux éléments avec affordance à prendre en considération :

Les boutons et onglets : L’affordance sur les objets de navigation est essentielle sur les sites! Les boutons et les onglets portent ces noms pour la simple et bonne raison qu’ils ont une apparence proche de celle des boutons et onglets que nous pouvons trouver « dans la vie réelle ». Voici un exemple montrant l’importance de l’aspect de ces éléments – il s’agit de faire comprendre au visiteur qu’ils sont cliquables!

affordance-for-buttons

Les liens : Par définition un lien est un morceau de texte que amène le visiteur sur une autre page ou bien un autre site web. C’est pourquoi les liens doivent se détacher visuellement du texte « normal ». Vos visiteurs ne vont pas s’amuser à cliquer sur chaque mot pour voir si c’est un lien ou pas!

Les icônes : Les symboles et autres représentations visuelles doivent également être facilement identifiables par l’utilisateur. Les pictogrammes ci-dessous sont utilisés comme des standards:

  • maison : page d’accueil du site ;
  • loupe : recherche ;
  • point d’interrogation : section « aide » ou FAQ ;
  • enveloppe ou @ : page « contact » ou envoi direct d’un e-mail ;
  • chariot : panier d’achat sur un site de e-commerce ;
  • drapeaux : changement de langue.

affordance-for-icons

Les champs de formulaires : L’affordance de ce type d’élément doit permettre à l’utilisateur d’immédiatement comprendre qu’il peut ou doit entrer du texte dans les champs en question. Vous pouvez même l’y aider en créant des formulaires dont les champs sont configurés pour le type de données qu’ils doivent contenir – ex :

affordance input fields

En conclusion, la « signalisation » visuelle d’un site est importante pour créer une expérience utilisateur de qualité – elle sert en effet de repère à nos parcours virtuels sur les pages d’un site. Inutile pour autant de réinventer la roue, mieux vaut prendre en compte les standards existants déjà largement répandus! Et même si vous n’êtes pas un grand fan de design, gardez en tête que ce travail d’affordance contribuera sans aucun doute à la qualité générale de votre site.