web-dev-qa-db-fra.com

Quelle est la différence entre un Modal, un Popup, un Popover et un Lightbox?

J'ai vu de nombreux termes utilisés pour décrire les boîtes de message qui informent et alertent les utilisateurs ou affichent des informations telles que modal, popup, popover et lightbox.

Quelle est la différence entre ces composants?

Quand et pour quel type de texte chacun de ces composants doit-il être utilisé?

96
Tot Zam

Tous ces composants d'interface utilisateur sont des conteneurs/fenêtres qui s'affichent au-dessus du contenu avec lequel vous consultez/interagissez actuellement. Les différents noms sont basés sur l'attention qu'ils méritent, le contexte dans lequel vous vous trouvez et la façon dont vous pouvez interagir avec eux.

Alerte - Ces messages nécessitent une attention immédiate. La fenêtre/le conteneur est généralement verrouillé, ce qui signifie que vous ne pouvez pas fermer la boîte ou continuer ce que vous voulez faire jusqu'à ce que vous reconnaissiez explicitement le contenu, cela se fait généralement en cliquant sur un bouton à l'intérieur du conteneur. Les boutons de cette fenêtre sont généralement "OK" ou "Annuler". (Si vous en montrez beaucoup, c'est généralement un échec de conception car les attentes de votre utilisateur ne correspondent pas aux attentes de l'interface utilisateur.)

enter image description here

Modal/Dialog - Ce sont pour faire le travail. (Exemple: un bouton qui dit "Inviter des amis" ouvrira un tel conteneur avec une liste d'amis que vous pourrez ensuite inviter). Ceux-ci vous permettent de faire plus de travail sans avoir à afficher toutes les informations sur l'écran principal. Ces messages ne sont pas verrouillés et vous pouvez cliquer n'importe où pour fermer le conteneur.
enter image description here

Popup - Vous n'avez pas besoin de traiter ces messages tout de suite, mais à un moment donné, vous devrez prendre des mesures car ils ne disparaîtront pas jusqu'à dire explicitement que vous ne voulez plus d'eux.
enter image description here

Notification Flash/Notification Growl - Ces notifications ont un temps qui leur est associé. Vous pouvez choisir de les traiter immédiatement, ou si vous ne faites rien, après un certain temps, ils se révoqueront.
enter image description here

Lightbox/Théâtres - Ils sont utilisés pour agrandir et mettre au point une partie de l'écran. Ces conteneurs sont le plus souvent utilisés pour visualiser des images. Habituellement, vous pouvez alors parcourir un contenu similaire (la photo suivante dans la galerie) sans ignorer et cliquer sur une autre miniature. Ceux-ci peuvent être verrouillés ou non. Cela dépend si vous voulez que les gens retournent le contexte dans lequel ils se trouvaient ou continuent sur un nouveau thread de contexte.
enter image description here

Popover/Tooltip/Hovercard - Ce sont des approches passives pour afficher plus d'informations. Ceux-ci sont utilisés pour ajouter des instructions ou des explications simples ou préfigurer ce qui se passera si vous cliquez sur un lien.
enter image description hereenter image description here

Source: https://www.quora.com/Whats-the-difference-between-a-modal-a-popover-and-a-popup

93
Tot Zam

Les popovers sont une extension des info-bulles qui incluent plus de contenu au-delà du simple texte. Ils ont souvent un titre et peuvent inclure des images, etc.

Une info-bulle est simplement du texte.

2
doublejosh