L'Affordance selon Don Norman
Ce que les Objets Nous Disent Sans un Mot
Sommaire
Pourquoi poussez-vous une porte qu'il faut tirer ?
Vous êtes devant une porte vitrée dans un immeuble de bureaux. Vous poussez. Elle ne bouge pas. Vous tirez. Elle s'ouvre. Ce n'est pas votre faute. C'est un échec de design si fondamental qu'on l'appelle une "Norman Door" -- du nom de Don Norman lui-même. Ce moment de confusion quotidien illustre un concept que 90% des designers utilisent mal : l'affordance. Et cette confusion n'est pas anecdotique. Elle coûte des millions en support utilisateur, en abandons de parcours, et en frustration silencieuse.
Si un utilisateur échoue à utiliser votre interface, ce n'est jamais un problème d'utilisateur. C'est un problème de design. Toujours.
La "Norman Door" : un design qui contredit l'usage
Le probleme
La solution
La plaque plate dit clairement : poussez
Affordance : ce que le mot signifie vraiment
L'affordance est la relation entre les propriétés d'un objet et les capacités de l'agent qui détermine comment l'objet peut être utilisé. Une chaise afforde de s'asseoir -- pas parce qu'elle vous le dit, mais parce que sa surface plate, sa hauteur et sa solidité le permettent physiquement. Une affordance existe indépendamment de la perception de l'utilisateur. Que vous voyiez le bouton ou non, il afforde d'être pressé. C'est là où la confusion commence, et c'est là où Don Norman a apporté une clarification décisive que trop de designers ignorent encore.
L'affordance n'est pas ce qu'un objet suggère visuellement. C'est ce qu'il permet physiquement. La distinction est fondamentale.
Gibson vs Norman : le débat qui a redéfini le design
James J. Gibson a introduit le terme en 1977 dans le cadre de la psychologie écologique. Pour Gibson, les affordances sont des propriétés de l'environnement : elles existent objectivement, indépendamment de l'expérience ou de la culture de l'observateur. Un sol plat afforde la marche, point. Don Norman a repris le concept en 1988 dans "The Design of Everyday Things" mais l'a transformé. Il a introduit la notion d'affordance perçue : ce que l'utilisateur croit pouvoir faire avec un objet. Et c'est cette perception qui gouverne le comportement, pas la réalité physique. Norman a ensuite admis que son usage initial du terme était imprécis, et a introduit le concept de "signifiant" pour corriger cette ambiguïté.
Gibson (1977) : L'affordance est une propriété physique objective de l'environnement.
Norman (1988) : L'affordance perçue -- ce que l'utilisateur croit possible -- est ce qui compte en design.
Norman (2013, révision) : Le signifiant est le vrai outil du designer. L'affordance est la propriété, le signifiant est l'indice qui la communique.
Les couches de l'affordance selon Don Norman
Les signifiants : le vrai outil du designer d'interface
Voici la vérité que je défends : en tant que designer d'interface, vous ne concevez presque jamais des affordances. Vous concevez des signifiants. Un bouton dans une interface n'a pas d'affordance physique -- c'est un rectangle de pixels. Ce qui le rend cliquable dans l'esprit de l'utilisateur, c'est le signifiant : sa couleur, son ombre portée, son label, sa forme convexe qui évoque un objet physique pressable. Le signifiant est le signal perceptible qui indique à l'utilisateur quelles actions sont possibles, où elles sont possibles, et comment les exécuter. Sans signifiant, l'affordance est invisible. Et une affordance invisible est inutile.
Arrêtez de dire "ce bouton a une bonne affordance". Dites "ce bouton a un bon signifiant". La précision du vocabulaire est la précision de la pensée.
Un lien souligné et bleu : signifiant de cliquabilité.
Une poignée striée sur un tiroir : signifiant de préhension.
Un champ de texte avec un placeholder : signifiant de saisie.
Un curseur en forme de main au survol : signifiant d'interactivité.
Affordance vs Signifiant
Affordance
Propriete physique
Signifiant
Signal perceptible
Le mapping : quand la disposition parle d'elle-meme
Le mapping est un concept étroitement lié à l'affordance que Norman considère comme l'un des piliers du bon design. Il désigne la relation spatiale entre une commande et son effet. Un bon mapping est naturel : il exploite des analogies physiques et des patterns culturels pour que l'utilisateur comprenne instantanément quel contrôle agit sur quel élément. Les plaques de cuisson illustrent parfaitement le problème. Quatre brûleurs disposés en carré, mais quatre boutons alignés : quel bouton contrôle quel brûleur ? Ce mauvais mapping force l'utilisateur à lire des étiquettes à chaque utilisation. Un mapping naturel disposerait les boutons dans la même configuration spatiale que les brûleurs.
Si votre interface nécessite des étiquettes pour expliquer quel bouton fait quoi, votre mapping a échoué. Le meilleur design est celui qui n'a pas besoin d'explication.
Bon mapping : un slider horizontal pour un volume, un scroll vertical pour une page verticale.
Mauvais mapping : des boutons + et - pour contrôler un élément que l'on pourrait manipuler directement.
Mapping naturel en interface : les contrôles proches de l'élément qu'ils affectent.
La crise du flat design : quand l'esthétique a tué l'utilisabilité
Je le dis sans détour : le flat design a provoqué une régression massive de l'utilisabilité du web et du mobile. En supprimant les ombres, les dégradés, les bordures et les textures -- tous des signifiants visuels d'interactivité -- les designers ont rendu les interfaces plus "propres" mais objectivement plus difficiles à utiliser. Les études du Nielsen Norman Group en 2015 l'ont démontré : les utilisateurs passent 22% plus de temps à identifier les éléments cliquables dans les interfaces flat. Ce n'est pas un progrès. C'est un recul. L'évolution vers iOS 7 en 2013 est l'exemple canonique. Apple a supprimé le skeuomorphisme au profit d'un design ultra-plat où les boutons n'avaient plus de contour, les liens n'étaient que du texte coloré, et les zones interactives se fondaient dans le contenu statique.
Un design épuré n'est pas un design efficace si l'utilisateur ne sait plus où cliquer. La beauté sans utilisabilité n'est que de la décoration.
L'affordance mobile : le défi du toucher sans retour
Le mobile a fondamentalement changé la nature des signifiants. Sur desktop, le curseur de souris joue un rôle crucial de signifiant : il change de forme au survol d'un élément interactif (flèche vers main, vers curseur de texte). Sur mobile, il n'y a pas de hover state. L'utilisateur n'a aucun moyen de "sonder" l'interface avant d'agir. Il doit deviner où toucher, puis observer le résultat. Cela place une pression énorme sur les signifiants visuels statiques. Chaque élément interactif doit communiquer son rôle sans aucune interaction préalable. Les conventions sont devenues le filet de sécurité : le hamburger menu, le swipe pour supprimer, le pull-to-refresh. Ces patterns ne sont pas des affordances -- ce sont des conventions sociales apprises.
Pas de hover state : l'utilisateur ne peut pas explorer avant d'agir.
Le toucher est imprécis : les zones interactives doivent être généreuses (minimum 44px selon Apple, 48dp selon Material).
Les gestes cachés (swipe, long press, pinch) sont des affordances sans signifiant -- dangereux pour la découverte.
Le retour haptique est le nouveau signifiant : il confirme l'action par le toucher.
L'IA brise les patterns d'affordance traditionnels
Les interfaces IA posent un problème d'affordance inédit dans l'histoire du design. Un champ de prompt comme celui de ChatGPT ressemble à un champ de recherche. Mais ce qu'il afforde est radicalement différent : il accepte des instructions complexes, du code, des demandes créatives, des analyses de documents. Aucun signifiant visuel ne communique cette richesse de possibilités. L'utilisateur projette ses modèles mentaux de la recherche Google sur un outil fondamentalement différent. Résultat : la majorité des utilisateurs n'exploitent qu'une fraction des capacités de l'IA. Le design conversationnel amplifie le problème. Quand l'interface est une page blanche avec un curseur clignotant, où sont les signifiants ? Comment l'utilisateur sait-il ce qu'il peut faire ? C'est le défi d'affordance de notre génération.
L'interface IA la plus répandue au monde -- un champ de texte vide -- est aussi la plus pauvre en signifiants. Nous avons construit des systèmes extraordinaires derrière des portes invisibles.
L'affordance culturelle : ce qui est évident ici est opaque ailleurs
Les signifiants ne sont pas universels. Ils sont profondément ancrés dans la culture, l'âge et l'expérience technologique de l'utilisateur. L'icône de disquette pour "sauvegarder" est un signifiant qui fonctionne par convention pour une génération qui a connu les disquettes, mais qui est arbitraire pour la génération Z. Le hamburger menu (trois lignes horizontales) est devenu un standard, mais des études montrent que les utilisateurs de plus de 55 ans l'identifient beaucoup moins bien que les jeunes utilisateurs. La couleur rouge pour "erreur" ou "danger" n'a pas la même signification dans toutes les cultures -- en Chine, le rouge est associé à la chance et à la prospérité.
Les icônes sans label sont des signifiants faibles : le taux d'erreur augmente de 34% sans texte d'accompagnement (NNG, 2019).
Les patterns d'interaction occidentaux (gauche-à-droite, haut-en-bas) ne fonctionnent pas pour les langues RTL.
L'âge impacte la reconnaissance : les utilisateurs seniors perçoivent mieux les boutons skeuomorphiques que les boutons flat.
Les tests d'utilisabilité inter-culturels ne sont pas un luxe -- ils sont une nécessité pour tout produit à ambition internationale.
L'anti-affordance : concevoir pour empêcher l'action
Un concept rarement enseigné mais essentiel : l'anti-affordance. Il ne s'agit pas seulement de communiquer ce que l'utilisateur peut faire, mais aussi ce qu'il ne peut pas ou ne devrait pas faire. Un bouton grisé (disabled) est un signifiant d'anti-affordance : il communique que l'action existe mais n'est pas disponible actuellement. Les barrières physiques dans l'espace urbain (poteaux anti-voiture, accoudoirs centraux sur les bancs publics) sont des anti-affordances délibérées. En interface, le design défensif utilise l'anti-affordance pour prévenir les erreurs : confirmations avant suppression, délai avant validation irréversible, impossibilité de soumettre un formulaire incomplet.
Le bon design ne se contente pas de faciliter les bonnes actions. Il rend les mauvaises actions difficiles ou impossibles. L'anti-affordance est le bouclier invisible de l'expérience utilisateur.
Tester l'affordance : la méthode du test des 5 secondes
L'affordance perçue ne se mesure pas en réunions d'équipe entre designers. Elle se mesure avec des utilisateurs réels. Le test des 5 secondes est l'outil le plus simple et le plus redoutable : montrez un écran pendant 5 secondes, puis demandez à l'utilisateur "Où cliqueriez-vous pour faire X ?". Si la réponse est systématiquement correcte, vos signifiants fonctionnent. Si plus de 20% des utilisateurs hésitent ou pointent au mauvais endroit, votre design a un problème d'affordance. Au-delà du test des 5 secondes, le suivi oculaire (eye tracking) révèle ce que les utilisateurs voient avant de voir ce qu'ils comprennent. Les heatmaps de clics montrent où les utilisateurs cliquent effectivement, y compris les "faux clics" sur des éléments non interactifs -- signe d'un signifiant mal placé.
Test des 5 secondes : rapide, peu coûteux, révèle les problèmes de signifiants immédiats.
Eye tracking : identifie les zones ignorées et les signifiants qui n'attirent pas l'attention.
Heatmaps de clics : les faux clics sont la preuve directe de signifiants défaillants.
Tests A/B sur les signifiants : comparez un bouton flat vs. un bouton avec ombre pour mesurer l'impact sur le taux de clic.
Au-delà du visuel : affordances sonores, haptiques et spatiales
L'affordance ne se limite pas au canal visuel, et c'est une erreur de penser uniquement en termes de pixels. Le retour haptique de l'iPhone (Taptic Engine) crée des signifiants tactiles : la vibration subtile quand vous activez un toggle communique le changement d'état sans regarder l'écran. Les signifiants sonores sont partout : le "clic" d'une photo prise, le son de l'email envoyé, le bruit de la corbeille qui se vide. En VR et AR, les affordances spatiales deviennent critiques. Un objet 3D dans un casque Meta Quest doit communiquer sa saisissabilité, sa lourdeur apparente, sa fragilité. Les conventions du monde physique deviennent les signifiants du monde virtuel. L'accessibilité exige aussi des signifiants non-visuels : les lecteurs d'écran s'appuient sur les rôles ARIA pour communiquer l'affordance d'un élément interactif à un utilisateur non-voyant.
Haptique : le Taptic Engine d'Apple a créé un nouveau langage de signifiants tactiles que les utilisateurs reconnaissent inconsciemment.
Son : le design sonore est un signifiant sous-exploité -- le son de succès vs. le son d'erreur guide l'utilisateur sans interface visuelle.
Spatial (VR/AR) : les affordances physiques retrouvent leur pertinence en réalité mixte, où les objets virtuels doivent se comporter comme des objets réels.
Accessibilité : les attributs ARIA (role=button, aria-expanded) sont des signifiants programmatiques qui rendent l'affordance perceptible aux technologies d'assistance.
Maîtriser l'affordance, c'est maîtriser la communication silencieuse
L'affordance selon Don Norman n'est pas un concept académique à citer en entretien. C'est une grille de lecture qui devrait gouverner chaque décision de design. Chaque élément de votre interface communique quelque chose -- ou échoue à communiquer. Chaque bouton, chaque icône, chaque zone interactive est un message silencieux que l'utilisateur doit décoder en millisecondes. Votre travail de designer n'est pas de créer de jolies interfaces. C'est de créer des signifiants si clairs que l'utilisateur n'a jamais conscience de les avoir interprétés. Le meilleur design est invisible -- pas parce qu'il est minimaliste, mais parce qu'il est immédiatement compris.
Ne confondez plus jamais affordance et signifiant. Concevez des signifiants. Testez des signifiants. Itérez sur des signifiants. L'affordance est la promesse de l'objet. Le signifiant est votre outil pour la tenir.
Sources & Références
- [1]Norman, D.A. (2013). The Design of Everyday Things: Revised and Expanded Edition. Basic Books.
- [2]Gibson, J.J. (1977). The Theory of Affordances. In R.E. Shaw & J. Bransford (Eds.), Perceiving, Acting, and Knowing.
- [3]Norman, D.A. (2008). Signifiers, Not Affordances. Interactions, 15(6), 18-19. ACM.
- [4]Nielsen Norman Group (2015). Flat UI Elements Attract Less Attention and Cause Uncertainty.
- [5]Nielsen Norman Group (2019). Icon Usability: The Impact of Labels on User Performance.
- [6]McGrenere, J. & Ho, W. (2000). Affordances: Clarifying and Evolving a Concept. Graphics Interface 2000.
- [7]Gaver, W.W. (1991). Technology Affordances. CHI '91: Proceedings of the SIGCHI Conference on Human Factors in Computing Systems.
- [8]Apple Human Interface Guidelines — Materials and Visual Design.