Spaces. Smartes Cloud Hosting für anspruchsvolle Webprojekte. Loslegen und Spaces testen. Von Mittwald.
Dieter Petereit 22. Februar 2018

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

Bevor du “Nein” schreist, denk min­des­tens an die neue Smartphone-Generation. Der neue Trend besteht dar­in, dass die Geräte höher, aber nicht brei­ter wer­den. Meinst du nicht, dass wir den so ent­ste­hen­den Viewport ganz anders nut­zen müs­sen? Ist das hori­zon­ta­le Menü damit weg vom Fenster?

Horizontale Navigation – ein alter Standard steht zur Disposition

Horizontale Navigation galt jah­re­lang als Best Practice. Solange man von einem Seitenverhältnis aus­ge­hen durf­te, bei dem die Breite des Browserfensters stets grö­ßer ist als des­sen Höhe, war das nicht nur sinn­voll, son­dern – Achtung! – alter­na­tiv­los. Gekoppelt mit Drop-Down-Menüs, wie wir sie aus dem Design von Desktop-Software ken­nen, erschien hori­zon­ta­le Navigation lan­ge als das Mittel der Wahl.

Der Hauptvorteil dabei war eben der, dass Position und Ausprägung kei­nen poten­zi­el­len Benutzer zum Nachdenken zwin­gen. Wer mit Windows, macOS oder Linux unter­wegs ist, kennt das hori­zon­ta­le Menü. Schon vor einem Jahrzehnt wur­de indes mit ande­ren Positionierungen expe­ri­men­tiert. Linker oder rech­ter Seitenrand in ver­ti­ka­ler Anordnung oder unten hori­zon­tal, sti­cky oder nicht – der Kreativität setzt man nicht so leicht Grenzen.

Vor allem für die rechts­sei­ti­ge ver­ti­ka­le und die unten­lie­gen­de hori­zon­ta­le Navigation gibt es gute, iden­ti­sche Gründe. Der wich­tigs­te Pro-Faktor ist die leich­te­re Erreichbarkeit der ein­zel­nen Menü-Elemente mit der Maus, zumin­dest solan­ge du Rechtshänder bist. Bei der Touchbedienung gilt glei­ches für die Erreichbarkeit mit dem Daumen der rech­ten Hand. Deshalb fin­dest du etwa unter iOS nahe­zu aus­schließ­lich unten­lie­gen­de Horizontalmenüs, die jedoch ihre ganz eige­nen Nachteile haben (Stichwort: höher, nicht brei­ter).

Schlussendlich stell­te sich in vie­len Studien ein ums ande­re Mal her­aus, dass der Mensch ein Gewohnheitstier ist, und die obe­re Horizontalposition nicht zu schla­gen ist. Lies zum Thema auch unse­ren Beitrag zu den Best Practices der Seitennavigation.

Smartphones kehren das Seitenverhältnis um

Nun aber ist die Situation eine ande­re. Gute zehn Jahre nut­zen wir jetzt Smartphones. Deren Anteil an der Webnutzung steigt wei­ter­hin kon­ti­nu­ier­lich. Und auf Geräten, deren Seitenverhältnis sich genau umge­kehrt zu dem eines Desktopgerätes ver­hält, kön­nen nahe­lie­gen­der­wei­se auch ande­re Navigationskonzepte sinn­voll wer­den.

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

Bislang gilt es als Best Practice, mit respon­si­ven Designs, bestehen­de Navigationskonzepte ab einer defi­nier­ten Auflösung umzu­bre­chen. Dabei setz­te sich das soge­nann­te Hamburger-Icon durch.

Wenn wir nun aber für mobi­le Geräte ohne­hin gezwun­gen sind, hori­zon­ta­le Navigation in ver­ti­ka­le zu wan­deln, wie­so ver­wen­den wir dann nicht durch­gän­gig die ver­ti­ka­len Varianten? Genau die­se Frage stellt sich offen­bar eine wach­sen­de Zahl Kreativer. Umsetzungen die­ses Designansatzes fin­den sich immer häu­fi­ger.

