Immer mehr gewinnt das vertikale Navigationskonzept an Beliebtheit. Wieso das so ist, erklären wir euch in diesem Blogpost.
Im Webdesign gibt es unterschiedliche Arten, wie man eine Navigation visualisieren kann.
Je nach technischer Gegebenheit wird hier in der Regel zwischen Mobile und Desktop unterschieden.
Bei mobilen Devices besteht die Herausforderung, dass wir besonders wenig Platz zur Verfügung haben. Auf Desktopgeräten hingegen haben wir weitaus mehr Platz, um Inhalte anzuordnen.
Darüber hinaus ist zu beachten, dass eine Website auf unterschiedlichen Formaten funktionieren muss. Mobile wird in der Regel im Hochkant-Format genutzt, während am Desktop Websites meist im Querformat aufgerufen werden.
Wie kann also das Navigationskonzept bestmöglich eingesetzt werden, sodass es sowohl auf Mobile- als auch auf Desktop-Devices optimal funktioniert?
Bei Mobile stellt sich nicht wirklich die Frage, wie die Navigation aussehen sollte. Denn hier haben wir aufgrund des feststehenden Seitenverhältnisses und des Platzmangels keine wirkliche Gestaltungsfreiheit.
Am Desktop gibt es mehrere Möglichkeiten. Die Spanne der Bildschirmauflösung zwischen kleinen Monitoren (Tablet oder Laptop) bis hin zu großen Widescreen-Monitoren ist groß und bietet der Website mal mehr, mal weniger Platz. Im Desktop-Bereich besteht mehr Freiheit zu entscheiden, wie der Viewport – also der sichtbare Bereich im Browser – optimal genutzt werden kann. Um wichtige Inhalte einer Website zu präsentieren.
Am weitesten verbreitet ist das horizontale Navigationskonzept. Doch wie sieht es mit dem vertikalen Navigationskonzept aus? Wir empfehlen diese Lösung immer häufiger. Welche Vorteile das vertikale Navigationskonzept mit sich bringt, könnt ihr hier nachlesen:
- Mehr Platz
Im Desktop-Bereich haben wir aufgrund des Widescreenformat in der Horizontalen viel Platz. Für eine bessere Usability und Lesbarkeit sollte der Inhalt der Website allerdings nicht zu sehr in die Breite gehen. Deshalb erhält der Inhalt einer Website eine maximale Breite. Dadurch entstehen ungenutzte Räume am linken und rechten Seitenrand. Dieser ungenutzte Raum kann optimal für Navigationselemente genutzt werden. Es bietet sich hier die vertikale Fläche am Seitenrand an.
2. Mobile First
Beim Einsatz eines vertikalen Navigationskonzepts können wir in der Handhabung und Visualisierung sowohl mobile als auch Desktop dasselbe vertikale Navigationskonzept einsetzen. Wir verfolgen somit bereits im Navigationskonzept den Mobile-First Ansatz. So sparen wir an Konzeptions- und Entwickleraufwand. Zudem ist das Website Script dadurch reduziert.
3. Immer sichtbar und erreichbar
Bei Desktop kann die Navigation, also Haupt- und Subnavigation, immer und zu jeder Zeit sichtbar und erreichbar gemacht werden. Und das, ohne, dass sie in der Höhe als störend empfunden wird oder zu viel Platz einnimmt.
4. Intuitiver
Last but not least: Navigationspunkte, die untereinander angeordnet sind, werden als Liste wahrgenommen. Dadurch sind sie besonders gut lesbar und intuitiv erfassbar für den User.
Wir hoffen, wir können euch mit diesen Vorteilen den Einsatz von vertikalen Navigationskonzepten schmackhaft machen.
Am Ende ist es natürlich wichtig, jeden Case individuell zu betrachten und zu bewerten. Nicht für jedes Projekt ist ein vertikales Navigationskonzept der richtige Weg, doch die zahlreichen Vorteile bringen ein großes Potential mit sich.
Vor allem bei komplexen und umfangreichen Websites sehen wir den Einsatz von vertikalen Navigationskonzepten, weil solche Websites in der Regel mehrere Navigationskonzepte beinhalten. Zusätzlich zur Haupt- und Subnavigation benötigt die Website ausreichend Platz und Aufmerksamkeit für zum Beispiel eine Ankernavigation oder auch Filtermöglichkeiten.
Bei einem vertikalen Navigationskonzept können weitere Navigationselemente über den eigentlichen Content der Website erscheinen und haben dort genügend Aufmerksamkeit für den User. Außerdem werden die weiteren Navigationselemente dem Content direkt zugeordnet.
Wie das ganze aussehen und funktionieren kann? Seht es euch bei unseren Cases an:
Libri.de
Die Navigation bietet genügend Platz für weitere Navigationselemente wie eine Suche, Kontakt usw.
hamburgmediaschool.de
Die Subnavigationselemente verteilen sich über mehrere Ebenen hinweg und sind somit allesamt einfach erreichbar.
Wiesental-Viertel.de
Neben weiterführenden Links auf eine externe Seite kann hier beispielsweise ein dekoratives Hintergrundbild eingebunden werden.