Modal vs. Popover
Ein modaler Dialog stoppt die Seite, bis die Aufgabe erledigt ist. Ein Popover bleibt neben seinem Button und lässt die Seite weiterlaufen.
Verwenden Sie ein Modal für eine Aufgabe, die zuerst abgeschlossen werden muss. Verwenden Sie ein Popover für zusätzliche Details oder eine kleine Aktion.
Sieh, was jedes Muster macht
Probieren Sie jedes Beispiel. Lesen Sie dann über den Job, für den es gemacht ist.
Modaldialog
Ein modaler Dialog ist ein Fenster, das im Mittelpunkt steht. Es blockiert den aktuellen Bildschirm, bis man es schließt oder fertig ist.
Bei der Kontolöschung bleibt der Tastaturfokus innerhalb des Dialogs. Wenn die Person abbricht, kehrt der Fokus zum Button zurück, der ihn geöffnet hat.
- Verwenden Sie es, wenn
- Verwenden Sie es für eine kurze Auswahl oder kleine Aufgabe, die volle Aufmerksamkeit erfordert.
- Nutze es nicht, wenn
- Öffne niemals einen Dialog über einem anderen oder benutze einen für normale, risikoarme Informationen.
- In Code verwendeter Name
<dialog> / role="dialog" aria-modal="true"
Popover
Ein Popover ist ein kleines Panel, das mit dem Steuerelement verbunden ist, das es geöffnet hat. Es kann strukturierte Inhalte und Aktionen aufnehmen, ohne die Seite zu blockieren.
popover attribute / PopoverWählen Sie ein Avatarbild, um ein kleines Profil zu öffnen. Es zeigt die Rolle der Person, Kontaktdetails und eine Folgen-Aktion.
- Verwenden Sie es, wenn
- Verwenden Sie es, wenn der Inhalt neben seinem Auslöser gehört und die Menschen die Seite weiterhin verwenden können.
- Nutze es nicht, wenn
- Verwende es niemals für einen kurzen Hinweis, der nur ein Label enthält. Verwende stattdessen ein Tooltip.
- In Code verwendeter Name
popover attribute / Popover
Schneller Vergleich
| UI-Muster | Am besten für | Nicht für | In Code verwendeter Name |
|---|---|---|---|
| ModaldialogModal Dialog | Verwenden Sie es für eine kurze Auswahl oder kleine Aufgabe, die volle Aufmerksamkeit erfordert. | Öffne niemals einen Dialog über einem anderen oder benutze einen für normale, risikoarme Informationen. | <dialog> / role="dialog" aria-modal="true" |
| PopoverPopover | Verwenden Sie es, wenn der Inhalt neben seinem Auslöser gehört und die Menschen die Seite weiterhin verwenden können. | Verwende es niemals für einen kurzen Hinweis, der nur ein Label enthält. Verwende stattdessen ein Tooltip. | popover attribute / Popover |
Vor dem Ausliefern
- 01
Schreibe auf, was die Person tun muss.
- 02
Testen Sie Tastatur, Fokus, Berührung, Zoom, Laden, leere und Fehlerzustände.
- 03
Sicherstellen, dass Leute dieselben Informationen ohne Hover oder Bewegung erhalten können.
- 04
Testen Sie mit echtem Inhalt auf kleinen und großen Bildschirmen.
Vergleichsanfrage zum Kopieren
Kopiere das, wenn dein Team Hilfe bei der Wahl zwischen den Mustern braucht.
Wähle das beste Muster aus Modaldialog (Modal Dialog), Popover (Popover) für unseren echten Nutzerfluss. Nutze diese Regel: Ein modaler Dialog stoppt die Seite, bis die Aufgabe erledigt ist. Ein Popover bleibt neben seinem Button und lässt die Seite weiterlaufen. Schreibe die Aufgabe, die Inhaltsmenge und die Kosten eines Abbruchs auf. Prüfe Tastatur, Touch, Laden, Fehler und das Verhalten bei reduzierter Bewegung. Erkläre deine Wahl und baue dann die kleinste zugängliche Version mit dem Design-System des Projekts.