L'affordance, c'est la promesse visuelle d'une action possible. À gauche : des éléments « plats » sans signal. À droite : les mêmes enrichis d'indices — ombre, couleur, forme, mouvement. Ressentez la différence.
/* Affordance = indices visuels d'interactivité */ /* SANS : texte nu, pas de signal */ .flat-link { color: inherit; text-decoration: none; } /* AVEC : couleur, underline, flèche, transition */ .rich-link { color: var(--accent); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; transition: color .2s; } .rich-link:hover { color: #fff; } /* Bouton : ombre = profondeur = « pressable » */ .rich-btn { box-shadow: 0 2px 8px rgba(200,241,53,.2); transition: transform .15s; } .rich-btn:active { transform: translateY(1px); } /* Slider : poignée visible + glow + cursor:grab */ .rich-slider { cursor: grab; } .rich-slider::after { box-shadow: 0 0 8px rgba(200,241,53,.4); }
Identifiez 3 indices d'affordance sur le bouton « riche » (couleur, ombre, micro-mouvement au hover/active). Sur votre prochain projet, appliquez la règle : si un élément est interactif, au moins 2 canaux d'affordance doivent le signaler simultanément.
Rendez vos interfaces évidentes, pas devinables
Réserver un créneau