web-dev-qa-db-fra.com

Quelle est (ou y a-t-il) une différence entre une fenêtre modale et une superposition de fenêtre modale?

Wikipedia dit https://en.wikipedia.org/wiki/Modal_window

Dans la conception de l'interface utilisateur, une fenêtre modale est un élément de contrôle graphique subordonné à la fenêtre principale d'une application qui crée un mode dans lequel la fenêtre principale ne peut pas être utilisée. La fenêtre modale est une fenêtre enfant qui oblige les utilisateurs à interagir avec elle avant de pouvoir reprendre le fonctionnement de l'application parente, empêchant ainsi le flux de travail sur la fenêtre principale de l'application. Les fenêtres modales sont souvent appelées fenêtres lourdes ou boîtes de dialogue modales car la fenêtre est souvent utilisée pour afficher une boîte de dialogue.

Mais parfois, les gens disent "Superposition de fenêtre modale". Pourquoi la confusion et quelle est la différence du point de vue de l'utilisateur?

2
Benoit Meunier

Les fenêtres contextuelles peuvent être classées en trois catégories distinctes en fonction de leur modalité:

  1. System Modal fenêtres (verrouillez toute interaction avec le système d'exploitation)
  2. Application Modal fenêtres (verrouillez toute interaction avec l'application)
  3. Non modal fenêtres (permettent aux utilisateurs d'ignorer et de continuer à travailler)

1. Modaux système:

C'est lorsque le tout le système d'exploitation est verrouillé et que l'utilisateur doit sélectionner une option pour continuer. C'est le type de popup que vous souhaitez éviter; à moins que vous n'ayez une raison très importante pour y faire face.
Si vous êtes sur le Web, autant que je sache, vous ne vous en occuperez pas. Btw on Windows OS un modal système (a également une superposition), ressemble à ceci:

Windows OS modal window

2. Modaux d'application:

Ceci est la partie intéressante. Maintenant pop-up bloque tout autre travail dans la fenêtre de l'application (qui a montré le popup), mais laissez l'utilisateur interagir avec d'autres applications.
Dans un navigateur, il peut s'agir d'une boîte d'alerte générée par Javascript ou de tout autre élément comme une boîte de dialogue des paramètres du navigateur. Par exemple, cela provient de chrome quelque part. L'application ne vous permet pas de cliquer ailleurs dans sa fenêtre et utilise également une ombre au lieu d'un fond noir.

Application modal window on chrome

Lorsque vous utilisez des boîtes d'alerte, gardez à l'esprit que les utilisateurs peuvent désactiver les fenêtres contextuelles dans le navigateur, il est donc un peu risqué de s'y fier.

3. Non modaux

Ce type de fenêtres permet aux utilisateurs de les ignorer et de continuer à faire ce qu'ils faisaient. Ils ne peuvent probablement pas se rapporter à votre question.


Mais qu'en est-il des superpositions?

Ci-dessous, vous pouvez voir une galerie d'images. Il s'agit d'une fenêtre contextuelle et elle utilise une superposition (comme le fait Facebook).

Image gallery, Modal Window Overlay

La partie intéressante ici est que la superposition noire n'indique pas que quelque chose est verrouillé; il est juste en train de désencombrer et apporte du contraste sur le terrain. Aussi lorsque vous cliquez sur fond, vous quittez le "mode galerie"!

Maintenant, si nous comparons la galerie d'images avec les modaux d'application et de système, nous pouvons facilement observer un motif (fond transparent et fenêtre), mais leur comportement est quelque peu différent.
Et au fil du temps, les utilisateurs sur le Web s'attendent à pouvoir facilement fermer les fenêtres et continuer ce qu'ils faisaient, simplement en cliquant sur un fond noir transparent.

Nous devons donc être prudents lorsqu'un utilisateur doit effectuer une action sur un modal et que vous souhaitez indiquer que quelque chose n'est pas disponible pour cliquer.

Par ailleurs, par souci de simplicité, j'ai utilisé le terme fenêtre également pour dialoguer, ce qui n'est pas toujours vrai

5
gpelelis

Je ne pense pas qu'il y ait de différence. Dans les deux cas, le modal verrouille l'action en arrière-plan jusqu'à ce que l'utilisateur ferme le modal.

Je pense que la "superposition" n'est qu'un moyen plus précis d'expliquer la façon dont elle est présentée, avec le fond plus sombre et l'option consécutive de la fermer en cliquant en dehors du modal.

2
MovyMatt

Il n'y a pas de différence du point de vue des utilisateurs car ils ne connaissent pas souvent la terminologie derrière eux (de sorte qu'ils ne peuvent pas se confondre). Je ne savais pas que les modaux s'appelaient des modaux (commençant à se demander si le pluriel est 'modi' haha) jusqu'à ce que j'aie 23 ans, mais j'ai interagi avec eux sous leurs différentes formes à partir probablement de l'âge de 8 à 9 ans. Cela n'a pas vraiment changé ce que je ressens pour eux, car en dehors d'un mot à utiliser pour gémir sur leur prévalence inutile

2
Chris

Il y a un problème UX intéressant derrière les superpositions de fenêtres modales.

Sur les superpositions

Du point de vue de l'expérience utilisateur, une chose à retenir en ce qui concerne les superpositions (visibles) est que les systèmes ne peuvent pas les mettre automatiquement chaque fois qu'une fenêtre modale est affichée depuis le contenu en dessous peut toujours être important pour les utilisateurs. Prenons un cas sous OS X où j'ouvre d'abord le dossier Corbeille et demande ensuite de le vider. Lors de l'obtention du modal "Êtes-vous sûr", je peux toujours vouloir inspecter le contenu du dossier juste pour vérifier, et une superposition peut très bien être sur mon chemin.

Donc, avoir des superpositions automatiques (par le système d'exploitation ou le navigateur) avec des modaux est basé sur l'hypothèse invalide que les utilisateurs n'ont jamais besoin de voir clairement le reste de la fenêtre.

Cependant, ne pas afficher une superposition est un peu de mauvaise UX car il n'y a rien à dire à l'utilisateur "Vous ne pouvez pas cliquer ici".

De plus, les superpositions concentrent l'utilisateur sur la fenêtre modale.

Des applications Web

Sur le Web, les navigateurs proposent des fenêtres modales, telles que la alert() en Javascript. Ceux-ci bloquent la fenêtre/l'onglet du navigateur de l'interaction de l'utilisateur:

A browser window with an alert message

La fenêtre d'alerte est plutôt moche et son style dépend du navigateur/OS. Les développeurs Web optent donc pour la simulation de fenêtres modales, en bloquant manuellement le reste de la fenêtre d'interaction avec l'utilisateur. Il existe deux façons principales de procéder:

  • Soit intercepter tous les événements d'interaction du navigateur (clavier, souris, tactile) et les "tuer" sauf s'ils sont ciblés sur la fenêtre modale.
  • Affichez simplement une superposition sous le modal.

La dernière solution est beaucoup plus facile à mettre en œuvre, et elle peut également assombrir le reste de la fenêtre du navigateur à la fois pour signifier "Vous ne pouvez pas cliquer ici" et pour concentrer l'utilisateur sur le modal.

Retour aux superpositions

Il y a cependant un inconvénient: une superposition visible n'est pas toujours appropriée (car les utilisateurs peuvent toujours avoir besoin de voir le contenu derrière le modal).

C'est donc là qu'il y a une différence entre "fenêtre modale" et "superposition de fenêtre modale" - l'une vient sans superposition visible, l'autre avec.

Lequel vous choisissez doit être déterminé par chaque cas d'utilisation spécifique et ne pas être automatique par le système d'exploitation, le navigateur ou le cadre que vous utilisez.

1
Izhaki