Dieter Petereit 22. Februar 2018

Navigationsdesign: Ist das vertikale Menü die neue Best Practice?

Bevor du “Nein” schreist, denk mindestens an die neue Smartphone-Generation. Der neue Trend besteht darin, dass die Geräte höher, aber nicht breiter werden. Meinst du nicht, dass wir den so entstehenden Viewport ganz anders nutzen müssen? Ist das horizontale Menü damit weg vom Fenster?

Horizontale Navigation – ein alter Standard steht zur Disposition

Horizontale Navigation galt jahrelang als Best Practice. Solange man von einem Seitenverhältnis ausgehen durfte, bei dem die Breite des Browserfensters stets größer ist als dessen Höhe, war das nicht nur sinnvoll, sondern – Achtung! – alternativlos. Gekoppelt mit Drop-Down-Menüs, wie wir sie aus dem Design von Desktop-Software kennen, erschien horizontale Navigation lange als das Mittel der Wahl.

Der Hauptvorteil dabei war eben der, dass Position und Ausprägung keinen potenziellen Benutzer zum Nachdenken zwingen. Wer mit Windows, macOS oder Linux unterwegs ist, kennt das horizontale Menü. Schon vor einem Jahrzehnt wurde indes mit anderen Positionierungen experimentiert. Linker oder rechter Seitenrand in vertikaler Anordnung oder unten horizontal, sticky oder nicht – der Kreativität setzt man nicht so leicht Grenzen.

Vor allem für die rechtsseitige vertikale und die untenliegende horizontale Navigation gibt es gute, identische Gründe. Der wichtigste Pro-Faktor ist die leichtere Erreichbarkeit der einzelnen Menü-Elemente mit der Maus, zumindest solange du Rechtshänder bist. Bei der Touchbedienung gilt gleiches für die Erreichbarkeit mit dem Daumen der rechten Hand. Deshalb findest du etwa unter iOS nahezu ausschließlich untenliegende Horizontalmenüs, die jedoch ihre ganz eigenen Nachteile haben (Stichwort: höher, nicht breiter).

Schlussendlich stellte sich in vielen Studien ein ums andere Mal heraus, dass der Mensch ein Gewohnheitstier ist, und die obere Horizontalposition nicht zu schlagen ist. Lies zum Thema auch unseren Beitrag zu den Best Practices der Seitennavigation.

Smartphones kehren das Seitenverhältnis um

Nun aber ist die Situation eine andere. Gute zehn Jahre nutzen wir jetzt Smartphones. Deren Anteil an der Webnutzung steigt weiterhin kontinuierlich. Und auf Geräten, deren Seitenverhältnis sich genau umgekehrt zu dem eines Desktopgerätes verhält, können naheliegenderweise auch andere Navigationskonzepte sinnvoll werden.

(Website: Oxford House / Screenshot: D. Petereit)

Bislang gilt es als Best Practice, mit responsiven Designs, bestehende Navigationskonzepte ab einer definierten Auflösung umzubrechen. Dabei setzte sich das sogenannte Hamburger-Icon durch.

Wenn wir nun aber für mobile Geräte ohnehin gezwungen sind, horizontale Navigation in vertikale zu wandeln, wieso verwenden wir dann nicht durchgängig die vertikalen Varianten? Genau diese Frage stellt sich offenbar eine wachsende Zahl Kreativer. Umsetzungen dieses Designansatzes finden sich immer häufiger.

Dabei geht es gar nicht so sehr darum, dass Hamburger-Menü zum Standard zu erheben, sondern eher, alternativ dazu, das vertikale Menü zum Standard zu definieren. In moderneren Desktop-Apps, einigen Systemtools, wie zum Beispiel Mail aus Windows 10, findet sich ebenfalls der vertikale Menüansatz – mindestens als Ergänzung zur horizontalen Menüleiste. Vielfach wird hier vertikal mit einer Piktogramm-Leiste gearbeitet, die entweder direkt Funktionen auslöst oder sich bei Klick auf das jeweilige Icon nach rechts öffnet.

Mail aus Windows 10 setzt konsequent auf vertikale Navigation, ergänzt um ein kleines horizontales Icon-Menü unten links. (Screenshot: D. Petereit)

Vorteile vertikaler Navigation

Aber auch dauerhaft sichtbare Seitenmenüs sehen wir immer häufiger. Das passt gut zum Material-Design-Trend oder Microsofts Fluent-Ansatz. Kachelige Grids sehen eben mit Navigationskacheln deutlich besser aus. Sie erzeugen mehr Aufmerksamkeit als die eher unscheinbaren Horizontalmenüs der Nuller Jahre.

