Die Hamburger Top Navigation und die Macht der Gewohnheit

Hamburger ist einer der vielen Namen für die drei schmalen Striche, in denen wir seit dem Aufkommen von Smartphones das Hauptmenü auf Webseiten verstecken. Tatsächlich gibt es das Hamburger Menu-Icon im UI Design schon seit den 80er Jahren und wurde auch in Versionen von Windows und DOS verwendet. So richtig zu gebrauchen war es allerdings erst mit unserem plötzlichen alltäglichen Gebrauch von iPhone und co.

Klar, das klassische Desktop-Menü ließ sich schließlich nicht auf die kleinen Screens der Websites auf Smartphones pressen, nur mit viel Scrollerei. Es hat sich ziemlich schnell etabliert, das Menü also im Burger zu verstecken und aufklappbar zu machen. Ebenso nahezu selbstverständlich ist es, das Menü oben links oder oben rechts einzusetzen.

Smartphones sind mittlerweile viel zu groß

UX/UI-Designer wissen schon seit langem genau, dass wir unsere Smartphones hauptsächlich mit unseren Daumen bedienen und die Nutzung dahingehend optimiert werden muss. Das schlug sich bereits in den frühesten Mobile Apps nieder: das Menü ist unten. Warum ist das noch relevant? Weil unsere Daumen schon längst nichtmehr an die oberen Kanten der Smartphones gelangen. Josh Clark beschrieb 2015 in seinem Artikel über die Bedienung von mobilen Endgeräten, dass es verschiedene Bereiche auf dem Screen gibt: Bereiche, die gut oder schlecht erreichbar sind und solche, die dazwischen liegen. Allerdings wuchsen die Screens immer weiter, wodurch sich diese Bereiche jetzt noch extremer definieren lassen.

Bereiche, die auf dem Smartphone bequem mit dem Daumen zu bedienen sind.
Daumenbereiche für Rechtshänder. Für Linkshänder ist dies spiegelverkehrt.

Es ist rein motorisch also schon eine schlechte Idee, Menüs auf Smartphones nach oben zu packen, weil wir da gar nichtmehr ohne Probleme hinkommen. Im Trend liegen schließlich große Displays und das wird sich, so denke ich, auch nicht ändern.

Die Hamburger Navigation beeinträchtigt die User Experience

In dieser Studie über Hamburger Menus und versteckte Navigationen kam heraus, dass eben dieses Verstecken von Informationen zu deutlich weniger Interaktionen führt. Zudem dauert der Weg zum Ziel der Interaktion länger und ist schwerer zu verstehen. Nur 57% der User nutzten eine versteckte Navigation, während 86% dem Angebot des Menüs eher folgten, wenn Mischformen von Navigationen verwendet wurden und die Inhalte nicht versteckt bzw. teilweise versteckt wurden.

Das Hamburger Menu ist im Allgemeinen sehr umstritten, wie ihr hier detailliert nachlesen könnt:

App Design macht es vor: Die Bottom Navigation

Die Bottom Navigation ist eigentlich schon ein alter Hut. Apps nutzen diese, wie gesagt, schon seit dem Beginn der Smartphone-Ära. Warum sich das noch nicht auf das Web Design übertragen hat, ist mir ein Rätsel.

Screenshot von Instagram: Tap Bar Navigation
Beispiel Instagram: Hier wird unten eine Tap Bar Navigation verwendet. Gleichzeitig gibt es oben noch den Burger.

Löst die Tap Bar Navigation die Probleme?

Alles zeigt doch in diese Richtung, richtig? Das Problem ist leider, dass Apps nur eine Ebene der Navigation haben, während Websites oftmals bis zu drei oder vier verschachtelte Ebenen haben. Also müssen wir hier weitere Modifikationen vornehmen.

Erste Schritte: die Bottom Navigation im Web Design

Probieren wir es doch mal aus: Das Hamburger Menu wandert nach unten und kommt somit endlich in einen bequemen Daumenbereich hinein. Das Logo würde ich dennoch oben belassen, da wir schließlich trotz allem weiterhin von oben nach unten lesen. Das Logo gibt uns immerhin die Info, um was es auf der Website eigentlich geht.

