Vertikale Navigation - Konsistente Lösung für eine gute User Experience

T 07141 - 4 888 660 | E hello@becklyn.com

Vertikale Navigation – Konsistente Lösung für eine gute User Experience

Hamburger Navigation

Eine der größten Herausforderungen für Webdesigner und Entwickler stellt die Seiten-Navigation dar. Gerade bei einem responsive Webdesign ist es wichtig, dass die Navigation sowohl auf einem Smartphone, als auch auf einem Tablet oder einem Desktop-Bildschirm benutzerfreundlich und konsistent dargestellt wird.

Lange Zeit wurde die horizontale Navigation als Best Practice auserkoren, da sie sich für die bisherigen Seitenverhältnisse am besten eignete. Vertikale Menüs können im Gegensatz zu horizontalen beliebig lang werden. Letztere können immer nur so lang sein, wie es die Bildschirmbreite zulässt. Mit der Umstellung der neusten Smartphones hin zu einem immer größeren, aber dafür schmaleren Bildschirm, muss man diesen Standard neu überdenken.

Linksbündig oder rechtsbündig – das ist hier die Frage

Bei der Anordnung der vertikalen Navigation hat man die Qual der Wahl – linksbündig, rechtsbündig oder doch zentriert? Hier spielen unsere Gewohnheiten eine entscheidende Rolle. Verschiedene Untersuchungen zeigen, dass User die Navigationsleiste auf der linken Seite oder am oberen Rand einer Website vermuten. Es wurde außerdem auch ein Zusammenhang zwischen der Menüposition und dem Seitenbesuch festgestellt. Gerade beim Erstbesuch auf der Website war die Effizienz, mit der die User den Content konsumierten, deutlich höher mit einer linksbündigen Navigation. Dies wurde jedoch bei einem zweiten Besuch relativiert, aufgrund des Lerneffekts, da sich die User schnell an den Layouts angepasst haben.

Vertikale Navigation mit Fly-Outs und Icons

Bei der senkrechten Anordnung der Navigation kann der Text jedoch zum Problem werden, zum Beispiel wenn lange Wörter viel Platz beanspruchen und Zugeständnisse bei der Schriftgröße oder der Lesbarkeit gemacht werden müssen. Eine Möglichkeit dies zu umgehen, kann eine vertikale Navigation mit Icons statt Text sein. Dabei müssen die Icons leicht verständlich für den Besucher sein, um ihm die Navigation nicht unnötig zu erschweren:

Vertikale Navigation mit Icons

Quelle: https://www.wordpress.com/ (Beispiel: Icon-Menü)

Als weitere Alternative zu langen Wörtern im Menü oder zusätzlich zu der Icon-Navigation kann ein aufklappbares Fly-Out-Menü implementiert werden. Dieses Menü „fliegt“ als Overlay von links in den Bildschirm und kann beliebig viele Unterpunkte beinhalten:

Vertikale Navigation mit Fly-Out

Quelle: https://www.all-for-one.com/de (Beispiel: Hamburger-Menü & Fly-Out-Menü)

Die Verlockung dabei ist jedoch groß, nicht mehr gezielt abzuwägen, welche Menü-Punkte relevant sind, sodass man auch unwichtigere Punkte auflistet. Darauf ist auch aus SEO-Sicht zu achten, da bei einer unübersichtlichen Navigation die Nutzerfreundlichkeit rapide abnimmt.

Vorteile der vertikalen Navigation

  • Wichtige Menü-Punkte hierarchisch ganz oben angeordnet
  • Die Anzahl der Menü-Punkte ist nicht eingeschränkt und kann auch nachträglich erweitert werden
  • Above the Fold hat man mehr Platz für den Content, da er nicht durch eine horizontale Navigation nach unten verschoben wird

Nachteile der vertikalen Navigation

  • Wenn die Navigation zu lang ist, muss gescrollt werden, um alle Menü-Punkte sehen zu können
  • Wenn es zu viele aufklappbare Fenster im Fly-Out-Menü gibt, ist es für den User schwieriger präzise zum gewünschten Menü-Punkt zu navigieren
  • Man kann den Fokus schnell aus den Augen verlieren und zu viele unwichtige Menü-Punkte aufnehmen, sodass die Usability darunter leidet

Fazit: Die Navigation muss sich nicht länger verstecken

Der Trend ging in den letzten Jahren vor allem auf mobilen Endgeräten dahin, die Navigation hinter einem Hamburger-Menü zu verstecken. Aufgrund der veränderten Seitenverhältnisse bei den neusten Smartphones und im Hinblick auf die Konsistenz, ist dies nicht länger nötig. Durch die Nutzung einer vertikalen Navigation kann der User nun jederzeit alle verfügbaren Optionen sehen, was sich positiv auf die User Experience auswirkt.