Immerhin ist Aufmerksamkeit genau das, was Navigation braucht. Zumindest trifft das dann zu, wenn deine Website so angelegt ist, dass User sie über deine – möglichst durchdachten – Navigations-Patterns durchstreifen sollen.

(Website: European Music Incubator / Screenshot: D. Petereit)

Vertikale Menüs am linken Seitenrand verfügen noch über eine Reihe weiterer Vorteile. Der durchschnittliche Leser schaut zuerst über den Seitenanfang und scannt dann den linken Bereich. Das nennt sich F-Muster. Neben der Horizontalnavigation entsprechen vertikale Menüs ebenso diesem Muster. Insofern eignen sich vertikale Menüs jedenfalls nicht schlechter als horizontale.

Wenn das vertikale Menü nicht hinter einem Hamburger-Icon versteckt wird, bleibt es dauerhaft sichtbar und erfordert keinen gesonderten kognitiven Prozess seitens des Besuchers. Der bereits erwähnte Aspekt des Scannings erlaubt die schnelle Aufnahme der gegebenen Navigationsmöglichkeiten.

Zudem kann ein vertikales Menü nahezu beliebig lang werden, während das horizontale durch die Fensterbreite begrenzt wird. Scrolling als Nutzungsschema setzt sich mehr und mehr durch. Wieso sollten wir das nicht für Navigationselemente nutzen?

Nachteile vertikaler Navigation

Natürlich ist die vertikale Navigation nicht ohne Nachteile. Der wesentliche Nachteil ist allerdings ein rein subjektiv Objektiver. Er besteht nämlich in der Beharrlichkeit der Nutzer. Diese deutliche Gewohnheitspräferenz ist der wichtigste Grund, warum die vertikale Navigation sich nicht schon viel früher durchgesetzt hat. Beharrlichkeit ist indes nur schwer zu beseitigen.

Hier stehen wir allerdings aus technologischer Perspektive jetzt vor einem Paradigmenwechsel, der genau diese Argumentation auf den Kopf stellen könnte.

(Website: Studio Paradise / Screenshot: D. Petereit)

Textbasierte Navigation erweist sich als schwierig, weil die Verwendung möglichst kurzer Wörter angezeigt ist, um nicht allzu viel Platz zu verschwenden. Hier ist zudem ein Kompromiss zwischen Lesbarkeit und Schriftgröße unumgänglich. Dieser Punkt spricht deutlich für ein Fly-Out-Menü, also eines, dass sich per Overlay von links nach rechts über den Bildschirm legt. Ein Kompromiss könnte eine dauerhaft sichtbare Iconleiste sein.

Der praktisch unbegrenzte Platz nach unten weg, könnte Designer und deren Kunden dazu verleiten, sich nicht mehr klar auf die Darstellung der wichtigsten Navigationspfade zu fokussieren, sondern schlichtweg jedem noch so unwichtigen Punkt ein eigenes Navigations-Item zu spendieren. Damit wäre am Ende weder dem Kunden, noch dem potenziellen Benutzer gedient.

Unter dem gestalterischen Gesichtspunkt kommt es sehr darauf an, für welche Art von Website der Einsatz vertikaler Navigation in Erwägung gezogen wird. Online-Magazine werden von vertikaler Navigation am Desktop nicht profitieren können. Da eignet sich der Sticky-Header mit horizontaler Navigation weit besser. Portfolio-Websites hingegen oder generell Websites mit eher geringem inhaltlichen Volumen könnten allerdings durchaus mit dem Trend gehen.

Dieser Menüstil war in den Neunzigern schon mal in. (Website: Artifact Property / Screenshot: D. Petereit)

Fazit: Navigation will gesehen werden

Was der Trend eigentlich zeigt, neben der fast schon logischen Repositionierung aufgrund geänderter Seitenverhältnisse, ist, dass Navigation generell nicht gern versteckt wird. Konzepte, wie das Hamburger-Menü, stellen lediglich Kompromisse dar, die so lange akzeptiert werden, wie es keine vernünftigen Alternativen gibt oder zu geben scheint.

Schon der populäre Sticky-Header in der Horizontalnavigation zeigt ja, dass der Besucher verfügbare Optionen gerne im Blick behält. Statt den Header zu verstecken, hat sich in den letzten Jahren das genaue Gegenteil durchgesetzt. Üblich ist jetzt das dauerhaft sichtbare Mitführen der Navigation am oberen Bildschirmrand.

Zwar ist die bisherige Best Practice mit Horizontalmenü am Desktop und Vertikalmenü per Hamburger mobil durchaus eine gangbare Lösung. Echte Designer mit Anspruch werden jedoch stets konsistente Lösungen vorziehen, wenn es möglich ist. Dass diese Konsistenz stets auf der Basis des kleinsten gemeinsamen Nenners erzielt werden sollte, ist klar. Eben dieser kleinste gemeinsame Nenner wandelt sich indes zusehends.

