Leçon 1 / 5 · Design d'interaction

Affordance : quand la forme dit quoi faire

Le concept

L'affordance est la propriété d'un objet qui suggère son usage sans instruction. Un bouton invite à appuyer, une poignée à tirer. En design d'interaction numérique, l'affordance visuelle (ombre, volume, animation d'invitation) guide l'utilisateur sans texte. En installation physique, l'affordance spatiale (un objet à hauteur de main, un cercle lumineux au sol) invite le corps.

Exemple de code (p5.js)

// Affordance : cercle qui pulse = invitation à cliquer
let scale_val = 1;
function setup() { createCanvas(400, 300); }
function draw() {
  background(11, 15, 20);
  scale_val = 1 + sin(frameCount * 0.05) * 0.05;
  push();
  translate(width/2, height/2);
  scale(scale_val);
  noStroke(); fill(55, 227, 195);
  ellipse(0, 0, 80, 80);
  pop();
  // Texte discret
  fill(255, 255, 255, 80); textAlign(CENTER);
  textSize(12); text('cliquez', width/2, height/2 + 60);
}
function mousePressed() {
  if (dist(mouseX, mouseY, width/2, height/2) < 50) {
    fill(255, 200, 0); ellipse(width/2, height/2, 120, 120);
  }
}
Exercice

Créez un sketch p5.js où un cercle pulse doucement (scale oscillant entre 0.95 et 1.05). Observez : l'oscillation crée l'impression que l'objet « respire » et invite au clic. Testez avec et sans le pulse — la différence de taux de clic est l'affordance en action.

Ce qu'il faut retenir

L'affordance n'est pas un ornement — c'est une communication sans mots. Chaque élément interactif doit signaler visuellement qu'il attend une action.

Recevez les 5 leçons par email — une tous les 3 jours. Gratuit, sans compte.

Double opt-in · désinscription en 1 clic · zéro spam.

← Le coursLeçon 2 →