grafixx.at

Navigation Neckermann.at

Es gibt ja schon seit längerem einen kleinen Trend dazu überdimensionale Overlay Navigationionen auf Websites einzubinden. Das will ich in diesem Beitrag kurz aufgreifen, da ich hierbei ein großes Potential sehe. Durch entsprechende Navigationselemente lassen sich sehr umfangreiche Menüstrukturen übersichtlich darstellen. Aber nicht nur die schiere Anzahl an Kategorien und Unterseiten kann zum ausschlaggebenden Element werden. Daher habe ich ein paar Beispiele herausgepickt und versuche die positiven Aspekte hierbei zu beleuchten.

Große Menge an Inhalten bändigen

Am öftesten sieht man mehrspaltige und sehr großflächige Menüs wohl bei Online Shops. So scheinen die umfangreichen Angebote der großen Universalversender ein optimaler Einsatzzweck zu sein. Daher hat wohl auch Neckermann.at oder Otto.de auf eine entsprechende Variante gesetzt.

Navigation Otto

Neckermann präsentiert die Unternavigation in einem optisch aufgeräumten und relativ übersichtlichen, zweispaltigem Layout.  Hierbei ist schön zu sehen, dass bewusst mit Freiräumen gearbeitet wird und die einzelnen Links durch Bereichsüberschriften kategorisiert werden. Das ist auch sehr wichtig, da ansonsten schnell die Übersichtlichkeit verloren gehen würde und man anstatt der Vereinfachung der Navigation genau das Gegenteil erreichen könnte.

Eine interessante Variante hatte auch Quelle eingesetzt. Um die Aufmerksamkeit der Benutzer auf die Navigation zu lenken wurde hier, nachdem öffnen der Navigation, die restliche Website aufgehellt. Das aber nur als Randbemerkung, da die eigentliche Navigation nichts mit dem Thema zu tun hatte.

Zusatzinformationen bieten

Layernavigation Mirapodo

Mirapodo, ein Onlinehändler der sich auf Schuhe spezialisiert hat, nützt die Navigation gleichzeitig um elegant eine kleine Begriffsdefinition zu integrieren. Sehr gelungen werden hier die Schuhformen durch die entsprechenden Icons erklärt. So wird auch für Laien in Sachen Schuhe schnell klar wo die Unterschiede zwischen Sandalen und Sandaletten oder zwischen Ballerinas, flachen Slippern und Halbschuhen liegen. Wie bei Neckermann wird auch hier vorbildlich mit Weißräumen gearbeitet und eine Farbnavigation eingesetzt um die Übersichtlichkeit zu gewährleisten und das Auge nicht zu überforden.

Image vermitteln & Promotion

Layernavigation Red Bull Salzburg

Ein Beispiel aus dem Sportbereich bietet die Website vom Fußballverein Red Bull Salzburg. Diese Website setzt schon mehrere Jahre auf diese Art der Navigation und zeigt, dass es nicht immer nur Seiten mit sehr komplexen Navigationsstrukturen sein müssen. Red Bull nützt einen breiten Layer und promoted einzelne Elemente bewusst durch Bilder. Aus meiner Sicht leidet die Übersichtlichkeit in diesem Beispiel zwar etwas und es ist nicht immer klar ob die Bilder clickbare Menüpunkte sind oder nicht. Aber der Ansatz an sich ist durchaus interessant und die Seite hat ja auch schon ein paar Jährchen auf dem Buckel.

Tipps zur Gestaltung

Ein großer Vorteil dieser Art der Navigation ist, dass der Benutzer sehr schnell die gesamte bzw. einen großen Teil der Navigationsstruktur des gewählten Bereiches sehen kann. Das birgt aber auch die Gefahr, dass das Ganze unübersichtlich wird und den Betrachter überfordert.

Aus diesem Grund ist es wichtig mit gestalterischen Mitteln bewusst dagegen vorzugehen. So sollte bewusst  mit Weißräumen gearbeitet werden. Abstände erhöhen die Übersichtlichkeit und helfen dem Betrachter einzelne Elemente besser erfassen zu können.

Ein weiteres Augenmerk sollte auf die Gliederung und Kategorisierung der einzelnen Elemente gelegt werden. Eine Unterteilung der Menüpunkte in Unterkategorien, Trennung durch grafische Stilmittel wie Linien oder der Einsatz von Aufzählungssymbolen erhöhen die Übersichtlichkeit deutlich.

Darüber hinaus sollte auch eine konsequente Typografie mit klar erkennbaren Unterschieden zwischen Überschriften, Navigationselementen und Untermenüpunkten eingesetzt werden. Auch hier gilt im Zweifelsfall “mehr ist mehr”. Die unterschiedlichen Formatierungen müssen klar und schnell warnehmbar sein. Daher also nicht Überschriften in 11px und Links in 10px darstellen, etc.

Showcase

Abschließend habe ich noch ein paar gelungene Beispiele zusammengetragen.

Navigation heine.de

Navigation sitzclub.de

Navigation Otto.de

Navigation Neckermann.at

Layernavigation Mirapodo

Navigation Red Bull Salzburg

Navigation whitehouse.gov

Navigation Audi

Navigation Mercedes-Benz

Navigation Puma

Navigation Reuters

Navigation tnttrailsand

Navigation Asos

Weiterführende Beiträge von anderen Websites:

• Praxistipps: Conversion Optimierung mit Mega Drop-downs
• Mega Drop-Down Navigation Menus Work Well
• Fly-Out-Navigationen: Segen oder Fluch?

Ähnnliche Beiträge:

1. Navigationsdesign – Die passende Architektur finden!
2. Viel Content und wenig Platz – Mittel gegen überladene Websites!
3. Navigationsmetaphern: Menüpunkte visualisieren