James Gibson à introduit le concept d’affordance en 1977 dans le champ de la psychologie écologique. Il désignait par ce terme les possibilités d’action qu’un objet offre à un organisme, indépendamment de la perception de celui-ci. Un escalier offre l’affordance de grimper, qu’on le sache ou non. Don Norman à repris ce concept en 1988 dans « The Design of Everyday Things » et l’a adapté au design en y ajoutant la dimension perceptive.
Cette distinction entre l’affordance de Gibson et celle de Norman est centrale en design d’interface. Ignorer la différence conduit à concevoir des éléments qui semblent interactifs sans l’être, ou des éléments interactifs que personne n’utilise parce qu’ils ne signalent pas leur fonction.
Les trois types d’affordance selon Norman
L’affordance réelle désigne ce qu’un objet peut réellement faire. Un bouton HTML peut être cliqué. Une image peut être zoomée. Un texte peut être sélectionné. Ces capacités existent indépendamment de ce que l’interface communique à l’utilisateur.
L’affordance perçue désigne ce que l’utilisateur pense pouvoir faire avec un élément. C’est la projection mentale, fondée sur les indices visuels et l’expérience passée. Une surface légèrement saillante avec une ombre portée signale « je suis un bouton, appuie sur moi ». Cette convention est héritée du monde physique.
L’affordance signifiée (ou signifiant) est la notion que Norman à ajoutée dans la révision de 2013 de son livre. Elle désigne les indices explicites que le designer ajoute pour communiquer la fonction d’un élément : le curseur qui change de forme, le mot « cliquez ici », la bordure soulignée d’un lien. Ces signifiants compensent l’absence ou l’ambiguïté des affordances perçues.
« Ce qui importe vraiment en design, ce ne sont pas les affordances mais les signifiants. Les affordances définissent ce qui est possible. Les signifiants communiquent où l’action doit avoir lieu. » (Don Norman, 2013)
Skeuomorphisme, flat design et crise de l’affordance
Le skeuomorphisme, dominant dans les interfaces Apple avant iOS 7, reproduisait les textures et volumes du monde physique dans les interfaces numériques. Les boutons avaient des dégradés et des ombres qui imitaient la matière. Les applications avaient des icônes en faux cuir, en faux papier, en faux métal. L’affordance perçue était forte : tout ce qui ressemblait à un objet physique signalait sa fonction par analogie.
L’arrivée du flat design avec iOS 7 en 2013 à créé une rupture nette. Les ombres disparaissent, les gradients s’aplatissent, les textures laissent place aux aplats de couleur. Le problème : les affordances perçues s’évaporent avec elles. Un bouton plat et un texte plat peuvent être visuellement identiques. Comment l’utilisateur sait-il sur quoi cliquer ?
La réponse de l’industrie à été le « flat design 2.0 » ou Material Design de Google : des interfaces épurées mais qui conservent des ombres légères et des élévations subtiles pour signaler les éléments interactifs. L’affordance revient sous une forme moderne, plus discrète mais fonctionnelle.
Les icônes sans libellé posent le même problème. Une icône hamburger (trois traits horizontaux) pour un menu de navigation est aujourd’hui comprise par la plupart des utilisateurs desktop. Sur mobile, elle est devenue universelle. Mais une icône personnalisée sans texte associé force l’utilisateur à tenter sa chance. La règle empirique : si plus de 30 % des utilisateurs ne reconnaissent pas une icône en test, il faut ajouter un libellé.
Le drag and drop invisible : un cas d’école
Le drag and drop est l’une des interactions où l’affordance est le plus souvent défaillante. L’action de glisser-déposer n’a pas de signifiant naturel dans une interface 2D. Rien dans un élément plat ne signale « tu peux me faire glisser ».
Les solutions courantes : une poignée de déplacement (icône à 6 points), un curseur qui change en « grabbing » au survol, un léger déplacement animé qui réagit au hover. Ces signifiants ajoutés compensent l’absence d’affordance perçue naturelle. Sans eux, la fonctionnalité existe mais reste invisible pour la majorité des utilisateurs.
« Une fonctionnalité que personne ne découvre est une fonctionnalité qui n’existe pas. L’affordance est ce qui rend l’interface visible à ceux qui ne lisent pas les tutoriels. »
Les anti-patterns d’affordance : les pièges à éviter
Les affordances trompeuses sont des éléments qui signalent une interactivité qu’ils n’ont pas, ou qui cachent une interactivité réelle derrière une apparence statique. Ces anti-patterns créent de la frustration et dégradent la confiance dans l’interface.
- Texte souligné non cliquable : l’utilisateur s’attend à un lien, clique, rien ne se passe. La déception s’installe.
- Carte visuelle sans zone de clic : une carte produit qui ressemble à un composant cliquable mais ne redirige que sur le titre, pas sur l’image ou le texte de description.
- Bouton désactivé sans explication : un bouton grisé sans tooltip ni message indiquant pourquoi il est inactif et comment l’activer.
- Image qui ressemble à une vidéo : une vignette avec un faux bouton play qui est en réalité une image statique.
- Champ de texte qui ne l’est pas : un élément avec l’apparence d’un input (bordure, fond blanc, cursor text) qui n’est pas interactif.
Synthèse : réelle, perçue, signifiée
| Type | Définition | Exemple interface | Risque si ignoré |
|---|---|---|---|
| Affordance réelle | Ce que l’élément peut faire techniquement | Un champ texte accepte la saisie | Fonctionnalités cachées non utilisées |
| Affordance perçue | Ce que l’utilisateur pense pouvoir faire | Bouton avec ombre = cliquable | Confusion, clics sur des éléments statiques |
| Signifiant | Indice explicite ajouté par le designer | Curseur grab sur un élément draggable | Fonctionnalités invisibles, taux d’usage nul |
L’affordance est un contrat implicite entre le designer et l’utilisateur. Quand ce contrat est respecté, l’interface disparaît au profit de la tâche. Quand il est rompu, l’interface elle-même devient l’obstacle. La maîtrise de ce concept est l’une des compétences qui distinguent un designer junior d’un designer senior : pas les outils, pas le style, mais la capacité à rendre les interfaces transparentes à leurs utilisateurs.
