Glossaire du design web : Qu'est-ce que « l'affordance » ?

Le terme « affordance » est celui que vous entendrez très souvent dans le monde du web design. Il apparaît régulièrement dans les tutoriels sur Tuts+ aussi, alors cet article servira une définition simplement pour dissiper tous les doutes.

Définitions générales

Il y a parfois un peu de confusion qui entoure l'affordance, nous allons donc regarder trois termes connexes importants :

Affordance

Définies à l'origine par James J. Gibson dans les années 1970, les affordances sont les actions possibles entre un objet et un individu. Un bouton de porte est l'un des exemples classiquement utilisés ; il permet un mouvement de torsion. Que l'individu reconnaisse ou non la possibilité de cette action est non pertinent – l'affordance est toujours présente.

Affordance perçue

Le terme que nous utilisons souvent de nos jours a été popularisé auprès du grand public par Donald Norman dans son livre The Design of Everyday Things (originellement publié comme « The Psychology of Everyday Things ») et est un peu conflictuel avec Gibson. Norman a pris l'idée conceptuelle de l'affordance et ajouté à cela « interprétation humaine », ce qui nous donne ce qu'il appelle « affordance perçue ».

Pour en revenir à notre bouton de porte, c'est un objet dont la forme communique comment l'utilisateur devrait s'engager avec lui. Si conçu de manière efficace, l'utilisateur saura instinctivement s'il faut pousser, tirer, tordre et ainsi de suite.

Norman se réjouit de l'idée que l'affordance doit être une combinaison d'actions qui sont réellement possibles et de celles qui sont simplement perçues comme étant possibles.

L'affordance perçue est particulièrement pertinente dans le design d'interface, que nous allons étudier dans un instant.

Signifiants

Les signifiants jouent un rôle dans la définition de Norman. De diverses manières, les caractéristiques d'un objet suggèrent à l'individu quelles actions sont possibles. Les signifiants sont des « pièces perceptibles d'une affordance ». Encore une fois à l'aide de l'exemple de bouton de porte, sa rondeur signifie qu'il permet des torsions.

Design d'interaction

En tant que designers web nous façonnons la manière dont les interfaces apparaissent et se comportent, influençant la manière dont les utilisateurs interagissent avec elles, souvent par le biais d'éléments d'interface utilisateur communs tels que des boutons, des contrôles de saisie, des composants de navigation et ainsi de suite.

Nous utilisons des détails visuels comme signifiants qui aident les utilisateurs à percevoir comment ils devraient interagir avec les éléments d'interface utilisateur.

Tout ce « Flat »

Ce qu'affiche l'écran d'ordinateur est plat ; une collection de pixels, rien de plus. Mais en suggérant graphiquement de la profondeur et de la dimension, nous pouvons apporter des affordances perçues dans le mélange pour aider les utilisateurs. Prenez les boutons, par exemple. Lequel de ces deux percevez-vous comme « proposant » une action de pressage de manière plus efficace ?

C'est peut-être le plus grand argument contre le mouvement de flat design ; la suppression des détails dans une volonté d'être épuré peut parfois gêner les affordances perçues. Par exemple, avez-vous jamais rencontré un formulaire comme ceci ?

En allant dans le sens du super-minimalisme, toutes différences entre le bouton envoyer et les entrées ont été dépouillées. Les signifiants (tels que les ombres internes sur les entrées et des coins arrondis sur le bouton) auraient aidé à communiquer visuellement que les entrées sont des conteneurs et que le bouton est destiné à la « pression ».

« Un bon designer s'assure que les actions appropriées sont perceptibles et que celles inappropriées sont invisibles. » – Donald Norman

Gardez à l'esprit

• Tous les utilisateurs ne sont pas égaux ! Les affordances ne peuvent pas être perçues et interprétées de la même manière par tout le monde.
• Étiquettes et instructions sont utiles dans le design d'interface, mais il faut les confirmer avec d'autres aides visuelles.
• Quand les interfaces graphiques sont impliquées nous faisons référence à « affordance perçue » ; elles n'ont aucune propriété physique contrairement au design produit.
• Le flat design peut également communiquer des affordances tout aussi efficacement que le skeuomorphisme – il faut juste s'assurer que les actions sont perceptibles lors de la conception.

Lectures supplémentaires

• Affordances: The Designer's Secret Weapon sur Inside Envato
• The Design of Everyday Things par Don Norman
  
• User Interface Design Basics sur usability.gov
  
• Affordances and Design par Don Norman