Quand devez-vous utiliser une boîte de dialogue modale?
Il semble y avoir une utilisation croissante des boîtes de dialogue modales sur le Web, mais quand devez-vous les utiliser? Pourquoi choisiriez-vous de les utiliser à la place des contrôles en ligne ou d'une autre page, et quand devriez-vous les éviter complètement?
J'utilise une combinaison d'édition en ligne, de modaux doux, de modaux complets et de fenêtres flottantes.
- Édition en ligne. Si possible, essayez toujours de l'utiliser. Il nécessite le moins de changement de contexte. C'est rapide.
- Soft modals. Exemple: Menus de démarrage de Windows. Ce sont des contrôles riches et peuvent avoir des formes, mais ils apparaissent sur un seul menu et peuvent être ignorés en cliquant n'importe où. Ils sont bons à utiliser dans les menus.
- Full Modals. Celles-ci masquent tout l'écran et permettent SEULEMENT l'interaction avec le modal. Je les utilise lorsque je veux concentrer l'utilisateur sur une tâche et ne pas continuer sans remplir le formulaire.
- Windows flottant. Ce sont bons pour les messages d'état. Ils flottent sur l'interface utilisateur mais peuvent être déplacés et minimisés. Utilisez-les pour les choses qui doivent persister lors de vos déplacements dans l'application.
J'espère que ceci est utile.
Les règles les plus générales auxquelles je pourrais penser seraient:
Les dialogues modaux peuvent avoir un sens lorsqu'ils vous aident à garder le flux (c'est-à-dire que vous n'avez pas à quitter la page sur laquelle vous êtes).
N'utilisez pas de boîtes de dialogue modales pour les éléments qui devraient être liés ou consultables (car l'URL ne change pas, elle ne peut pas être liée en externe et cela inclut les moteurs de recherche).
Edit: Jetez également un coup d'œil à Facebook, à quelques exceptions près, je pense qu'ils le gèrent assez bien.
J'ai trouvé que les modaux sont les meilleurs à utiliser lorsque vous essayez d'isoler une action de l'utilisateur. En utilisant un modal, vous capturez le focus de l'utilisateur et cela vous permet de supprimer les distractions secondaires, telles que la navigation, les liens utilitaires, les images ou d'autres composants qui pourraient distraire de ce que vous voulez que l'utilisateur voit ou expérimente.
Pour ce qui est de NE PAS utiliser un modal, vous n'aurez qu'à faire preuve de votre meilleur jugement sur celui-ci. Je ne pense pas que vous puissiez appliquer des règles strictes à quelque chose comme ça.
Ma règle de base serait d'utiliser une fenêtre modale quand il y a une impasse pour la fonctionnalité. Par exemple, lorsque vous mettez à jour les informations de profil, créez un compte, etc.
Certaines personnes font la distinction entre les boîtes de dialogue et les boîtes d'alerte (une boîte d'alerte n'a généralement qu'un ou deux boutons et aucune autre entrée, tandis qu'une boîte de dialogue a des champs d'entrée d'une certaine sorte). Et il y a une école de pensée qui dit que vous ne devez jamais utiliser des boîtes d'alerte modales (Voir " Les boîtes d'alerte doivent-elles être évitées à tout prix?) ".)
Mettre un formulaire dans une boîte de dialogue modale peut être plus réactif que de le placer dans une page distincte, car le code de la boîte de dialogue peut être entièrement contenu dans la page précédente - pas de trafic réseau. Cependant, j'ai vu de nombreux utilisateurs confus par les dialogues modaux. Vous voudrez tester avec les utilisateurs finaux. Bien sûr. :)
Les boîtes de dialogue modales ne doivent être utilisées que lorsque l'utilisateur doit faire un choix ou doit connaître quelque chose de spécifique avant de continuer. Des avertissements sur la façon dont quelque chose qu'ils choisissent de faire peuvent potentiellement causer des problèmes (comme supprimer définitivement quelque chose) et des choses comme ça.
Se connecter pour accéder à une section sécurisée du site (ou pour poster un commentaire sur une page) est également correct, tant que vous le faites correctement.
J'ai posté ceci sur une autre question, mais je vais l'inclure ici aussi:
Je travaille sur une implémentation d'une page Web qui doit ressembler à une application Web flexible. Il existe plusieurs formulaires que l'utilisateur peut remplir.
Pour mes besoins et les utilisateurs, voici quelques hypothèses (acceptées par les parties prenantes et les PME, mais peuvent être infirmées lors des tests utilisateurs):
- Les utilisateurs qui viennent sur cette application Web savent ce qu'ils veulent faire . Ils viennent pour accomplir une tâche spécifique connue à l'avance. C'est le but de cette page. Les utilisateurs ne viennent pas ici pour regarder autour.
- Parce qu'ils savent ce qu'ils font, ils connaissent les informations nécessaires pour remplir les formulaires nécessaires.
J'ai suggéré l'utilisation de formulaires lightboxed. Je suis normalement contre l'utilisation de fenêtres modales, mais je suis également TRÈS opposé à l'envoi de l'utilisateur à de nouvelles pages chaque fois qu'il tente une simple mise à jour ou l'ajout. Et je ne pense pas que les accordéons soient la bonne solution ici (bien qu'ils puissent être une option alternative).
Dans notre contexte, les formulaires lightbox ne sont affichés que sur demande de l'utilisateur. Ils permettent échappement/fermeture rapide et facile. Ils concentrent l'utilisateur sur l'action qu'ils viennent de demander donc il n'y a pas de surprise au changement sur la page. Les utilisateurs ne sont pas supprimés de la page/application dans laquelle ils travaillent.
L'un des formulaires comporte trois (3) étapes discrètes. Nous utilisons donc un assistant dans la lightbox avec un suivi des progrès. Cela a en fait été un défi majeur pour une seule personne de notre groupe, qui (à juste titre) est catégoriquement opposée aux modaux multi-panels. Habituellement, j'étais d'accord dans son ensemble.
Dans ce cas, un assistant est un modèle accepté pour ce type d'interaction. Les utilisateurs savent ce qu'ils essaient de faire et les étapes nécessaires pour le faire. La visionneuse concentre l'utilisateur sur l'action demandée sans quitter la page de présentation (qui donne des informations sur les sélections et les actions précédentes), mais permet une fermeture rapide.
Bien que je convienne que les modaux/superpositions/visionneuses/etc doivent être utilisés avec parcimonie, ils ne sont pas mauvais ou mauvais UX par nature. Les versions demandées par l'utilisateur pour une tâche ciblée sont un cas d'utilisation valide et dans de nombreuses situations peuvent être supérieures aux alternatives lorsqu'elles sont implémentées avec soin.