Scrollytelling – immersiver Web Design Trend mit...
20. Januar 2021
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.
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.
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.
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.
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.
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.
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!
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.
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 😊.