Navigation-Trends für Responsive Webdesigns

Manuela Kapl stellt im Pulpmedia-Blog die Trends im Bereich der Navigation auf Websites vor und analysiert die Vor- und Nachteile der einzelnen Varianten.

WARUM DER AUFWAND?

Spätestens seit dem „Google Mobile Friendly Update“ vom 21.04.2015 ist die optimierte mobile Darstellung von Websites von der Kür zur Pflicht geworden. Wo Designer/innen früher hauptsächlich nur zwischen „Navigation oben“ oder „Navigation seitlich“ entscheiden mussten, ist mittlerweile weitaus mehr Kreativität gefragt, wenn es um die grafische und technische Umsetzung von Menüstrukturen einer Website geht. Unter anderem auch aus Gründen der Usability und der User Experience ist vor allem bei der Konzeption von Navigationselementen der schmale Grat zwischen Technik und Design zu perfektionieren, wobei der Fokus hier auf der Verlagerung von Desktop- zu mobiler Navigation zu legen ist.

TRENDS IM BEREICH NAVIGATION

Da die Thematik rund um Responsive Webdesign noch als eher jung einzustufen ist, werden vor allem im Bereich der Navigationselemente noch etliche Experimente hinsichtlich Design, Usability und Programmierung durchgeführt. Ein paar dieser „Trends“ – oder zumindest Ansätze – sind hier angeführt und können für das nächste Projekt vielleicht schon als Denkanstoß dienen.

OPTIMIERUNG DURCH SCHRIFTANPASSUNG

Hangout Festivals

Bei Top-Header-Menüs mit weniger als fünf bis sechs Hauptnavigationspunkten ist die Schriftanpassung bei mobilen Endgeräten eine mobile und effiziente Methode zur perfekten Darstellung der Navigation. Hier wird die Position des Menüs nicht verändert.

Vor- und Nachteile

Schriftanpassungen sind einfach zu designen und leicht umzusetzen, lange Spielereien sind aus Sicht der Grafik nicht notwendig. Außerdem wirken die mobilen Seiten mit dieser Methode ziemlich authentisch, da sie nur minimale Unterschiede zur Desktop-Version aufweisen. Leider ist diese Variante aber nur für maximal 5-6 Menüpunkte geeignet und nur bedingt empfehlenswert für Multi-Level-Navigation. Zudem können aufgrund der unterschiedlichen Zeichenlängen bei mehrsprachigen Seiten große Probleme auftreten, die ein Menü grob verunstalten.

Ein gutes Beispiel für die Optimierung durch Schriftanpassung liefert die Website des Hangout Festivals.

DAS TOGGLE-MENÜ

Urban Tool

Das derzeit wohl am weitesten verbreitete mobile Menü ist das „Toggle-Menü“, welches vor allem durch seine drei horizontalen Streifen jedem ein Begriff sein sollte.

Vor- und Nachteile

Das Toggle-Menü erscheint direkt dort, wo die User-Interaktion stattfindet und ist deshalb als sehr userfreundlich anzusehen. Zudem gilt das Toggle-Menü als sehr platzsparende Variante und lässt sich vergleichsweise einfach implementieren. Leider bietet aber auch das Toggle-Menü keine wirklich sinnvollen Lösungen für die Multi-Level-Navigation.

Positive Beispiele für das Toggle-Menü finden sich bei Talentor und Urban Tool.

SIMPLES DROP-DOWN-MENÜ

KMU

Weniger stilvoll, dafür aber einfach und schnell umgesetzt ist das Responsive-Drop-Down-Menü. Hier wird beim Umbruch die Navigationsstruktur (auch mehrstufig) in ein Standard-HTML-Dropdown-Feld gepackt.

Vor- und Nachteile

Von den genannten Varianten ist das Drop-Down-Menü am einfachsten zu implementieren. Außerdem eignet es sich hervorragend für Multi-Level-Navigation, was für hohe Funktionalität spricht. Leider geht das aber etwas auf Kosten des Stylings, welches sich nur sehr eingeschränkt individuell gestalten lässt.

Ein Beispiel für ein Drop-Down-Menü ist die Website der KMU Akademie & Management AG.

MULTI-TOGGLE (OVERLAY DROPDOWN)

Hagan Ski

Bei umfangreicheren Websites mit hierachischer Navigationsstruktur empfiehlt es sich, eine komplexere Struktur in der Navigation auch in der mobilen Variante anzudenken und eventuell gleich mit einem Suchfeld abzurunden.

Vor- und Nachteile

Durch das Multi-Toggle-Menü wird Multi-Level-Navigation möglich, der User kann sofort in eine untere Ebene springen. Leider kann das Menü aber bei sehr tiefen Ebenen schnell für Verwirrung bei den Usern sorgen. Abhilfe für das Problem kann man leicht leisten – mit einem zusätzlich integrierten Suchfeld.

Beispiele für ein funktionierendes Multi-Toggle-Menü sind die Webseiten von LASK, LIMAK und Hagan Ski.

FLYOUT

Kaiserhotels

Diese – vor allem aus dem Bereich App Development bekannte – Variante der mobilen Navigation zeichnet sich dadurch aus, dass sich die gesamte Navigationsstruktur von der (meist) linken Seite über die Hauptseite legt und so genug Platz für eine hierachische Menüführung lässt.

Vor- und Nachteile

