Modal vs. Bottom Sheet: Wann du was in einer Mobile-App einsetzt
Ein Modal blockiert, ein Bottom Sheet lässt Leute weiter stöbern. Die eine Frage, die zwischen beiden entscheidet, beide Muster neu aufgebaut, eine Entscheidungstabelle für zehn typische Fälle und die Plattformregeln dahinter.
Modals und Bottom Sheets schieben sich beide über den Screen, deshalb behandeln Teams sie als dasselbe in unterschiedlicher Form. Das sind sie nicht. Das eine hält Leute auf, bis sie antworten, das andere lässt sie etwas auswählen und weitermachen. Hier ist die eine Frage, die es entscheidet, beide Muster neu aufgebaut und eine Entscheidungstabelle für die Fälle, die in jeder App vorkommen.
Die eine Frage: Muss sie jetzt beantwortet werden?
Kann die Person erst weitermachen, wenn sie sich entscheidet, ist es ein Modal. Könnte sie es ignorieren und der Screen würde trotzdem noch Sinn ergeben, ist es ein Sheet.
Diese eine Frage klärt die meisten Fälle, bevor jemand über Optik streitet. Sie erklärt auch jeden anderen Unterschied zwischen beiden: Ein Modal sitzt in der Mitte und dimmt alles, weil nichts anderes zählt, bis es beantwortet ist. Ein Sheet steigt von unten auf und lässt den Screen im Blick, weil der Screen weiterhin der Punkt ist.
Das Modal: erst entscheiden, dann weiter
Ein Modal, auf Android Dialog und auf iOS Alert genannt, unterbricht mit Absicht. Es passt, wenn:
- Leute entscheiden müssen, bevor es weitergeht. Die App kann die Antwort nicht erraten.
- Die Aktion sich nicht rückgängig machen lässt. Ein Projekt zu löschen, das 24 Dateien für alle entfernt, verdient eine Pause.
- Es höchstens zwei Optionen gibt. Abbrechen und die Aktion, als Verb benannt: Löschen, nicht OK.
Wo es scheitert: bei allem Optionalen. Ein Modal, das nach einer Bewertung fragt, ein Feature ankündigt oder ein Menü anbietet, hält Leute von dem ab, wofür sie gekommen sind, und sie lernen, einfach auf alles zu tippen, was es schließt, ohne zu lesen.
Das Bottom Sheet: stöbern, dann wählen
Ein Bottom Sheet enthält Optionen, die zu dem gehören, was schon auf dem Screen ist. Es passt, wenn:
- Die Optionen zu diesem Screen gehören. Dieses Projekt teilen, duplizieren, verschieben oder archivieren.
- Leute es wegwischen können, um abzubrechen. Eine Antwort ist nicht nötig.
- Es mehr als zwei Optionen gibt. Ein Sheet hat Platz für eine Liste, und die Liste liegt in Daumenreichweite.
Wo es scheitert: bei allem, was nicht übersprungen werden darf. Ein Sheet lässt sich mit einer versehentlichen Wischgeste schließen. Eine destruktive Bestätigung, die nur in einem Sheet lebt, ist deshalb leicht verloren oder wird aus Versehen ausgelöst.
Zu viele Buttons sind ein Sheet in Verkleidung
Falsch: ein Modal
Richtig: ein Sheet
Der linke Screen ist die häufigste Verwechslung. Sechs gestapelte Buttons in einer zentrierten Box verlangen von Leuten, mitten in einer Unterbrechung ein Menü zu lesen. Keine der Optionen ist dringend, also muss nichts den Screen blockieren. Dieselben Optionen in einem Sheet lesen sich wie eine Liste, bleiben in Daumenreichweite und schließen mit einer Wischgeste.
Die Regel von Material Design ist kurz: Ein Dialog sollte höchstens zwei Aktionen enthalten. Brauchst du eine dritte, hast du ein Menü, und ein Menü gehört in ein Sheet.
Beide zusammen: aus dem Sheet löschen, im Modal bestätigen
Erst das Sheet
Dann das Modal
Die Muster sind keine Rivalen. Eine destruktive Option kann mit den anderen Aktionen in einem Sheet stehen, rot gesetzt und als Letzte platziert. Ein Tippen darauf öffnet das Modal, denn erst jetzt gibt es eine Entscheidung, die sich nicht rückgängig machen lässt. Im Sheet stöbern, im entscheidenden Moment blockieren.
Modal oder Sheet: eine Entscheidungstabelle
| Situation | Wahl | Warum |
|---|---|---|
| Ein Projekt für alle löschen | Modal | Nicht rückgängig zu machen, zwei Optionen |
| Ungespeicherte Änderungen verwerfen | Modal | Leute müssen entscheiden, bevor sie gehen |
| Auf einem geteilten Gerät abmelden | Modal | Ein Ja oder Nein, das den Zustand ändert |
| Teilen, duplizieren, verschieben, archivieren | Sheet | Optionen für das Element auf dem Screen |
| Eine Liste sortieren oder filtern | Sheet | Leute wollen sehen, wie sich die Liste dahinter ändert |
| Beim Checkout eine gespeicherte Karte wählen | Sheet | Mehr als zwei Optionen, Teil des Screens |
| Ein Foto per Kamera oder aus der Mediathek hinzufügen | Sheet | Eine Quellenwahl, leicht abzubrechen |
| Ortsdetails auf einer Karte | Sheet | Die Karte bleibt der Punkt |
| Neue Bedingungen akzeptieren, bevor es weitergeht | Modal | Die App kann ohne Antwort nicht weitermachen |
| Ein neues Feature ankündigen | Keins von beiden | Niemand muss entscheiden. Nimm ein Inline-Banner |
Wer es gut macht
Das kannst du heute noch auf deinem Handy prüfen:
- Apple Maps und Google Maps zeigen Suchergebnisse und Ortsdetails in einem Sheet über der Karte, sodass du nie die Orientierung verlierst.
- Das iOS-Share-Sheet listet jede App und Aktion für das, was du gerade ansiehst, und schließt mit einer Wischgeste.
- Das „Mehr"-Menü von Instagram bei einem Post öffnet sich als Bottom Sheet mit Optionen für genau diesen Post.
Apples Richtlinien ziehen dieselbe Linie von der anderen Seite: Alerts sind für kritische Informationen, die Leute sofort brauchen, einschließlich einer Warnung, dass eine Aktion Daten zerstören könnte, während Sheets und Action Sheets Optionen enthalten, die mit dem zusammenhängen, was Leute gerade tun.
FAQ
Wann sollte ich ein Bottom Sheet statt eines Modals verwenden?
Wenn die Optionen zum aktuellen Screen gehören, es mehr als zwei sind und niemand wählen muss, um weiterzumachen. Teilen, Sortieren, Filtern und Auswählen aus einer Liste sind Aufgaben für ein Sheet.
Wann sollte ich einen Modal-Dialog verwenden?
Wenn Leute entscheiden müssen, bevor sie weitermachen, meist weil sich die Aktion nicht rückgängig machen lässt. Beschränke ihn auf zwei Aktionen: Abbrechen und die Aktion, als Verb benannt.
Wie viele Buttons sollte ein Modal haben?
Höchstens zwei. Material Design sagt, ein Dialog sollte maximal zwei Aktionen enthalten. Brauchst du mehr, sind die Optionen ein Menü und gehören in ein Sheet.
Ist ein Bottom Sheet ein Modal?
Ein modales Bottom Sheet dimmt den Screen und muss geschlossen werden, bevor Leute den Screen wieder nutzen können, aber es lässt sich mit einer Wischgeste schließen und fragt nichts ab. Ein Dialog stellt eine Frage und wartet auf eine Antwort.
Was ist der Unterschied zwischen einem Alert und einem Action Sheet auf iOS?
Ein Alert unterbricht mit kritischen Informationen und wenigen Buttons. Ein Action Sheet steigt von unten auf, mit Optionen zu einer Aktion, die Leute gerade gestartet haben, etwa die Optionen für ein Foto.
Quellen
- Dialogs und Bottom sheets, Material Design 3.
- Alerts, Sheets und Action sheets, Apple Human Interface Guidelines.
- Zuerst veröffentlicht als Karussell auf UX Brainy.
Want your app's dialogs, sheets and every other pattern chosen and designed as one system? Our team designs app UI from the first flow to the finished components.
Get Started