Dabei geht es gar nicht so sehr dar­um, dass Hamburger-Menü zum Standard zu erhe­ben, son­dern eher, alter­na­tiv dazu, das ver­ti­ka­le Menü zum Standard zu defi­nie­ren. In moder­ne­ren Desktop-Apps, eini­gen Systemtools, wie zum Beispiel Mail aus Windows 10, fin­det sich eben­falls der ver­ti­ka­le Menüansatz – min­des­tens als Ergänzung zur hori­zon­ta­len Menüleiste. Vielfach wird hier ver­ti­kal mit einer Piktogramm-Leiste gear­bei­tet, die ent­we­der direkt Funktionen aus­löst oder sich bei Klick auf das jewei­li­ge Icon nach rechts öff­net.

Mail aus Windows 10 setzt kon­se­quent auf ver­ti­ka­le Navigation, ergänzt um ein klei­nes hori­zon­ta­les Icon-Menü unten links. (Screenshot: D. Petereit)

Vorteile vertikaler Navigation

Aber auch dau­er­haft sicht­ba­re Seitenmenüs sehen wir immer häu­fi­ger. Das passt gut zum Material-Design-Trend oder Microsofts Fluent-Ansatz. Kachelige Grids sehen eben mit Navigationskacheln deut­lich bes­ser aus. Sie erzeu­gen mehr Aufmerksamkeit als die eher unschein­ba­ren Horizontalmenüs der Nuller Jahre.

Immerhin ist Aufmerksamkeit genau das, was Navigation braucht. Zumindest trifft das dann zu, wenn dei­ne Website so ange­legt ist, dass User sie über dei­ne – mög­lichst durch­dach­ten – Navigations-Patterns durch­strei­fen sol­len.

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

Vertikale Menüs am lin­ken Seitenrand ver­fü­gen noch über eine Reihe wei­te­rer Vorteile. Der durch­schnitt­li­che Leser schaut zuerst über den Seitenanfang und scannt dann den lin­ken Bereich. Das nennt sich F-Muster. Neben der Horizontalnavigation ent­spre­chen ver­ti­ka­le Menüs eben­so die­sem Muster. Insofern eig­nen sich ver­ti­ka­le Menüs jeden­falls nicht schlech­ter als hori­zon­ta­le.

Wenn das ver­ti­ka­le Menü nicht hin­ter einem Hamburger-Icon ver­steckt wird, bleibt es dau­er­haft sicht­bar und erfor­dert kei­nen geson­der­ten kogni­ti­ven Prozess sei­tens des Besuchers. Der bereits erwähn­te Aspekt des Scannings erlaubt die schnel­le Aufnahme der gege­be­nen Navigationsmöglichkeiten.

Zudem kann ein ver­ti­ka­les Menü nahe­zu belie­big lang wer­den, wäh­rend das hori­zon­ta­le durch die Fensterbreite begrenzt wird. Scrolling als Nutzungsschema setzt sich mehr und mehr durch. Wieso soll­ten wir das nicht für Navigationselemente nut­zen?

Nachteile vertikaler Navigation

Natürlich ist die ver­ti­ka­le Navigation nicht ohne Nachteile. Der wesent­li­che Nachteil ist aller­dings ein rein sub­jek­tiv Objektiver. Er besteht näm­lich in der Beharrlichkeit der Nutzer. Diese deut­li­che Gewohnheitspräferenz ist der wich­tigs­te Grund, war­um die ver­ti­ka­le Navigation sich nicht schon viel frü­her durch­ge­setzt hat. Beharrlichkeit ist indes nur schwer zu besei­ti­gen.

Hier ste­hen wir aller­dings aus tech­no­lo­gi­scher Perspektive jetzt vor einem Paradigmenwechsel, der genau die­se Argumentation auf den Kopf stel­len könn­te.

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

