fbpx

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

par Sep 27, 2019Ergonomie0 commentaires

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.

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.

Exemple simple d'affordance l'interrupteur

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.

Produits cliquables affordance

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. 

Affordance mobile exemple

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 !

Envie d'améliorer votre ergonomie web ?

UpByWeb est une agence qui peut vous accompagner dans la conception de site web et d’interfaces pensées pour vos utilisateurs. Intuitifs et efficaces, nos sites sont avant tout pensés pour offrir des résultats. 

0 commentaires

Soumettre un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Nos derniers articles sur l’ergonomie web

Améliorer ses taux de conversion web avec 8 méthodes concrètes

Améliorer ses taux de conversion web avec 8 méthodes concrètes

De nombreuses entreprises souhaitent augmenter les taux de conversion de leur site web. C'est une démarche tout à fait logique, saine et bien plus R.O.Iste qu'une quête de trafic parfois bien vaine de sens. Dans certains cas, le taux de conversion est même un enjeu...

Comment créer une bonne landing page ? Les bonnes pratiques

Comment créer une bonne landing page ? Les bonnes pratiques

La landing page, traduit littéralement par page d’atterrissage, est la page sur laquelle les internautes vont arriver en cliquant sur une de vos publicités ou un de vos appels à l'action. Son but est simple : transformer cette acquisition de trafic en un lead ou une...

D'autres Articles ?

Retrouvez l’ensemble des articles rédigés par nos consultants. Vous trouverez surement les réponses à vos questions

Share This