Should it be?

Expansion inline

Du contenu ou des contrôles révélés là où ils appartiennent, sans ajouter de nouvelle couche.

AucuneSimple

Définition

Définition

L’expansion inline révèle du contenu exactement là où il se trouve sur la page, sans ouvrir de nouvelle couche ni déplacer l’utilisateur.

Problème résolu

Problème résolu

Elle permet d’aller plus loin dans une partie de la page sans la quitter. Aucune interruption, aucun changement de contexte — juste un peu plus de la même page, rendue visible à la demande.

Quand l’utiliser

Quand l’utiliser

  • Divulgation progressive
  • Édition directe d’un champ
  • Options avancées et détails contextuels

Quand ne pas l’utiliser

Quand ne pas l’utiliser

  • Le contenu révélé désorganise toute la page
  • La tâche nécessite de l’isolation ou plusieurs étapes

Exemple

Exemple

  • Afficher plus de détails
  • Modifier un nom sur place
  • Révéler les options avancées
Voir l’exemple technique
<button aria-expanded={open} aria-controls="advanced">
  Advanced options
</button>
<section id="advanced" hidden={!open}>
  {/* related controls */}
</section>

Contre-exemple

Contre-exemple

Déplier tout un parcours d’onboarding multi-étapes en inline dans une ligne de paramètres est une erreur fréquente. Une page dédiée convient mieux ici : elle peut structurer les étapes, garder la progression visible et permettre d’y revenir plus tard — ce qu’un bloc inline ne peut pas offrir.

Questions à se poser

Questions à se poser

  1. Le contenu révélé reste-t-il proche de ce qui l’a déclenché ?
  2. Peut-il rester ouvert sans perturber le reste de la page ?
  3. Est-il assez court pour ne pas avoir besoin de sa propre navigation ?
  4. L’isoler dans un drawer ou une page aiderait-il vraiment l’utilisateur ?

Patterns liés