FRENAR
N°11 · CSS/JS · Charge cognitive

Divulgation progressive

Montrer uniquement ce qui est nécessaire à l'étape en cours. La complexité existe — elle est simplement révélée au bon moment, pas cachée. Interaction par couches successives.

Créer un projet

/* Progressive disclosure — animation height + opacity */
.advanced-panel {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height .4s ease, opacity .3s;
}
.advanced-panel.open {
  max-height: 400px;
  opacity: 1;
}

// Toggle handler
toggle.addEventListener('click', () => {
  panel.classList.toggle('open');
  toggle.classList.toggle('open');
  // Update layer indicator
  updateLayers();
});
À toi de jouer

Ouvrez les deux niveaux de profondeur. Comptez les champs visibles à chaque couche : 2 → 4 → 7. La règle Miller (7±2) est-elle respectée à chaque étape ? Concevez un formulaire à 15 champs en 3 couches progressives.

Simplifiez sans sacrifier — formez-vous au design d'interaction

Réserver un créneau