Expansion inline

Elle révèle plus de contenu directement dans la page, exactement là où l’utilisateur en a besoin.

AucuneSimple

Ce que l’expansion inline révèle sur place

L’expansion inline révèle du contenu en plus exactement là où il appartient, sans ouvrir une autre couche ni envoyer l’utilisateur ailleurs.

Le vrai job

Montrer plus sans quitter la page

Elle permet d’aller un cran plus loin sans quitter la page. Aucune interruption, aucun changement de contexte. Juste un peu plus de la même page, révélé au moment où ça aide vraiment.

Le bon contexte

Quand la page peut accueillir un peu plus de détail

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

Mauvais plan

Quand le détail en plus finit par casser la page

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

Dans la vraie vie

Ce qui reste naturel en inline

  • 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>

Le piège classique

L’onboarding n’est pas une ligne à déplier

Déplier tout un parcours d’onboarding dans une simple ligne de paramètres, c’est l’excès classique. Une page dédiée fait mieux : elle structure les étapes, garde la progression visible et permet d’y revenir plus tard. Un bloc inline ne peut pas faire semblant.

Avant de choisir

Les questions à se poser avant d’en révéler plus

  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 ?

Tu hésites avec…