Ein Bottom Sheet ist eine Bedienfläche, die vom unteren Bildschirmrand über den Inhalt fährt und dort stehen bleibt, bis der Besucher sie schließt. Das Muster stammt aus dem App-Bereich und ist mit dem Telefon ins Web gewandert. Sein Vorteil liegt in der Position: Den unteren Rand erreicht der Daumen bei einhändiger Bedienung ohne Umgreifen.
- Bottom Sheet
Bedienfläche, die vom unteren Bildschirmrand über den Seiteninhalt fährt und dort in Reichweite des Daumens stehen bleibt.
Beispiel: „Die Filter öffnen sich auf dem Telefon als Bottom Sheet und nehmen erst einmal nur die untere Hälfte ein.“Auch: Sheet. Apple nennt die Höhenstufen, in die ein Sheet einrasten kann, Detents; im Material Design heißt der Griff an der Oberkante Drag Handle.
Gegenbegriff: Das klassische Modal sitzt in der Bildschirmmitte, hat eine feste Höhe und wird über ein Kreuz geschlossen. Das Bottom Sheet klebt am unteren Rand und kann mehrere Höhen einnehmen.
Woher das Muster kommt
Google hat Bottom Sheets mit dem Material Design in Android verankert und unterscheidet zwei Varianten. Das modale Bottom Sheet legt einen Scrim über den restlichen Inhalt und sperrt ihn für die Bedienung, das Standard-Bottom-Sheet verzichtet darauf und bleibt neben dem Inhalt benutzbar. Apple kennt dasselbe Prinzip als Sheet mit Detents, das sich von einer halben auf die volle Höhe ziehen lässt.
Im Web gibt es dafür kein eigenes Element. Gebaut wird ein Bottom Sheet aus einem dialog-Element und einer Transformation, die es von unten hereinfährt. Auf breiten Bildschirmen tritt meist wieder das mittige Modal an seine Stelle.
Der Unterschied zum Modal
Die Grenze verläuft an der Position und an der Höhe. Ein Modal erscheint in der Mitte und verlangt eine Entscheidung, bevor es weitergeht. Ein Bottom Sheet kommt von unten, lässt den oberen Teil der Seite oft sichtbar und kann in mehreren Stufen einrasten, vom schmalen Streifen bis zur vollen Bildschirmhöhe. Diese Zwischenstufen sind der eigentliche Unterschied, weil der Besucher selbst bestimmt, wie viel Platz das Panel bekommt.
Für die Auswahl heißt das: Eine Rückfrage, die ohne Antwort nicht weitergeht, gehört ins Modal. Filter, Sortierung oder eine Detailansicht, die neben dem Inhalt Sinn ergibt, passen ins Bottom Sheet.
Worauf es beim Bauen ankommt
Zwei Punkte entscheiden über die Qualität. Der erste ist der Fokus: Ein modales Bottom Sheet muss den Tastaturfokus übernehmen, ihn im Panel halten und beim Schließen an die auslösende Schaltfläche zurückgeben. Das dialog-Element bringt dieses Verhalten samt Escape-Taste mit, sobald es als Modal geöffnet wird.
Der zweite Punkt ist der untere Rand. Auf Telefonen mit Home-Indikator liegt dort die Safe Area, und ohne zusätzliche Polsterung rutscht die unterste Schaltfläche unter die Systemleiste. Weil sich ein Bottom Sheet üblicherweise nach unten wegwischen lässt, braucht es nach Erfolgskriterium 2.5.1 der WCAG zusätzlich eine Schließen-Schaltfläche.