Should it be?

Modale

Elle met l’interface en pause pour une décision courte que l’utilisateur vient de déclencher.

ÉlevéeSimple

Ce que fait une modale

Une modale est une boîte de dialogue qui met le reste de l’interface en pause jusqu’à ce que l’utilisateur la ferme ou décide.

Le vrai job

Mettre la page en pause pour une seule décision courte

Une modale coupe le flux volontairement. Elle fige la page juste le temps d’une décision courte, puis remet l’utilisateur dans le même contexte. Cette interruption se justifie quand l’alternative, c’est un vrai dommage : perte de travail, action irréversible, état cassé.

Le bon contexte

Quand la modale tient encore ses promesses

  • Confirmations destructives
  • Formulaires courts avec une fin claire
  • Choix obligatoire avant de pouvoir continuer

Mauvais plan

Quand ça commence à ressembler à une mini-page

  • La tâche a plusieurs étapes ou trop de contenu
  • L’utilisateur a besoin de la page entière pour comparer ou comprendre

Dans la vraie vie

À quoi ressemble une bonne modale

  • Supprimer un projet
  • Choisir une formule obligatoire
  • Confirmer une étape courte de consentement
Voir l’exemple technique
<dialog aria-labelledby="confirm-title">
  <h2 id="confirm-title">Delete project?</h2>
  <p>This action cannot be undone.</p>
  <form method="dialog">
    <button value="cancel">Cancel</button>
    <button value="confirm">Delete project</button>
  </form>
</dialog>

Le piège classique

Un parcours de réglages n’est pas une modale

Une page de réglages coincée dans une modale avec six onglets et un bouton d’enregistrement en bas, c’est le classique. Ce n’est plus une décision courte. C’est un vrai parcours enfermé dans une boîte trop petite, sans URL pour y revenir ni place pour comparer les options.

Avant de choisir

Les questions qui évitent le mauvais réflexe

  1. Si on saute cette décision, est-ce qu’on crée un vrai dommage : perte de travail, action irréversible, état cassé ?
  2. L’utilisateur peut-il encore comprendre la situation avec seulement une partie de la page visible ?
  3. Est-ce que ça tient en une seule étape focalisée ?
  4. Doit-il comparer avec un contenu situé hors de la boîte ?

Tu hésites avec…