Glossaire Web Design Qu'est-ce que c'est «Affordance»?

Le terme «pouvoir» est un terme que vous entendrez souvent dans le monde de la conception Web. Il apparaît régulièrement dans les tutoriels sur Tuts + également, alors cet article servira de définition pour éclaircir les doutes..

Définitions générales

Il y a parfois un peu de confusion autour de la dépendance, examinons donc trois termes relatifs importants:

Affordance

Définies à l'origine par James J. Gibson dans les années 1970, les abordages sont les actions possibles entre un objet et un individu. Un bouton de porte est l’un des exemples classiques; il offre un mouvement de torsion. Que ce soit ou non l'individu reconnaît la possibilité de cette action est hors de propos - la balance est toujours présente.

Affordance perçue

Le terme, tel que nous l’utilisons souvent de nos jours, a été introduit par Donald Norman dans son livre Le design des choses de tous les jours (publié à l’origine sous le titre «La psychologie des objets du quotidien») et est en conflit avec celui de Gibson. Norman a repris l'idée conceptuelle de «pouvoir» et y a ajouté «l'interprétation humaine», nous donnant ce qu'il appelle «une aide perçue».. 

Pour revenir à notre bouton de porte, c'est un objet dont la forme communique Comment l'utilisateur doit s'engager avec elle. S'il est conçu efficacement, l'utilisateur saura instinctivement s'il faut pousser, tirer, tordre, etc..

Norman apprécie l’idée que l’offre financière devrait être une combinaison d’actions qui réellement possible et ceux qui sont simplement perçu comme étant possible.

L'abordabilité perçue est particulièrement pertinente dans la conception d'interface, que nous examinerons 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 les «parties perceptibles d'une balance». En utilisant à nouveau l’exemple de la poignée de porte, sa rondeur signifie qu’elle permet la torsion.. 

Design d'interaction

En tant que concepteurs Web, nous modifions la manière dont les interfaces apparaissent et se comportent, en influençant la manière dont les utilisateurs interagissent avec elles, souvent au moyen d'éléments d'interface utilisateur courants tels que des boutons, des contrôles de saisie, des composants de navigation, etc..

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

Cette chose "plate"

Ce que les écrans d'ordinateur affiche est plat; une collection de pixels, rien de plus. Mais en suggérant graphiquement la profondeur et la dimension, nous pouvons intégrer les avantages perçus dans le mix pour aider les utilisateurs. Prenez des boutons, par exemple. Selon vous, lequel de ces moyens «permet-il» plus efficacement une action urgente??

La profondeur sur le bouton inférieur "signifie" qu'il peut être actionné

C’est peut-être le principal argument contre le mouvement du design plat; suppression des détails dans un effort pour être minimale peut parfois entraver les perceptions de pouvoir. Par exemple, avez-vous déjà rencontré un formulaire comme celui-ci?

Lequel est le bouton?

En super-minimal, toutes les différences entre le bouton de soumission et les entrées ont été supprimées. Des signifiants (tels que des ombres intérieures 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 sert à «appuyer»..

«Un bon concepteur veille à ce que les actions appropriées soient perceptibles et celles invisibles.» - Donald Norman

Garder à l'esprit

  • Tous les utilisateurs ne sont pas égaux! Les affordances peuvent ne pas être perçues et interprétées de la même manière par tout le monde.
  • Les étiquettes et les instructions sont utiles pour la conception d'interface, mais sauvegardez-les avec d'autres indices visuels.
  • En ce qui concerne les interfaces graphiques, nous parlons de «perception financière»; ils n'ont pas de propriétés physiques réelles contrairement à la conception du produit.
  • Une conception «plate» peut communiquer les prix aussi efficacement que le skeuomorphism - assurez-vous simplement que les actions sont perceptibles lors de la conception.

Lectures complémentaires

  • Affordances: l'arme secrète du designer à l'intérieur d'Envato
  • La conception des choses de tous les jours par Don Norman
  • Principes de base de la conception d'interface utilisateur sur usability.gov
  • Affordances et Design par Don Norman