Priority+ neues Navigationskonzept oder alter Schuh?

Seit mehr als 25 Jahre gibt es Websites und genauso lange gibt es Navigationen, die durch die Seite führen. Die Aufgabe von Agenturen wie Förderturm ist es, das passende Navigationskonzept für jedes Unternehmen zu finden. In diesem Beitrag erfahren Sie, wie wir vorgehen und welches aktuelle Navigationskonzept wir für richtig ermessen.

Navigation: Designmerkmal oder Orientierungshilfe?

Eigentlich hat die Navigation eine primäre Aufgabe: Sie soll dem Websitebesucher Orientierung geben und mit möglichst wenig Klicks zum Ziel führen. Dabei soll das Navigationsdesign möglichst neugedacht, kreativ und modern sein. Gleichzeitig aber, darf man nicht den Blick auf den Nutzer aus den Augen verlieren. Eine ultramoderne Navigation hilft keinem Unternehmen, wenn die Websitebesucher die Homepage verlassen, weil sie die wichtigen Einstiegselemente nicht finden.

Navigationskonzept 2.0

Heute spreche ich vom Navigationskonzept 2.0, weil die Anforderungen an die Website-Navigation seit es mobilen Websites gibt gestiegen sind. Als Websites das Licht der Welt erblickten wurden diese nur auf großen Bildschirmen aufgerufen. Die Navigation konnte viel Platz auf der Website einnehmen und die Bedienung erfolgte ausschließlich via Mausklick. Mit der Einführung von Smartphones (z.B. das iPhone 2007) wurde das Navigationskonzept revolutioniert. Nicht nur Desktop PC’s greifen auf die Website-Navigation zu, sondern auch mobile Endgeräte mit kleinen Touch-Bildschirmen. Diese Herausforderung gilt es zu lösen.

Inspirierende Navigationskonzepte – aber was hilft wirklich?

Mit der Zeit ergaben sich eine Vielzahl an Navigationskonzepten. Nur auf drei Konzepte gehe ich im Folgenden genauer ein.

  • Hamburger-Navigation / Burger-Menü
  • Mega-Menü
  • Priority+

Hamburger-Navigation oder kurz Burger-Menü

Durch den begrenzten Platz auf mobilen Endgeräten hat sich im Laufe der Zeit die Hamburger-Navigation durchgesetzt. Aber was ist das überhaupt? Platz sparend versteckt sich hinter drei schlichten, horizontalen Linien die Navigation. Daher ist es in seiner Ökonomie kaum zu übertreffen. Und der wenige Platz im oberen Bereich der mobilen Website verführt Webdesigner geradezu die drei Linien mit in das Design aufzunehmen. Auf mobilen Endgeräten ist ein Einsetzen des Burger-Menüs sinnvoll. Verstärkt in den letzten zwei Jahren hat das Burger-Menü aber auch Einzug auf Desktop-Websites erhalten. Dieses reduzierte Navigationselement gefällt Designer sehr gut, da es auf der Website aufräumt und alle Navigationspunkte hinter einem Element versteckt. Warum diese Maßnahme fatal sein kann und bei Usability-Experten Kopfschmerzen bereiten, löse ich später auf.

Navigationskonzept - Burger Menu am Beispiel von Samsung

Ein Beispiel für das Burger Menu ist Samsung.

Bildquelle: Samsung.com

Mega Menü – der Klassiker

Neben dem Hamburger-Menü auf Desktop Websites gibt es viele weitere Möglichkeiten von Navigationskonzepten. Beliebt ist das Mega-Menü. Viele beschreiben es als Klassiker in der Navigationswelt. Die Vorteile für die Beliebtheit liegen klar auf der Hand: viele Anwendungsfelder, viel Spielraum für kreative Designs und viel Platz für Wahrung der Übersichtlichkeit.

Navigationskonzept - Mega Menü am Beispiel von Zalando

Zalando verwendet das klassische Navigationsmenü.

Bildquelle: Zalando.de

Priority+ eine Mischung aus Desktop und Mobile?

Dieses „neue“ Navigationselement ist gar nicht so neu wie man denkt. Es verbindet, einfach gesagt, beide Welten: Design und Usability. Wie Priority+ das schafft? Ganz einfach, indem die Navigation, genau wie die Website, auf die Bildschirmgröße des Internetbesuchers reagiert.

Auf großen Desktop-Geräten werden viele Navigationselemente gezeigt. Je kleiner die Screen Größe des Users, desto weiter werden die einzelnen Navigationspunkte verringert. Auf dem kleinsten Endgerät (z.B. ein Smartphone) ist dann wiederum der Unterschied zum klassischen Burger-Menü eher klein. Maximal 1-3 der wichtigsten Menüpunkte sind direkt sichtbar. Alles Weitere kann über den Aufruf des Burger-Menüs und das Einschieben von Navigationsslider von links, rechts oder Fullscreen aufgerufen werden.

Damit ist die Navigation permanent sichtbar und zeigt abhängig von der Größe des Devices Informationen. Priority+ löst damit auch das fatale Problem einer Hamburger-Navigation auf Desktop-Geräten: Das Informationsdefizit. Ein Produktanbieter muss Produkte über die Navigation auf seiner Website einfach und schnell bereithalten. Genauso ein Dienstleister. Er muss einfach und schnell seine Leistungen dem Internetbesucher ersichtlich machen.

Priority+ verringert die Navigationspunkte nicht nur, sondern priorisiert sie auch neu. Dadurch werden Navigationsthemen neu geclustert. Für die Planung heißt das, es wird nicht nur eine Sitemap für die Website erstellt, sondern mindestens zwei, wenn nicht drei Sitemaps (Smartphone, Tablet und Desktop).  Dieser Mehraufwand lohnt sich und wird durch eine besseres Klickverhalten auf der Website schnell wieder wettgemacht.

Priority+ - GIF zur Veranschaulichung wie das Navigationselement arbeitet

The Guardian verwendet das Priority+ Navigationskonzept.

Bildquelle: theguardian.com

Unser Fazit

Damit ist auch eindeutig, welches Navigationskonzept die Förderturm Agentur heute empfiehlt: Priority+. Warum? Weil es der ideale Kompromiss zwischen reduziertem Design und hohe Benutzerfreundlichkeit ist. Und der Mehraufwand in der Konzeption lohnt sich. Was sind Ihre Erfahrungen mit den verschiedenen Navigationskonzepten? Haben Sie einen Favoriten?

Abschließend lässt sich die Eingangsfrage auch leicht beantworten. Priority+ ist ein alter Schuh, aber durch die Usability-Einschränkungen (Stichwort Hamburger Menü auf Desktop Websites) heute moderner denn je.

Quellen:

Revisiting the Priority+ Pattern

Navigationsmuster: Priority+ oder Tableiste?

The Priority+ Navigation Pattern

Jetzt teilen