Wenn wir dafür noch Beweise brauchen, schauen wir schlicht auf die aktuellen Smartphone-Flaggschiffe, etwa das Samsung Galaxy S8, das LG G6 oder das OnePlus 5T. Diese Geräte bieten mehr Bildschirmfläche ausschließlich dadurch, dass sie die Bildschirmhöhe vergrößern und die Breite weitestgehend identisch halten. Diese Bauweise wird sich in 2018 flächendeckend durchsetzen. Verstärkt das nicht logischerweise den Trend hin zu vertikaler Navigation?

Wie stehst du zur Frage der Positionierung der Seiten- oder App-Navigation? Links, rechts, oben, unten – welche Position ist die beste?

Dieter Petereit

Dieter Petereit

ist seit 1994 im Netz unterwegs, aber bereits seit über 30 Jahren in der IT daheim. Seit Anfang des neuen Jahrtausends schreibt er für diverse Medien, hauptsächlich zu den Themenfeldern Technik und Design. Man findet ihn auch auf Twitter und Google+.
Dr. Webs exklusiver Newsletter
Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

5 Kommentare

  1. Das horizontale Menü war auch mal eine Neuheit. Vorher wurde hauptsächlich das vertikale Menü verwendet. Siehe Webseiten aus den Anfangszeiten der Webseitengestaltung, als noch Frames und Tabellen als Bausteine dienten. Zudem bestätigten die damaligen Untersuchungen über den Vorteil im Bezug zum Nutzerverhalten. Was meiner Meinung nach, schon damals auf Gewohnheit zurückzuführen war. Heute hat der User sich lediglich an das horizontale Menü gewohnt. Beim heutigen Programmieren von Responsive Webdesign ist eine Anpassung per CSS möglich. Was ich gerne nutze, weil Usability stets im Vordergrund steht.

  2. Die Argumentation kann ich nur teilweise nachvollziehen. Gerade bei mobilen Endgeräten ist die Breite ein kostbares Gut, dem eine dauerhaft sichbare vertikale Navigation entgegensteht, sei es auch nur eine mit Piktogrammen. Man kann diesen Weg sicherlich gehen, und teilweise wird es hier auch sinnvolle Einsatzmöglichkeiten für geben, aber ich glaube nicht, dass im mobilen Bereich aus genannten Gründen das Hamburger-Menü zugunsten eines dauerhaft sichtbaren vertikalen Menüs verschwinden wird.

  3. Ich habe noch nie auf eine horizontale Navigation gesetzt. Leider gibt es für WordPress nicht viele schöne Themes mit einer vertikalen Navigation.

  4. Ich glaube, wichtiger als die Position der Navigation ist die Verständlichkeit und die Verfügbarkeit. Schließlich dient die Navigation ja hauptsächlich dem Zweck, dass sich Nutzer auf einer Webseite zurechtfinden sollen (deswegen auch sticky). Das bedeutet, man muss Dinge weiterhin sinnvoll clustern, sortieren und anordnen. Egal, wo die Navigation angezeigt wird. Vor allem wenn man einen anderen Trend berücksichtig: Die Landingpages! Diese sind meist gar nicht in der Navigation eingebunden oder haben sogar eine völlig neue URL. Unternehmen denken immer mehr in Sales Funnels, wo Nutzer statt auf der Hauptseite, auf einer Landingpage zu einem Thema landen, was einen animieren soll, entweder weitere Seiten anzuklicken (fürs SEO) oder ein kostenfreies Produkt zu abnonieren (fürs Email-Marketing), um dann irgendwann etwas zu kaufen. Die Webseite wandelt sich somit ohnehin stark vom reinen Informationsdisplay – hinzu interaktiver Kommunikation mit dem Besucher und einer geführten Nutzer-Experience. Und bestimmte Sachen haben sich noch nie durchgesetzt: Endlos Naviationen, wo alles ohne Conzept hintereinander drin steht oder Webseiten, wo einfach mal alles in endlosen Texten geschrieben wird. Inhalte vernünftig aufbereiten, den Nutzer an die Hand zu nehmen und ihm/ihr das in der richtigen Reihenfolge zu zeigen, was man als Anbieter richtig findet und ihn dann zum Kauf zu animieren, wird weiterhin DIE Herausforderung schlechthin für Webseitenabieter und Designer sein

Schreibe einen Kommentar zu Dieter Petereit Antworten abbrechen

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

Kennst du schon unseren Newsletter?

Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.