PAGE online

Navigationskonzepte: Wo geht’s lang?

Vor allem der begrenzte Platz auf den Screens mobiler Devices hat dem Hamburger-Icon Vorschub geleis­tet – inzwischen ist allerdings klar, dass es nicht zur Universallösung taugt.

Elegant, schlicht und reduziert, hat sich das sogenannte Burger-Icon schnell eine große Fangemeinde erarbeitet, setzte seinen Siegeszug von den mobilen Devices kommend auch auf Desktop-Sites fort und ist mittlerweile fester Be­stand­teil vieler Frontend-Frameworks und WordPress-Themes.

Braucht man also gar keine weiteren Navigations-Lösungen mehr? Mitnichten! Denn das Burger-Symbol hat gerade auf dem Desktop einige Nachteile: Es ver­steckt Informationen, die für den User sichtbar sein sollten. Schließlich sucht er nach spezifi­schen Inhalten und hält nach kon­kre­ten Anhaltspunkten Ausschau – nicht nach abstrakten Symbolen. Aufgrund der gegebenen Informationsdefizite sollte man es dort daher nicht als zentra­les Navigationselement einsetzen. Schließlich gibt es hier auch keine akute Platznot. Zudem ist das kleine Icon auf gro­ßen Bildschirmen oft zu unauffällig.

Müssen Designer und Developer also unter­schied­li­che Navigationssysteme für große und kleine Screens aufsetzen? Nicht zwangsläufig. Die gelungene Kombination mehrerer Navigationsmuster, beispielsweise aus Icon und expliziter Navigationsleiste stellt auch einen für Desktop-Sites gangbaren Weg dar. In der folgenden Gallerie haben wir einige interessante Beispiele zusammengestellt.

Adam Underwear
A-dam Underwear, ein Shop für Herrenunterwäsche demonstriert hier, ...
1/20
Adam Underwear
...dass spiele­rischer Ansatz und Funktionalität einander nicht ausschließen.
2/20
Adam Underwear
Neben einigen Buttons kann man auch über Bilder auf die Produktseiten navigieren.
3/20
Adam Underwear
Diese beiden Auswahlbuttons für den Shop (»all products«) und einen Blog (»all stories«) mit Produkt­geschichten bleiben auch beim Scrollen am unteren Bildrand fixiert,
4/20
Beoplay
Die Seite des Bang-&-Olufsen-Ablegers Beoplay zeigt, wie man das Spannungsfeld zwischen Landing Page und Corporate-Website inklusive Shopfunktion elegant gestaltet.
5/20
Beoplay
Die Landing Page für den Kopfhörer H4 funktioniert sowohl als scrollbarer One-Pager...
6/20
Beoplay
...als auch über eine klassische Menüleiste.
7/20
Beoplay
8/20
Beoplay
Per Klick auf das Burger-Icon oder per Hochscrollen öffnet sich eine übergeordnete Navigation...
9/20
Beoplay
..die zu weiteren Produkten führt.
10/20
Beoplay
Wichtige Elemente wie der Warenkorb bleiben stets fix an einer Stelle, egal auf welcher Unterseite der User sich gerade befindet.
11/20
Campo alle Comete
Auf dieser Website präsentiert das italienische Weingut Campo alle Comete sein Sortiment.
12/20
Campo alle Comete
in verspieltes Szenario, dessen explorativen Ansatz eher Designer als UX-Experten anspricht
13/20
Campo alle Comete
Zur Sicherheit integrierten die Gestalter noch ein Hamburger-Icon zum direkten Ansteuern des Sortiments.
14/20
The Guardian
Der britische »The Guardian« setzt bei seinem Onlineauftritt auf Priorisierung:
15/20
The Guardian
Verkleinert man das Browserfenster auf dem Desktop und auch auf mobilen Geräten reduziert sich nicht nur die Zahl der Rubriken, sondern sie sortieren sich neu.
16/20
The Guardian
Das Burger-Icon ersetzt ein expliziter »more«-Button, dessen Slider rechts im Menübalken die komplette Navigation vertikal einfahren lässt.
17/20
Milwaukee Ballet
Die ansprechende Gestaltung der Website des Milwaukee Ballet beeindruckt und irritiert zugleich, denn die Navigationspunkte sind auf einem Kreis in der Bildmitte »versteckt«.
18/20
Milwaukee Ballet
Ergänzt werden sie durch eine klassische Navigation, die die wichtigs­ten Besucher­informationen bedient...
19/20
Milwaukee Ballet
...und ein Burger-Icon, das lediglich die Inhalte der Kreis­navigation wiedergibt.
20/20

Mehr zum Thema »Navigationskonzepte« lesen Sie in PAGE 07.2017 im PAGE-Shop!

Produkt: eDossier »VR für alle! So rüsten Agenturen auf für Virtual Reality«
eDossier »VR für alle! So rüsten Agenturen auf für Virtual Reality«
So steigen Sie ein in Konzept, Design und Entwicklung von Virtual-Reality-Apps

Schreiben Sie einen Kommentar

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

Das könnte Sie auch interessieren