Modale — Should It Be a Modal ?

Définition

Une modale est une boîte de dialogue qui suspend temporairement l’interaction avec le reste de l’interface, jusqu’à sa fermeture ou à une décision.

Problème résolu

Une modale interrompt l’utilisateur volontairement. Elle bloque la page jusqu’à ce qu’une décision courte soit prise, mais garde l’utilisateur dans le même contexte — pas de nouvelle page, pas de repère perdu. Cette interruption se justifie quand ignorer la décision causerait un vrai dommage : perte de données, action irréversible, état cassé.

Quand l’utiliser

Confirmations destructives
Formulaires courts et autonomes
Choix requis avant de continuer

Quand ne pas l’utiliser

La tâche comporte plusieurs étapes ou beaucoup de contenu
L’utilisateur doit comparer avec toute la page

Exemple

Confirmation de suppression
Choix de formule obligatoire
É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>

Contre-exemple

Une page de paramètres ouverte dans une modale à six onglets avec un bouton d’enregistrement en bas est une erreur fréquente. La tâche n’est pas une décision courte : c’est un parcours entier compressé dans une boîte trop petite, sans URL pour y revenir ni place pour comparer les options.

Questions à se poser

Ignorer cette décision causerait-il un vrai dommage — perte de données, action irréversible, état cassé ?
L’utilisateur voit-il encore assez de la page pour comprendre ce qui se passe ?
La tâche peut-elle être terminée en une seule étape focalisée ?
A-t-il besoin de la comparer avec un contenu situé hors de la boîte ?

Patterns liés