Mobile Screen einer Website für einen Burger-Lieferdienst: Hamburger Menu standardmäßig oben rechts
Standard: Das Burger-Menü ist oben rechts.
Mobile Screen einer Website für einen Burger-Lieferdienst: Hamburger Menu in der Bottom Bar
Neu: Der Burger ist jetzt unten. Der Logobereich kann dadurch kleiner werden.

Bei großen Overlay Menus, die sich beim Klick auf die Bottom Navigation öffnen, muss gescrollt werden. Dabei ist es wichtig, dass wir einen scrollbaren Bereich definieren und die Hauptelemente immer sichtbar stehen lassen. Die Menüliste kann also gescrollt und das Menü stets geschlossen werden.

Einige Browser und Betriebssysteme nutzen bereits selbst eine Bottom Navigation. Es ist hierbei sehr wichtig, dass wir genug Platz einplanen, damit sich unser Website Menü ausreichend vom Meta-Menü der jeweiligen Umgebung abhebt.

Mobile Screen einer Website für einen Burger-Lieferdienst: Hamburger Menu in der Bottom Bar, darunter Systemnavigation des Geräts
Nicht vergessen: Unter unserer Navigation gibt es noch die Systemnavigation des Geräts oder des Browsers.

Aber werden Nutzer durch die Bottom Navigation gestört?

Der Satz, den ich im Design-Studium bezüglich Apps und Websites am meisten gehört habe ist, dass Nutzer an das UI von Websites gewöhnt sind und diese Design Patterns auch erwarten (siehe dazu Jakob’s Law). Aufgrund der Erfahrung der Nutzer, in der sie immer wieder mit demselben Menü oben-rechts konfrontiert wurden, lässt sich per se schwer dagegen argumentieren.

Nunja, man könnte allerdings sagen, dass die Nutzer auch Apps kennen und diese Navigationsart bereits dort kennengelernt haben. Zudem wissen wir mittlerweile, durch Analyse von Bounce-Rates bei Websitebesuchen, dass Nutzer vor allem die Zeit wertschätzen und diese nicht verschwenden wollen. Die Zeit, in der die Nutzer zu ihrem Ziel auf einer Website kommen können, ist eine der ausschlaggebendsten Kennzahlen im Web Design. Das hängt natürlich auch mit der Distanz zwischen haptischem Ausgangspunkt und Ziel zusammen (siehe dazu Fitt’s Law). Nach Fitt’s Law hat jede Interaktion mit einem UI einen Kostenfaktor, den man z.B. bei zu großen Distanzen einfach nicht aufbringen möchte und die Interaktion erst gar nicht eingeht.

Wie müsste eine gute Bottom Navigation im Web aussehen?

Fassen wir also zusammen: Wie können wir eine funktionierende, gut verständliche Version einer Bottom Hamburger Navigation bauen, die ein positives Nutzungserlebnis hervorruft?

Wir können durchaus in die Richtung der Bottom Tap Bar Navigation denken und diese erweitern:

Alles wichtige kommt nach unten

Wir platzieren alle wichtigen Interaktionsbuttons, wie z.B. das Logo, den Kontakt-Button und die Suche in eine Tap Bar Navigation. Das Logo würde ich eigentlich, wie bereits erwähnt, eher oben lassen, allerdings ist es auch gleichzeitig der Home-Button und folglich eine wichtige Interaktion. Vielleicht gibt es hier eine Lösung, bei der wir das Logo oben belassen und unten einen extra Home-Button anbieten. Ich bleibe an dieser Stelle mal traditionell.

Der Hamburger gesellt sich dazu

Das Burger Menu bleibt erhalten und kommt direkt neben unsere wichtigsten Interaktions-Buttons. Als herausstechenste UI-Elemente im Menü sollten wir das Element darstellen, das die Nutzer zum Ziel führt (was schließlich auch unser Interesse ist). Bei rein informativen Seiten wäre das das Hamburger Menü selbst. Bei Lieferdiensten beispielsweise, drängen wir die Nutzer dorthin, wo sie bestellen können.

