Qu’est ce que l’affordance ?

L’affordance est un terme que nos clients connaissent rarement et qui pourtant est une cause d’un nombre assez importants de problèmes d’expérience sur leur produit. On définit l’affordance comme étant la capacité d’un objet à suggérer sa propre utilisation. Il est intéressant de souligner que l’affordance dépend non seulement des attributs «physiques» de l’objet mais aussi du contexte, des buts, des expériences passées, de nombreux aspects cognitifs de l’utilisateur.

J’aime prendre l’exemple de la poignée de porte qui définit par sa forme la manière dont nous allons pouvoir ouvrir la porte.

Un exemple de l'affordance, la forme de la poigné de porte permet à l'utilisateur de savoir comment il doit s'en servir (pousser ou bien tirer)

Prenons les portes Ikea sans poignées. Il faut pousser pour les ouvrir ou les fermer, mais cela nécessite d’avoir vu au moins une première fois quelqu’un le faire ou de chercher par nous même comment cela fonctionne car l’affordance de l’objet est faible ou absent.

Un exemple de mauvaise affordance, les portes IKEA sans poignées

L’affordance sur le web

Dans le digital, sur une application web ou mobile, le principe est le même. Vos utilisateurs veulent soit accéder à un endroit précis de votre site (par exemple demander un devis), ou découvrir le site par eux-même en le parcourant. Ils ne doivent pas être bloqués dans leur parcours. L’affordance peut être responsable de non visite sur certaines pages car non vue par l’utilisateur.

3 bouton call to action, selon leurs forme l'affordance est plus ou moins forte

Tout design bien pensé et tourné vers les utilisateurs doit aider l’utilisateur dans son parcours. Pour autant, le rôle du designer est aussi d’accorder plus ou moins d’affordance selon ce que l’on souhaite faire faire à un utilisateur. Par exemple, un bouton « acheter » aura une meilleure affordance qu’un bouton « voir les caractéristiques ». On parle alors de mettre en relief l’affordance en disposant sur plusieurs plans les objets. Par exemple : regardez le screenshot ci-dessous

Une page avec plusieurs boutons plus ou moins affordants

Dans l’ordre de lecture, le bouton jaune est le « Call to Action » principal. En deuxième on retrouve le même bouton dans le header en filaire blanc, puis « free version » et enfin le menu. Grâce à l’affordance :

On comprends ce qu’on peut faire
On donne une importance plus ou moins forte aux objets.

L’affordance peut aussi être dynamique et évoluer selon l’utilisation du produit. Par exemple, sur la complétion d’un formulaire, on peut envisager de baisser l’affordance tant que l’ensemble du formulaire n’est pas rempli. Le bouton se dévoile par la suite et l’évidence de cliquer sur « Save Changes » évite tout doute chez l’utilisateur sur ce qu’il doit faire.

Un formulaire ou selon l'état de complétion, le bouton de validation est plus ou moins affordant.

Le mobile

En design mobile, l’affordance est encore plus forte, certaines animations ne peuvent se deviner toutes seules et on ne peut comprendre comment l’objet se comporte sans onboarding. C’est le cas par exemple du swipe, qui peut s’activer plus ou moins au bord d’un écran. Parfois, selon d’où démarre le swipe, le contenu affiché diffère. Par conséquent, un bon moyen d’accompagner l’utilisateur quand l’affordance ne peut être améliorée est de passer par la case onboarding.

Flowchart d'un Onboarding, l'utilisateur est guidé à travers des flèches pour savoir comment swiper

Avec la quantité d’applications présentes sur le marché, les utilisateurs s’éduquent de plus en plus à se servir des applications, simplement car les app se ressemblent de plus en plus. Mais attention néanmoins à toujours faciliter au maximum la vie des utilisateurs en prenant dès le début du processus de design l’affordance comme sujet sérieux car il pourrait véritablement dégrader l’expérience utilisateur.

Geoffrey Bouquet

CEO et Co-fondateur de Design is Vital

NOUS CONTACTER