Textbasierte Navigation erweist sich als schwie­rig, weil die Verwendung mög­lichst kur­zer Wörter ange­zeigt ist, um nicht all­zu viel Platz zu ver­schwen­den. Hier ist zudem ein Kompromiss zwi­schen Lesbarkeit und Schriftgröße unum­gäng­lich. Dieser Punkt spricht deut­lich für ein Fly-Out-Menü, also eines, dass sich per Overlay von links nach rechts über den Bildschirm legt. Ein Kompromiss könn­te eine dau­er­haft sicht­ba­re Iconleiste sein.

Der prak­tisch unbe­grenz­te Platz nach unten weg, könn­te Designer und deren Kunden dazu ver­lei­ten, sich nicht mehr klar auf die Darstellung der wich­tigs­ten Navigationspfade zu fokus­sie­ren, son­dern schlicht­weg jedem noch so unwich­ti­gen Punkt ein eige­nes Navigations-Item zu spen­die­ren. Damit wäre am Ende weder dem Kunden, noch dem poten­zi­el­len Benutzer gedient.

Unter dem gestal­te­ri­schen Gesichtspunkt kommt es sehr dar­auf an, für wel­che Art von Website der Einsatz ver­ti­ka­ler Navigation in Erwägung gezo­gen wird. Online-Magazine wer­den von ver­ti­ka­ler Navigation am Desktop nicht pro­fi­tie­ren kön­nen. Da eig­net sich der Sticky-Header mit hori­zon­ta­ler Navigation weit bes­ser. Portfolio-Websites hin­ge­gen oder gene­rell Websites mit eher gerin­gem inhalt­li­chen Volumen könn­ten aller­dings durch­aus 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 eigent­lich zeigt, neben der fast schon logi­schen Repositionierung auf­grund geän­der­ter Seitenverhältnisse, ist, dass Navigation gene­rell nicht gern ver­steckt wird. Konzepte, wie das Hamburger-Menü, stel­len ledig­lich Kompromisse dar, die so lan­ge akzep­tiert wer­den, wie es kei­ne ver­nünf­ti­gen Alternativen gibt oder zu geben scheint.

Schon der popu­lä­re Sticky-Header in der Horizontalnavigation zeigt ja, dass der Besucher ver­füg­ba­re Optionen ger­ne im Blick behält. Statt den Header zu ver­ste­cken, hat sich in den letz­ten Jahren das genaue Gegenteil durch­ge­setzt. Üblich ist jetzt das dau­er­haft sicht­ba­re Mitführen der Navigation am obe­ren Bildschirmrand.

Zwar ist die bis­he­ri­ge Best Practice mit Horizontalmenü am Desktop und Vertikalmenü per Hamburger mobil durch­aus eine gang­ba­re Lösung. Echte Designer mit Anspruch wer­den jedoch stets kon­sis­ten­te Lösungen vor­zie­hen, wenn es mög­lich ist. Dass die­se Konsistenz stets auf der Basis des kleins­ten gemein­sa­men Nenners erzielt wer­den soll­te, ist klar. Eben die­ser kleins­te gemein­sa­me Nenner wan­delt sich indes zuse­hends.

Wenn wir dafür noch Beweise brau­chen, schau­en wir schlicht auf die aktu­el­len Smartphone-Flaggschiffe, etwa das Samsung Galaxy S8, das LG G6 oder das OnePlus 5T. Diese Geräte bie­ten mehr Bildschirmfläche aus­schließ­lich dadurch, dass sie die Bildschirmhöhe ver­grö­ßern und die Breite wei­test­ge­hend iden­tisch hal­ten. Diese Bauweise wird sich in 2018 flä­chen­de­ckend durch­set­zen. Verstärkt das nicht logi­scher­wei­se den Trend hin zu ver­ti­ka­ler Navigation?

Wie stehst du zur Frage der Positionierung der Seiten- oder App-Navigation? Links, rechts, oben, unten – wel­che Position ist die bes­te?

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.