Mobile Screen einer Website für einen Burger-Lieferdienst: Tap Bar mit Hamburger Menu in der Bottom Bar
Unser Ziel im Fokus: Los Nutzer, bestell was!

Die Menüliste als Overlay

Der Inhalt des Menüs bleibt, eigentlich wie bisher auch, ein Overlay, das bei großen Menüs auch scrollbar sein muss. Hierbei sollten wir unbedingt die Ankerpunkte im UI im Screen behalten: Das Logo (Home-Link), der Button zum Schließen des Menüs und auch die Social Media Icons sollten immer sichtbar bleiben. Denkbar wäre dies auch für die Suche, einen Kontakt-Button oder den Login-Button.

Wichtig dabei ist es, die Menüpunkte so anzuordnen, dass wir diese mit dem Daumen ebenfalls gut bedienen können. Das Menü sollte also direkt über der Tap Bar Navigation ansetzen, und je nach Größe nach oben wachsen.

Mobile Screen einer Website für einen Burger-Lieferdienst: Hamburger Menu in der Bottom Bar, Overlay Menu
Das Overlay-Menü orientiert sich gestalterisch von unten nach oben.

Die Navigation hört nicht über der Tap Bar auf

Gibt es weitere essenziell wichtige Navigationselemente, die wir nach unten packen können? Ein Beispiel hierfür sind Suchfelder bei Lieferdiensten, in denen wir unsere Adresse eingeben müssen. Das ist nämlich in dem Fall die Hauptinteraktion, über die alles weitere abgewickelt wird und so wichtig, dass es nach unten kommen sollte. Falls wir solche Elemente haben, auf jeden Fall auch in die bequeme Daumenzone packen und direkt über die Bottom Navigation stellen!

Mobile Screen einer Website für einen Burger-Lieferdienst: Tap Bar mit Hamburger Menu in der Bottom Bar
Das Suchfeld ist in diesem Beispiel zentral, sollte also leicht erreichbar sein!

Die Alternative: Bottom Navigation à là Material Design

Da die Tap Bar ihren Ursprung eher bei den Apple UIs der iPhones hat, musste Google natürlich mit ihrer Alternative im Material Design dagegenhalten. Bei dieser Variante wird deutlich mehr Platz gespart, da wir statt der relativ großen Tap Bar einen extrem auffälligen und auffordernden Button einsetzen.

Floating Action Buttons können hierbei auf viele kreative Arten eingesetzt werden. Dabei werden ebenfalls Icons eingesetzt, um den Sinn des jeweiligen Links und die Verortung auf der Website bzw. in der App klarzumachen.

Mobile Screen einer Website für einen Burger-Lieferdienst: Material Design Menu
Drück mich! Das Menü schreit förmlich.
Mobile Screen einer Website für einen Burger-Lieferdienst: Material Design Overlay Menu
Sehr übersichtlich, aber nur auf einer Ebene.

Aber auch hier gibt es ein Problem, das wir bereits kennen: das Menü wird versteckt. Und noch schlimmer: auch hier ist nur eine Ebene der Navigation möglich, allerdings kann man hier mit genug kreativer Energie bestimmt auch mehrere Ebenen unterbringen.

Fazit

Ich denke, dass bei diesem Thema ein Umdenken stattfinden muss. Es macht für mich keinen Sinn, die Gewohnheit an Platzierungen von Navigationsmenüs über die haptische Verwendung via Daumen am Gerät des Users zu stellen. Smartphones sind manchmal extrem unpraktisch, vor allem wegen solchen Kleinigkeiten. In den nächsten Projekten werde ich diese Problematik auf jeden Fall mit einbeziehen. Irgendwann gewöhnt sich die Menschheit sicher auch an eine Bottom Navigation im Web Design 😊.

Neueste Artikel
Kommentare

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.