Bottom Sheet
Ein Bottom Sheet ist ein Teil der Benutzeroberfläche und kann zusätzliche Informationen auf einem Smartphone-Display anzeigen. Bottom Sheets werden im unteren Bereich des Bildschirms verankert und können mit einem Fingertipp oder Wischen nach oben aufgerufen werden. Diese Bildschirm-Layer bieten Entwicklern zusätzliche Möglichkeiten, um den Bildschirm eines mobilen Endgeräts platzsparend mit weiteren Funktionen zu erweitern. Bottom Sheets können für Android oder iOS programmiert werden.
Hintergrund
Im Vergleich zu den Möglichkeiten, mit einer Tastatur und Maus sind die Eingabemöglichkeiten mit einem Touchdisplay auf einem Smartphone begrenzt. Entwickler stoßen vor allem beim Design von Navigationsmenüs an ihre Grenzen. Neben dem etablierten Hamburger-Menü gibt es noch weitere Möglichkeiten wie Pop-Ups oder Drop-Down-Menüs, um mobilen Nutzern beim Navigieren zu helfen. Eine mögliche Lösung bieten Bottom Sheets.
Eigenschaften
Bottom Sheets lassen sich so in eine mobile Website oder App integrieren, dass der Nutzer die Webanwendung bequem mit dem Daumen bedienen kann. Insbesondere bei größeren Displays haben Bottom Sheets Vorteile gegenüber anderen Navigationsinstrumenten.
Darüber hinaus müssen mit Bottom Sheets keine Bildschirmansichten gewechselt werden, denn die Layer ermöglichen es, flexibel vertikal zu scrollen oder zusätzlichen Content durch einen horizontalen Scroll abzurufen.
Der ursprüngliche Content bleibt im Hintergrund als Anker bestehen. Durch ein einfaches Swipen kann der Nutzer jederzeit wieder dorthin zurückkehren.
Integration in das Webdesign
Grundsätzlich lassen sich zwei Arten von Bottom Sheets unterscheiden:
- Standard Bottom Sheets: Diese Layer können unabhängig vom primären Bildschirminhalt bedient und platziert werden. Bottom Sheets dieser Kategorie gibt es in drei Ausführungen. **Collapsed: In diesem Fall wird ein Teil des zusätzlichen Inhalts bereits angezeigt und der Nutzer wischt ihn nach oben.
- Expanded: In diesem Status bedeckt das Bottom Sheet die gesamte Screenfläche, wenn es ausgeklappt ist.
- Hidden: Dieser Status bedeutet, dass das Bottom Sheet standardmäßig versteckt wird, wenn der User nach unten wischt.
- Modales Bottom Sheet: In diesem Status blockiert das Bottom Sheet den primären Screen und muss aktiv nach unten gewischt oder angetippt werden. Das Layout des Bottom Sheets ist in diesem Fall meist semitransparent, damit der User sehen kann, was sich dahinter verbirgt.
Verwendungsmöglichkeiten für Bottom Sheets
Bottom Sheets werden bereits von vielen Anwendungen und mobilen Websites für folgende Zwecke eingesetzt:
- zusätzliches Auswahlmenü
- Warenkorb
- Bezahlvorgang
- Eingabe von Kundendaten
- Ergänzung mit Zusatzinformationen
- Information über aktuelle Angebote
- Anmeldungsformular für Newsletter
Nutzen für UX
Bottom Sheets bieten die Möglichkeit, die Funktionalität einer Website zu erhöhen, ohne dass dafür viel Platz auf dem Touchscreen erforderlich ist. Die Layer können sogar durch ein Swipen ganz verschwinden.
Nutzer können mit Bottom Sheets noch stärker mit einer mobilen Website oder App interagieren. Die Elemente lassen sich bei Bedarf wieder entfernen, sodass sie die Usability der gesamten Seite nicht beeinträchtigen, sondern fördern.
Einzelnachweise