Fermeture des boîtes de dialogue modales
Je rencontre des dialogues modaux tous les jours et je vois tout le temps différentes implémentations.
La plupart des boîtes de dialogue modales ont un [X] dans le coin supérieur droit de la boîte de dialogue avec un bouton Annuler/Fermer.
Il y a tellement d'options, quelle est la meilleure pratique pour fermer les boîtes de dialogue modales? De plus, y a-t-il des études de référence montrant ce qui est préféré?
Implémentations que j'ai vues:
Bouton Annuler/Fermer avec [X] dans le coin (en haut à droite/à gauche, en bas à droite/à gauche?)
Cliquez n'importe où sur le modal pour fermer
Juste un [X] dans le coin (en haut à droite/à gauche, en bas à droite/à gauche?)
Juste un bouton Annuler/Fermer
Cliquez n'importe où en dehors du modal
Touche Échap avec ou sans [X]/Annuler/Fermer
Je pense que la meilleure implémentation dépend du type de dialogue et du mode d'interaction souhaité.
Les boîtes de dialogue qui nécessitent une action ne devraient pas avoir de [X] pour les fermer, à mon avis (ni être fermées en cliquant ailleurs que sur les boutons d'action .
La plupart de ceux-ci ont un ensemble de boutons "Enregistrer" et "Annuler", ce qui laisse les utilisateurs penser (même si pendant une fraction de seconde) si "fermer" signifie "annuler" ou non.
Les boîtes de dialogue d'information devraient avoir à la fois un bouton "Fermer" et un [X], à mon avis.
Si les informations sont quelque chose que l'utilisateur peut vouloir interagir avec (par exemple du texte à sélectionner et à copier), alors bien sûr vous ne peut pas autoriser un clic à l'intérieur pour fermer la boîte de dialogue.
Si vous voulez que l'utilisateur fasse attention à les informations, je voudrais également interdire le clic à l'extérieur pour ignorer, car cela augmente les chances l'utilisateur doit se concentrer sur la boîte de dialogue pour la fermer (et, espérons-le, lire quelque chose là-bas).
Vous oubliez ESCAPE (touche Échap) pour en fermer ( Annuler (OK/Annuler), ou [~ # ~] ok [~ # ~] pour un seul OK ) fenêtres modales
I jamais cliquez sur la croix dans le coin. Si les boutons sont omis, je suis généralement confus jusqu'à ce que je me souvienne que c'est toujours une fenêtre. J'irais avec des boutons OK/Annuler (sauf si d'autres mots sont plus appropriés, par exemple "oui/non" "enregistrer/ne pas enregistrer") et une croix dans le coin qui fait la même chose que le bouton d'annulation. Aucune autre action "cachée", telle que la fermeture si vous cliquez n'importe où.
Le bouton de sortie est toujours nécessaire, que les utilisateurs cliquent dessus ou non, car son absence est déroutante. Les liens étroits aident, mais ils doivent être accompagnés du "X". Je vous suggère de toujours fournir toutes les options de sortie ('x', liez et cliquez n'importe où pour fermer).
Je ne suis pas actuellement au courant d'une étude faisant référence à ce sujet, mais il y a un article intéressant avec Smashing Magazine sur la bonne utilisation de Modal Windows qui pourrait vous intéresser: http://www.smashingmagazine.com/2009/ 05/27/modal-windows-in-modern-web-design /
Les boutons de dialogue explicites s'avèrent également être une fonctionnalité d'accessibilité importante. J'ai travaillé sur les GNOME Human Interface Guidelines pendant de nombreuses années, et chaque fois que nous les mettons à jour, il y a des appels à "réduire l'encombrement" en supprimant les "boutons de fermeture redondants" dans la boîte de dialogue, pour les boîtes de dialogue qui peut être fermé sans ambiguïté à l'aide du contrôle de cadre de fenêtre et de son raccourci clavier associé (Alt-F4, identique à MS Windows).
Cependant, chaque fois que nous le suggérons à la communauté d'accessibilité GNOME, ils réaffirment leur préférence pour conserver les boutons tangibles à l'intérieur de la fenêtre elle-même.
J'irais probablement avec les deux contrôles:
(X) - coin supérieur droit
Justification: très courant pour le Web et je pense que même les utilisateurs de Mac y sont habitués. [X] est un symbole que les utilisateurs reconnaissent bien et avoir (Fermer) semble redondant.
[OK/Fermer] - dans le contenu
Rationnel: si l'utilisateur parcourt le texte, les yeux peuvent très bien atterrir sous le texte et le curseur peut se rapprocher du bouton de fermeture, il peut donc être plus rapide d'appuyer sur le bouton, en particulier, car il est également plus grand. Vous pouvez également mettre l'accent sur le bouton Fermer afin que l'utilisateur puisse simplement appuyer sur Entrée pour fermer la boîte de dialogue.