Comparaison comportementale
Dialogue d'alerte vs Visionneuse modale
Différence décisive
Le Dialogue d’alerte interrompt pour une décision à confirmer ou annuler ; la Visionneuse modale agrandit un média et laisse parcourir une collection.
Critères de choix, liens et sources
- Dialogue d'alerteChoisis Dialogue d’alerte si l’utilisateur doit décider avant une action lourde de conséquences.Ouvrir la fiche Dialogue d'alerte
- Visionneuse modaleChoisis Visionneuse modale si consulter un média en grand est la tâche, sans décision sensible.Ouvrir la fiche Visionneuse modale
Voir les neuf dimensionsVoir les sources
Surfaces modales
Essayer
La tâche consiste-t-elle à agir, à confirmer une décision sensible ou à consulter un média ?
Dialogue d'alerte
Contexte commun aux essais
Un élément de projet ouvre une surface ciblée tandis que l'espace sous-jacent reste indisponible jusqu'à ce que l'utilisateur termine ou ferme cette surface.
Dialogue d'alerte
Mission
Confirmation sensible - Alert dialog
Ouvrir l'avertissement, lire la conséquence nommée, annuler au clavier, puis rouvrir et confirmer volontairement.
Étape 1 sur 3
Essayer
Manipule le composant. Le résultat de ton essai apparaît juste au-dessus. Avance à ton rythme.
Comportement et cas limite
- À observer
- L'avertissement nomme l'espace, explique la perte définitive et place d'abord le focus sur l'action sûre Conserver.
- Cas limite
- Pendant l'envoi de la suppression, les deux actions empêchent une double activation et le dialogue annonce l'attente.
Visionneuse modale
Mission
Visionneuse d'images - Lightbox
Ouvrir la deuxième image, passer à la suivante au clavier, puis fermer et revenir sur la même miniature.
Étape 1 sur 3
Essayer
Manipule le composant. Le résultat de ton essai apparaît juste au-dessus. Avance à ton rythme.
Comportement et cas limite
- À observer
- La photo sélectionnée est agrandie avec sa légende, sa position dans l'ensemble et les contrôles de navigation.
- Cas limite
- Un échec de chargement conserve la légende et la navigation, explique l'erreur par du texte et ne laisse jamais une modale vide.
Ce que cet essai montre
Un Dialogue d'alerte sert à une décision courte et sensible, pas à un formulaire général ni à une visionneuse de média.
Lequel convient à ton besoin ?
Dialogue d'alerte
Confirmer une suppression définitive
Visionneuse modale
Examiner des photos produit en grand
Différence et sources
Un Dialogue d'alerte sert à une décision courte et sensible, pas à un formulaire général ni à une visionneuse de média.
Consulter les sourcesParties du spécimen
Sélectionne un repère numéroté sur le schéma, ou utilise la liste ci-dessous, pour afficher son rôle. Le schéma montre l'état représentatif du concept.
Voile de fond
La couche qui sépare une surface modale du contenu de page inactif.
Décision
Question de famille
La tâche consiste-t-elle à agir, à confirmer une décision sensible ou à consulter un média ?
Trois critères pour choisir
- Cas d’usage
Dialogue d'alerte
Confirmer une suppression définitive
Visionneuse modale
Examiner des photos produit en grand
- Focus
Dialogue d'alerte
Le focus initial va sur l'action utile la moins destructive, sauf s'il est plus sûr de lire d'abord de longues conséquences.
Visionneuse modale
L'ouverture place le focus sur la visionneuse ou le contrôle fermer, le contient, puis le rend à la miniature d'origine.
- Fermeture
Dialogue d'alerte
Seule une décision explicite ou une annulation sûre documentée ferme l'alerte ; aucun délai ni appui extérieur accidentel ne la ferme.
Visionneuse modale
Le contrôle fermer nommé et Échap ferment toujours ; l'appui extérieur est facultatif et jamais le seul moyen.
Neuf dimensions
- Déclenchement
Dialogue d'alerte
Une action sensible atteint le point où une confirmation explicite est requise.
Visionneuse modale
La sélection d’une vignette ou d’un aperçu ouvre la consultation ciblée.
- Modalité
Dialogue d'alerte
Strictement modale ; aucune interaction avec l’arrière-plan avant la décision.
Visionneuse modale
Visionneuse de média modale ; la page sous-jacente est temporairement inactive.
- Positionnement
Dialogue d'alerte
Une surface compacte et saillante dans la fenêtre, proche du contexte de décision.
Visionneuse modale
Le média est centré ou ajusté dans une superposition, avec ses contrôles à proximité.
- Interactivité
Dialogue d'alerte
Propose des décisions explicites de confirmation et d’annulation ; ne disparaît ni avec un délai ni par simple appui extérieur.
Visionneuse modale
Peut proposer précédent, suivant, zoom, légende et fermeture autour du média.
- Focus
Dialogue d'alerte
Le focus initial va sur l'action utile la moins destructive, sauf s'il est plus sûr de lire d'abord de longues conséquences.
Visionneuse modale
L'ouverture place le focus sur la visionneuse ou le contrôle fermer, le contient, puis le rend à la miniature d'origine.
- Fermeture
Dialogue d'alerte
Seule une décision explicite ou une annulation sûre documentée ferme l'alerte ; aucun délai ni appui extérieur accidentel ne la ferme.
Visionneuse modale
Le contrôle fermer nommé et Échap ferment toujours ; l'appui extérieur est facultatif et jamais le seul moyen.
- Rôle accessible
Dialogue d'alerte
alertdialog[aria-modal=true]
Visionneuse modale
dialog[aria-modal=true]
- Cas d’usage
Dialogue d'alerte
Confirmer une suppression définitive
Visionneuse modale
Examiner des photos produit en grand
- Comportement mobile
Dialogue d'alerte
Garder la conséquence lisible et séparer l’action destructive de l’action sûre avec de grandes cibles.
Visionneuse modale
Ajuster le média à la fenêtre sûre et doubler les gestes facultatifs par des contrôles nommés et tactiles.
| Dimension | Dialogue d'alerteAlert dialog | Visionneuse modaleLightbox |
|---|---|---|
| Déclenchement | Une action sensible atteint le point où une confirmation explicite est requise. | La sélection d’une vignette ou d’un aperçu ouvre la consultation ciblée. |
| Modalité | Strictement modale ; aucune interaction avec l’arrière-plan avant la décision. | Visionneuse de média modale ; la page sous-jacente est temporairement inactive. |
| Positionnement | Une surface compacte et saillante dans la fenêtre, proche du contexte de décision. | Le média est centré ou ajusté dans une superposition, avec ses contrôles à proximité. |
| Interactivité | Propose des décisions explicites de confirmation et d’annulation ; ne disparaît ni avec un délai ni par simple appui extérieur. | Peut proposer précédent, suivant, zoom, légende et fermeture autour du média. |
| Focus | Le focus initial va sur l'action utile la moins destructive, sauf s'il est plus sûr de lire d'abord de longues conséquences. | L'ouverture place le focus sur la visionneuse ou le contrôle fermer, le contient, puis le rend à la miniature d'origine. |
| Fermeture | Seule une décision explicite ou une annulation sûre documentée ferme l'alerte ; aucun délai ni appui extérieur accidentel ne la ferme. | Le contrôle fermer nommé et Échap ferment toujours ; l'appui extérieur est facultatif et jamais le seul moyen. |
| Rôle accessible | alertdialog[aria-modal=true] | dialog[aria-modal=true] |
| Cas d’usage | Confirmer une suppression définitive | Examiner des photos produit en grand |
| Comportement mobile | Garder la conséquence lisible et séparer l’action destructive de l’action sûre avec de grandes cibles. | Ajuster le média à la fenêtre sûre et doubler les gestes facultatifs par des contrôles nommés et tactiles. |