L’affordance
L’affordance est quand un objet ou un système montrent à l’utilisateur les actions qu’il peut effectuer. Les utilisateurs devront connaître les options proposées par le système sans réfléchir et sans recourir à un mode d’emploi.
C'est quoi ?
L’affordance est la caractéristique des objets et des systèmes qui présentent ce qu’ils peuvent offrir à un utilisateur. Cette terminologie vient de l’anglais « to afford » qui veut dire offrir. L’affordance offre des indications sur la façon dont les internautes peuvent utiliser une application ou un site web.
Comment ca marche ?
Les affordances sont utilisées dans la conception UX. Par exemple dans :
- Les boutons : la forme, la couleur, le contraste sont les clefs de la conception d’un bouton efficace. L’utilisateur doit comprendre que les boutons d’une page web sont cliquables.
- Les animations : Les affordances animées sont une imitation des mouvements réels. Elles vous aident à effectuer le mouvement adéquat, par exemple : glisser, pousser, tirer etc.
- Les notifications : elles attirent l’attention de l’utilisateurs pour indiquer les changements.
- Les champs de saisie : ils doivent être clairs pour que l’utilisateur puisse saisir les données facilement. Il est possible de les mettre en évidence en créant un contraste entre le champ et l’arrière-plan. D’ailleurs, il est recommandé d’ajouter un texte en italique, dans ces champs de saisie, afin de préciser les informations que l’utilisateur doit saisir.
- Les icônes : les icônes sont des formes métaphoriques facilitant la navigation des utilisateurs. C’est le cas des icônes sous forme d’étoile souvent utilisées pour ajouter des pages aux favoris.
- Les photos : les photos sont des repères visuels.
La phase de découverte
Il existe plusieurs types d’affordances :
Les affordances explicites
L’utilisateur est informé explicitement de la manière dont un objet doit être utilisé. Un bouton accompagné du terme « connexion » est un exemple d’affordance explicite puisque le texte explicite clairement la fonction du bouton.
Les affordances implicites
Leurs indices sont cachés. Parfois un menu n’apparaît pas, il faut cliquer pour voir ses options. C’est un exemple courant d’affordance implicite.
Les affordances Pattern
Les modèles sont un excellent moyen pour suggérer des raccourcis mentaux.
Les affordances métaphoriques
Il s’agit de l’inspiration des éléments réels afin de transmettre un message. L’utilisation d’une icône de panier pour suggérer l’idée des achats en ligne et l’emploi des icônes des enveloppes pour aider l’utilisateur à envoyer son mail sont deux exemples d’affordances métaphoriques.
Les affordances négatives
Parfois, les utilisateurs se trouvent face à des boutons inactifs, par exemple ils ne peuvent pas cliquer sur le bouton gris parce qu’il faut remplir le formulaire. C’est un exemple d’affordance négative.
Les fausses affordances
Ces affordances proposent des fausses actions ou bien ne permettent pas à l’utilisateur d’effectuer aucune action. Généralement, il s’agit d’un accident.
Conclusion
Les affordances facilitent la navigation des internautes sur les sites web. L’utilisateur peut trouver facilement les options proposées par un site. C’est un excellent outil pour garantir une interface utilisateur (UI) efficace et facile à utiliser.
by 
