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 »App- und Webdesign mit Sketch«
eDossier »App- und Webdesign mit Sketch«
Sketch-versus-Photoshop-Tutorial: User Interface Design mit Sketch, angelehnt an typische Photoshop-Anwendungsfälle

Schreiben Sie einen Kommentar

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

Das könnte Sie auch interessieren