5 Kommentare

  1. Das hori­zon­ta­le Menü war auch mal eine Neuheit. Vorher wur­de haupt­säch­lich das ver­ti­ka­le Menü ver­wen­det. Siehe Webseiten aus den Anfangszeiten der Webseitengestaltung, als noch Frames und Tabellen als Bausteine dien­ten. Zudem bestä­tig­ten die dama­li­gen Untersuchungen über den Vorteil im Bezug zum Nutzerverhalten. Was mei­ner Meinung nach, schon damals auf Gewohnheit zurück­zu­füh­ren war. Heute hat der User sich ledig­lich an das hori­zon­ta­le Menü gewohnt. Beim heu­ti­gen Programmieren von Responsive Webdesign ist eine Anpassung per CSS mög­lich. Was ich ger­ne nut­ze, weil Usability stets im Vordergrund steht.

  2. Die Argumentation kann ich nur teil­wei­se nach­voll­zie­hen. Gerade bei mobi­len Endgeräten ist die Breite ein kost­ba­res Gut, dem eine dau­er­haft sich­ba­re ver­ti­ka­le Navigation ent­ge­gen­steht, sei es auch nur eine mit Piktogrammen. Man kann die­sen Weg sicher­lich gehen, und teil­wei­se wird es hier auch sinn­vol­le Einsatzmöglichkeiten für geben, aber ich glau­be nicht, dass im mobi­len Bereich aus genann­ten Gründen das Hamburger-Menü zuguns­ten eines dau­er­haft sicht­ba­ren ver­ti­ka­len Menüs ver­schwin­den wird.

  3. Ich habe noch nie auf eine hori­zon­ta­le Navigation gesetzt. Leider gibt es für WordPress nicht vie­le schö­ne Themes mit einer ver­ti­ka­len Navigation.

  4. Ich glau­be, wich­ti­ger als die Position der Navigation ist die Verständlichkeit und die Verfügbarkeit. Schließlich dient die Navigation ja haupt­säch­lich dem Zweck, dass sich Nutzer auf einer Webseite zurecht­fin­den sol­len (des­we­gen auch sti­cky). Das bedeu­tet, man muss Dinge wei­ter­hin sinn­voll clus­tern, sor­tie­ren und anord­nen. Egal, wo die Navigation ange­zeigt wird. Vor allem wenn man einen ande­ren Trend berück­sich­tig: Die Landingpages! Diese sind meist gar nicht in der Navigation ein­ge­bun­den oder haben sogar eine völ­lig neue URL. Unternehmen den­ken immer mehr in Sales Funnels, wo Nutzer statt auf der Hauptseite, auf einer Landingpage zu einem Thema lan­den, was einen ani­mie­ren soll, ent­we­der wei­te­re Seiten anzu­kli­cken (fürs SEO) oder ein kos­ten­frei­es Produkt zu abno­nie­ren (fürs Email-Marketing), um dann irgend­wann etwas zu kau­fen. Die Webseite wan­delt sich somit ohne­hin stark vom rei­nen Informationsdisplay – hin­zu inter­ak­ti­ver Kommunikation mit dem Besucher und einer geführ­ten Nutzer-Experience. Und bestimm­te Sachen haben sich noch nie durch­ge­setzt: Endlos Naviationen, wo alles ohne Conzept hin­ter­ein­an­der drin steht oder Webseiten, wo ein­fach mal alles in end­lo­sen Texten geschrie­ben wird. Inhalte ver­nünf­tig auf­be­rei­ten, den Nutzer an die Hand zu neh­men und ihm/ihr das in der rich­ti­gen Reihenfolge zu zei­gen, was man als Anbieter rich­tig fin­det und ihn dann zum Kauf zu ani­mie­ren, wird wei­ter­hin DIE Herausforderung schlecht­hin für Webseitenabieter und Designer sein

Schreibe einen Kommentar

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