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.
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.
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.
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
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 : 

  1. On comprends ce qu’on peut faire
  2. 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.

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.
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.

Léonard Greneau

UI Designer et DA Junior