Das Flyout-Menü hat genau dort seine Stärken, wo andere Menü-Varianten versagen: es bietet eine ansehnliche Lösung für komplexe Navigation. Zudem ist es äußerst userfreundlich, da vor allem die mobilen Nutzer in diversen Apps immer wieder damit konfrontiert werden und deshalb im Umgang damit bereits vertraut sind. In der Umsetzung ist das Flyout-Menü aber leider eher aufwändig.

Ein Beispiel für das Flyout findet sich auf der Website der Kaiserhotels.

SONSTIGE VARIANTEN

FOOTER-MENÜ

Das eher seltene Footer-Menü definiert sich – wie der Name schon sagt – durch das Anbringen der Navigation im unteren Bereich der Seite.

HIDE’N’CRY -NAVIGATION

Diese Methode beschreibt den Verzicht der Navigationsebene in der mobilen Ansicht. Natürlich ist diese Variante in der Regel nicht empfehlenswert, kann aber unter Umständen durchaus Sinn machen (z.B. bei Landingpages von Kampagnen, wo der Above-the-Fold-Bereich vollständig genutzt werden soll etc.).

CAROUSEL

Das Carousel-Menü war an sich als Abwandlung und abgespeckte Variante der Desktop-Version gedacht und war bis vor kurzem sogar noch vereinzelt auf Websites der Fortune 500 zu sehen. Hier sollte der Desktop-Effekt beibehalten werden, wobei dies natürlich zu Lasten von UI/UX und Performance im mobilen Bereich geht.

Ein Paradebeispiel für das Carousel-Menü ist die Website von Apple.

BLOCK DROPDOWN

Diese Variante ist sehr ähnlich zu der oben angeführten Toggle-Version, jedoch ist hier kein Klick notwendig, um die Menüstruktur sichtbar zu machen.

Die Schnellsuchfunktion – eine sinnvolle Erweiterung

Mobiles Design bedeutet auch mobilen Content. Gerade hier ist es empfehlenswert, sich nicht nur um die Reduktion von Gestaltungselementen Gedanken zu machen, sondern vielleicht auch um die optimale Integration eines Navigationssystems, wodurch der User möglichst rasch und effizient zu den gesuchten Inhalten gelangt.

Bei komplexeren Multi-Level-Navigationshierachien empfiehlt sich daher auch immer die Positionierung einer Schnellsuchfunktion im Above-the-Fold-Bereich, um dem User eine ungemütliche Reise durch eine mehrstufige Seitenhierachie zu ersparen.

Newsletter abonnieren

    Du willst mit uns moshen, jammen, rocken? Get in touch: Schieb uns deine Challenge in den Briefkasten und wir melden uns mit einer Lösung!

    Pulpmedia verpflichtet sich, Ihre Privatsphäre zu schützen und zu respektieren. Wir verwenden Ihre persönlichen Daten nur zur Verwaltung Ihres Kontos und zur Bereitstellung der von Ihnen angeforderten Produkte und Dienstleistungen.

    Mit dem Absenden des Formulars stimmen Sie der Speicherung und Verarbeitung Ihrer persönlichen Daten durch Pulpmedia zu. Sie können diese Benachrichtigungen jederzeit abbestellen. Weitere Informationen zum Abbestellen, zu unseren Datenschutzverfahren und dazu, wie wir Ihre Privatsphäre schützen und respektieren, finden Sie in unserer Datenschutzrichtlinie.

    Danke für deine Nachricht

    Wir freuen uns und melden uns asap. Bis bald.

      Du willst moshen, jammen, rocken? Bist du Pulpie, oder was? Schieb uns deine Mappe durch den Türschlitz!

      Pulpmedia verpflichtet sich, Ihre Privatsphäre zu schützen und zu respektieren. Wir verwenden Ihre persönlichen Daten nur zur Verwaltung Ihres Kontos und zur Bereitstellung der von Ihnen angeforderten Produkte und Dienstleistungen.

      Mit dem Absenden des Formulars stimmen Sie der Speicherung und Verarbeitung Ihrer persönlichen Daten durch Pulpmedia zu. Sie können diese Benachrichtigungen jederzeit abbestellen. Weitere Informationen zum Abbestellen, zu unseren Datenschutzverfahren und dazu, wie wir Ihre Privatsphäre schützen und respektieren, finden Sie in unserer Datenschutzrichtlinie.

      Danke für deine Bewerbung

      Wir melden uns asap. Vielleicht sogar mit einer Einladung zum Kennenlernen. Frisier dich schon mal. Irokese, wallende Mähne oder Seiten auf null – alles Wurscht. Hauptsache die Chemie stimmt.

        Hallo Brieffreund:in!

        Du möchtest gerne mehr von uns lesen? Melde dich für unseren Newsletter an und schon hast du unser Wort!

        Pulpmedia verpflichtet sich, Ihre Privatsphäre zu schützen und zu respektieren. Wir verwenden Ihre persönlichen Daten nur zur Verwaltung Ihres Kontos und zur Bereitstellung der von Ihnen angeforderten Produkte und Dienstleistungen.

        Mit dem Absenden des Formulars stimmen Sie der Speicherung und Verarbeitung Ihrer persönlichen Daten durch Pulpmedia zu. Sie können diese Benachrichtigungen jederzeit abbestellen. Weitere Informationen zum Abbestellen, zu unseren Datenschutzverfahren und dazu, wie wir Ihre Privatsphäre schützen und respektieren, finden Sie in unserer Datenschutzrichtlinie.

        Danke für deine Anmeldung

        Um die Anmeldung abzuschließen, klicke bitte auf den Link in der E-Mail, die wir soeben an dich gesendet haben.