L’affordance en ergonomie web : Une base de l’UX expliquée

Lorsque l’on travaille dans des domaines où l’expérience utilisateur est importante, on se retrouve rapidement confronté à la notion d’affordance. Cela peut être dans le design au sens large mais également dans des applications plus précises telles que le game design pour les jeux vidéo ou le web design pour la conception de site web. C’est ce dernier de cas de figure qui va nous intéresser dans cet article.

Définition de l’affordance au sens général

Plus qu’une définition étymologique stricte, nous allons opter pour une définition accessible et imagée de l’affordance. Cette notion désigne la capacité d’un objet à suggérer sa propre utilisation. Si cela peut vous paraître surprenant, on retrouve pourtant cette caractéristique dans de nombreux éléments de notre quotidien.

L’affordance réussie : Dès que vous voyez une poignée de porte, vous savez immédiatement comment interagir avec cette dernière. Il en va de même pour un interrupteur de lumière, un bouton on-off, une molette pour régler le son… L’objet est désigné de manière à ce que l’on comprenne comment l’utiliser à sa simple vue. Ce sont d’excellents exemples d’affordance réussie.

Les échecs d’affordance : Les voyants sur un tableau de bord d’une voiture sont censés indiquer simplement à quoi correspond la lumière allumée. Or, qui ne s’est jamais demandé à quoi ce nouveau voyant correspondait ? Il en va de même pour un emballage qu’on ne sait pas comment ouvrir.

La contre affordance, ou l’affordance trompeuse : Plus rare et extrêmement dommageable, il s’agit d’un objet qui suggère une utilisation différente de la réalité. Cela peut être involontaire mais également être un souhait. Un bouchon de sécurité par exemple.

L’affordance dans l’ergonomie web au service de l’UX

Dans le cas de l’ergonomie web, il n’est bien sûr pas question d’interrupteur pour allumer la lumière ou de poignée pour ouvrir une porte. Pour autant, énormément d’interactions sont en permanence proposées à l’internaute et toutes ne peuvent pas bénéficier d’une explication textuelle. C’est là qu’entre en jeu l’affordance.

L’affordance pour éviter les biais

Un problème majeur en matière d’ergonomie web et plus globalement d’UX est le fait que beaucoup de personnes se basent sur leur propre expérience digitale pour concevoir des interfaces. Il est difficile de prendre en compte les différents niveaux de maturité web des utilisateurs et surtout d’anticiper le fait que certains réflexes que vous avez ne sont pas acquis par tous.

L’affordance va permettre de concevoir des éléments suggérant leur utilisation et étant donc compréhensibles par tous, même par ceux ne disposant pas des codes habituellement répandus.

Je ne vais par exemple pas forcément deviner que vos éléments de réassurance sont cliquables mais s’ils opèrent un léger zoom/dezoom lorsque ma souris va passer dessus je vais comprendre qu’une interaction est possible, même si je n’ai pas l’habitude de voir des bandeaux de réassurance cliquables.

Sur la capture ci-dessus, a priori rien ne vous indique que ces produits sont cliquables. Pour autant, le site de la Fnac est très compréhensible par l’internaute à l’utilisation. En effet, une fois sur le site, vous pouvez passer la souris dessus et une petite animation de zoom vous fait comprendre la possibilité d’interagir. C’est simple et efficace.

L’affordance remplace mille explications

Il est impossible de donner un guide d’utilisation de votre site web à tous les utilisateurs. Personne ne prendrait la peine de le lire. L’affordance intervient alors pour que l’internaute puisse comprendre de lui même les possibilités qui lui sont offertes.

Ci-dessous un exemple du site du géant Boulanger.com sur mobile. Côté produit, on retrouve un réfrigérateur et à côté une montre de sport. Pour faire comprendre à l’internaute qu’un défilement horizontal est possible, deux choses sont mises en place. 

La première consiste à faire dépasser le second produit sur le côté droit pour inciter à balayer l’écran et prendre connaissance de cet élément. Le second se matérialise dans les deux petites barres juste au-dessus des produits faisant comprendre que le bleu foncé est affiché et qu’il faut encore une fois balayer pour afficher le bleu clair sur la droite.

Guider vos utilisateurs avec une bonne UX

Rendre une navigation plus claire, des interactions plus instinctives et des appels à l’action plus tentants, voilà les objectifs d’une bonne affordance. Cette dernière doit intervenir dès la conception du design de votre site pour que chaque élément soit pensé suivant cette logique tournée vers l’utilisateur. Cela rendre à la fois votre site plus agréable, contribuant ainsi à la récurrence de l’utilisation de votre site et à la création d’une bonne image, mais également plus efficace commercialement !