L’affordance, un concept indispensable pour l’UX Designer en 2021

Le Concept d’Affordance

Selon l’approche écologique de la perception (Gibson, 1979), la simple vue d’un objet nous prépare déjà à l’action offerte par celui-ci. Nous ne percevons pas séparément les propriétés physiques d’un objet et nos propres compétences motrices mais nous percevons directement les opportunités d’action offertes par cet objet en fonction de nos compétences motrices. C’est ce que l’on nomme les affordances.

Pour faire simple, les affordances sont les possibilités d’action suggérées par les caractéristiques d’un objet.

L’application la plus importante de la notion d’affordance sur le web est la différenciation que peut faire l’utilisateur entre un élément cliquable et un élément non-cliquable.

Optimiser l’affordance

« Vous pouvez me cliquer »

Plusieurs dimensions participent à l’affordance générale d’un objet.

Son apparence :

  • Forme
  • Couleur
  • Libellé
  • Localisation dans l’interface
  • Adjonction d’éléments indiquant la présence du lien (comme une puce type flèche)

Et son comportement, comme l’apparition de la main au survol de l’élément.

Affordances erronées

La plus commune de ces erreurs est celle qui consiste à souligner un texte qui n’est pas un lien. Cette mise en valeur est fortement connotée à la « cliquabilité ».

Il faut aussi prendre en compte l’affordance naturelle de certains éléments comme les images.

Accessibilité visuelle et lisibilité

Travailler sur l’accessibilité, c’est assurer un accès facile à quelque chose. L’accessibilité est un terme qui vient initialement du monde du handicap mais qui s’est étendu à de nombreux domaine, dont celui du numérique.

On parlera d’accessibilité en ergonomie ainsi qu’en développement (ex : balise alt)

Cette démarche ergonomique, qui consiste à faciliter la lecture du site par un œil « moyen », relève de l’optimisation graphique.

Les couleurs du fond et des caractères doivent être assez différentes afin de créer un contraste et ainsi une bonne lisibilité.

Il existe des outils en ligne pour vérifier :

Color Contrast Check

Il faut aussi éviter les combinaisons de couleurs qui « vibres » 

Optimiser la lisibilité à l’écran

Afin d’optimiser la lisibilité d’un texte, il faut agir sur ses différentes caractéristiques :

  • La typographie (les sans serif sont plus agréables à la lecture)
  • La taille des polices
  • Leur graisse
  • L’interlignage
  • La casse (les majuscules sont les plus difficiles à lire pour le cerveau que les minuscules)