web-dev-qa-db-fra.com

Qu'est-ce qu'une fenêtre de dialogue modale?

Qu'est-ce qu'une fenêtre de dialogue modale et quand devez-vous l'utiliser? Y a-t-il certains cas où vous devriez vous abstenir d'en utiliser un?

37
Matt Rockwell

Une boîte de dialogue modale est une fenêtre qui oblige l'utilisateur à interagir avec elle avant de pouvoir recommencer à utiliser l'application parente. Un bon exemple de ceci serait une invite pour l'enregistrement, ou la boîte de dialogue "ouvrir un fichier".

enter image description here

Ils sont souvent utilisés lorsqu'un utilisateur est contraint de prendre une décision importante. Supposons que vous travailliez sur un document dans Microsoft Word et que vous avez choisi de quitter Word avant de l'enregistrer. Une boîte de dialogue modale apparaîtra et vous demandera d'enregistrer, de ne pas enregistrer ou d'annuler. Jusqu'à ce que vous preniez votre décision, vous ne pouvez pas utiliser l'application et elle ne se fermera pas.

41
Matt Rockwell

Je suis d'accord avec Matt qu'une boîte de dialogue de fichier devrait être une boîte de dialogue modale.

Les boîtes de dialogue modales doivent être utilisées lorsque l'utilisateur entreprend une action nécessitant des informations supplémentaires pour se terminer correctement. La boîte de dialogue d'impression est également un bon exemple. Ou les boîtes de dialogue "options" dans de nombreux programmes.

Quand utiliser les boîtes de dialogue modales est un peu délicat à définir, mais pour moi, il devrait être utilisé avec parcimonie et évité autant que possible. Regardez l'exemple de Fraser du chargeur d'images Facebook ... ce n'est pas nécessaire car il peut être fait de manière asynchrone.

Règle générale: chaque fois que des informations supplémentaires sont nécessaires pour terminer une action.

13
GUI Junkie

Matt a déjà dit ce qu'est un dialogue modal.

Quant à savoir quand il doit être utilisé: La règle de base est "Lorsqu'aucune autre action n'a de sens jusqu'à ce que l'utilisateur termine cette boîte de dialogue". Lisez attentivement, il ne parle pas de ce que vous souhaitez que l'utilisateur fasse! De nombreuses boîtes de dialogue sous Mac ne sont pas modales alors que leurs homologues sous Windows sont modales. Cela ne veut pas dire que Mac est meilleur, mais pour dire que de nombreux concepteurs de boîtes de dialogue forcent inutilement l'utilisateur à effectuer une action que l'utilisateur peut vouloir reporter jusqu'à ce qu'il soit prêt.

Exemples: 1) un programme SSH nécessite le mot de passe pour se connecter au serveur. Cela peut être implémenté via une boîte de dialogue modale, bien que vous puissiez affirmer que l'ouverture de la configuration des options est logique que l'utilisateur soit connecté ou non. Un appel au jugement vraiment.

2) Un navigateur à onglets multiples devrait pas implémenter l'authentification de base HTTP 401 via une boîte de dialogue modale. Un utilisateur peut souhaiter ouvrir un autre onglet pour lire le mot de passe d'un e-mail d'activation.

3) Une boîte de dialogue d'impression dans une interface multi-document ne doit pas être modale. Si l'utilisateur veut imprimer deux documents, un avec 1000 pages et un avec 5, mais commence à tort avec le document de 1000 pages, vous ne devriez pas lui demander d'annuler la boîte de dialogue (et tous les paramètres qu'elle a donnés) juste pour pouvoir imprimer le plus petit travail d'abord.

11
Erion

Matt a répondu à la question de savoir ce que c'était. Quant à savoir quand l'utiliser, il est utile lorsque vous avez besoin que l'utilisateur se concentre sur une tâche et une seule tâche. Sur le Web, un modal est souvent centré sur l'écran, le reste de la page étant grisé pour attirer l'attention sur lui-même et impliquer visuellement que l'arrière-plan ne sera pas utilisé avant d'avoir terminé cette tâche modale.

Les endroits où ils ne devraient pas être utilisés dépendent quelque peu du contexte de votre projet particulier. Là où je l'ai vu abusé, c'est quand il est utilisé en remplacement d'un flux de page normal. Exemple où un utilisateur peut déclencher une tâche sur la page principale pour lancer un modal qui crée ensuite un formulaire AJAX pour charger un formulaire qui parcourt ensuite 3 écrans modaux avant de terminer. Dans cet exemple, l'envoi l'utilisateur d'une page séparée était probablement la meilleure option.

3
DA01

La boîte de dialogue modale est une fenêtre secondaire qui s'ouvre sur la principale. Afin de poursuivre un ensemble de tâches, l'utilisateur doit interagir avec lui afin de revenir à la fenêtre principale.

Pour référence: https://uxplanet.org/5-essential-ux-rules-for-dialog-design-4de258c22116

http://uxmovement.com/forms/best-practices-for-modal-windows/

0
NB4