Cohérence : les mêmes gestes, les mêmes effets

Le concept

La cohérence est le principe selon lequel les mêmes interactions produisent toujours les mêmes résultats dans tout le système. Si « glisser vers le bas » défile le contenu à un endroit, il doit le faire partout. Si un cercle vert signifie « actif » dans une vue, il doit signifier « actif » dans toutes les vues. La rupture de cohérence crée de la confusion, même inconsciente — l'utilisateur doit réapprendre à chaque écran.

Exemple de code (p5.js)

// Cohérence : 4 boutons, même feedback
let buttons = [];
function setup() {
  createCanvas(400, 300);
  for (let i = 0; i < 4; i++) {
    buttons.push({x: 60 + i * 85, y: 130, w: 70, h: 40, flash: 0});
  }
}
function draw() {
  background(11, 15, 20);
  for (let b of buttons) {
    let hover = mouseX > b.x && mouseX < b.x+b.w && mouseY > b.y && mouseY < b.y+b.h;
    let c = hover ? [55, 227, 195] : [40, 60, 70];
    // Feedback cohérent : même animation de flash pour tous
    if (b.flash > 0) { c = [255, 255, 255]; b.flash--; }
    noStroke(); fill(c[0], c[1], c[2]);
    rect(b.x, b.y, b.w, b.h, 6);
  }
  fill(200); textAlign(CENTER); textSize(11);
  text('Cliquez sur les boutons — même feedback partout', width/2, height - 30);
}
function mousePressed() {
  for (let b of buttons) {
    if (mouseX > b.x && mouseX < b.x+b.w && mouseY > b.y && mouseY < b.y+b.h) {
      b.flash = 8; // même feedback pour tous
    }
  }
}

Ce qu'il faut retenir