Un visiteur ouvre une petite fenêtre pour vérifier un détail. Soudain, la page derrière devient inaccessible, le bouton de fermeture est difficile à trouver et le message en cours de rédaction a disparu. L’interruption peut sembler soignée, mais l’expérience s’est fragilisée. Une boîte de dialogue utile doit justifier son interruption, proposer une sortie évidente et prévoir un retour réfléchi au travail déjà commencé.
Demandez-vous d’abord si une fenêtre est nécessaire
Avant de dessiner une superposition, formulez la décision qu’elle aide à prendre. Si la réponse se limite à « lire quelques précisions », essayez de placer ces informations près du choix concerné. Les détails de livraison peuvent accompagner le sélecteur de livraison. Une courte explication peut se déployer sous son intitulé. Ces dispositions permettent de garder ensemble la question et sa réponse sous les yeux.
Une boîte de dialogue mérite d’être envisagée lorsqu’une décision brève et distincte nécessite vraiment de l’attention avant de poursuivre la tâche. Les longues explications, comparaisons et formulaires en plusieurs étapes méritent leur propre page. Lors d’une revue de conception, comparez les deux dispositions avec des contenus de longueur réaliste plutôt qu’un rectangle vide.
Donnez à l’interruption un objectif et une sortie clairs
Choisissez un titre qui nomme la tâche et des boutons qui décrivent le résultat. « Supprimer le message » est plus clair que « Oui » lorsqu’un brouillon risque d’être perdu. Gardez les choix secondaires compréhensibles, plutôt que de rendre l’action privilégiée imposante et toutes les alternatives discrètes. Fermer une invitation doit sembler normal, et non donner l’impression de refuser une négociation.
MDN distingue le mode modal showModal(), qui rend l’arrière-plan inerte, du mode non modal show() ou open. Le modèle modal de WAI maintient le focus à l’intérieur, fait circuler la touche Tab, ferme avec Échap et rend normalement le focus à l’élément déclencheur. Il exige aussi un nom accessible et recommande un bouton de fermeture visible.
Notre guide sur la navigation au clavier et le focus visible donne un contexte plus large pour examiner le parcours autour de cette interruption.
Protégez le travail déjà accompli
Imaginez une demande de projet fictive. Une personne a rédigé un paragraphe, ouvre une note sur la préparation d’un brief, puis revient à son message. Décidez avant la mise en œuvre ce qu’il advient de ce paragraphe lorsque la note se ferme, lorsque le formulaire principal se ferme ou lorsque la personne tente de partir. Ce sont des événements différents qui n’ont pas à effacer les mêmes informations.
Privilégiez la conservation du brouillon pendant l’interaction en cours. Si une sortie doit le supprimer, expliquez cette conséquence et offrez un choix clair. N’affirmez pas « enregistré » si l’enregistrement n’a pas réellement réussi. Lorsque l’envoi échoue, conservez la saisie utile et aidez la personne à reprendre, comme l’explique notre article sur les erreurs de formulaire qui aident à poursuivre.
Examinez le téléphone avec son clavier ouvert
Une maquette centrée sur ordinateur ne répond pas aux questions du mobile. Ouvrez la version la plus longue sur un petit téléphone, activez le dernier champ et affichez le clavier. La personne peut-elle voir ce qu’elle modifie et atteindre l’action suivante sans une recherche fastidieuse par défilement ?
Vérifiez aussi les libellés traduits plus longs et le texte agrandi. Déterminez quelle zone doit défiler et assurez-vous que la page ne saute pas à une position sans rapport après la fermeture. Si une petite fenêtre devient une page étriquée à l’intérieur d’une page, reconsidérez le format au lieu de tout réduire pour le faire tenir.
Testez un parcours entier, même inachevé
Partez du milieu d’une page. Ouvrez la boîte de dialogue, lisez son objectif, saisissez un brouillon réaliste, consultez une note complémentaire et revenez. Quittez ensuite sans envoyer, puis rouvrez-la. Recommencez sur téléphone et au clavier. Demandez à une personne qui ne connaît pas l’interface d’expliquer ce qu’elle attend de chaque sortie avant de la sélectionner.
Consignez les écarts entre cette attente et le résultat. Une boîte de dialogue fiable mérite sa place lorsqu’elle aide à accomplir une petite tâche tout en préservant le parcours plus large.