Responsive Design Day auf der International PHP Conference und Webinale 2015

How to: Responsive Navigation Patterns und die UX

Responsive Design ist schon seit Jahren eines der Buzzwords im Bereich Webdesign. Dabei geht es um mehr als nur die Gestaltung von Websites für unterschiedliche Bildgrößen, und zahlreiche Aspekte spielen dabei eine wichtige Rolle – gerade auch, was die Navigation und die User Experience von responsiv gestalteten Seiten angeht.

Im Rahmen der Spring Edition der International PHP Conference und Webinale 2015 geht es an den Responsive Design Days genau um diese Themen und noch viel mehr.

Responsive Navigations-Pattern – und was ist mit der User Experience?

Es gibt zahlreiche verschiedene Möglichkeiten, die Navigation einer Website zu gestalten – und alle haben ihre Vor- und Nachteile. Egal ob Hamburger-Menü, Slide-Down-Menüs oder jede andere Navigationsform, man kann bei der praktischen Umsetzung einiges falsch machen, gerade, wenn es um die Gestaltung für unterschiedliche Bildschirmgrößen geht.

In seiner Session Responsive Navigation Patterns – UX und Guidelines auf der IPC 2015 ging Peter Rozek ebendiesen Fragen nach und zeigt sowohl Vor- als auch Nachteile unterschiedlicher Navigationspattern. Genauso stand auch die Frage nach den Best Practices bei der Umsetzung von Responsive Design im Vordergrund.

So muss die Bedienbarkeit und die User Experience bei der Umsetzung von Responsive Webdesign stets im Hinterkopf behalten werden. Die größte Herausforderung ist es dabei, die Balance zwischen Vollständigkeit und Klarheit zu finden – insbesondere auch, weil der Ruf nach Content-First und Mobile-First immer lauter wird.

Allerdings, so erklärt Peter Rozek, darf man eins nicht vergessen: Patterns oder Entwurfsmuster sind keine Universallösung für eine fehlerlose und makellose Navigation. Stattdessen bieten sie nur einen Lösungsansatz unter vielen.

Vor- und Nachteile der verschiedenen Navigationspattern

Guckt man sich die verschiedenen Navigationspattern an, fällt schnell auf, dass sie verschiedene Vor- und Nachteile mit sich bringen. Ein gemeinsames Problem, dass die meisten Pattern haben, ist die Frage, ob der Nutzer versteht, dass es sich bei einem Icon um ein Navigationsmenü handelt. Gerade beim Hamburger-Icon ist das oft ein Hindernis für weniger geübte User. Genauso ist es wichtig, dass es keine Konflikte mit anderen Systemobjekten gibt.

Off-Canvas-Navigationen – vor allem in Verbindung mit Hamburger-Navigationen – haben sich mittlerweile zu einer Art Konvention bei der Responsive Navigation entwickelt. Kein Wunder, bietet die Off-Canvas-Navigation doch einige Vorteile, besonders für komplexe Navigationsmenüs.

Best Practices für die Implementierung von Responsive Navigation

Es stellt sich natürlich die Frage: gibt es Guidelines für die Gestaltung von Responsive Navigationen? Auch darauf gab Peter Rozek Antwort und nennt vor allem die folgenden fünf Punkte:

Sichtbarkeit

Dazu gehört vor allem, die Navigation verständlich, eindeutig und vertraut zu gestalten. So sollte sie nicht nur gut erreichbar sein, sondern etwa auch nicht mit anderen Navigationsicons in Konkurrenz stehen.

Funktion

Eine Navigation sollte funktional sein und direkten Einstieg in die Unterebenen bieten. Dabei sollte darauf geachtet werden, dass Links leicht zu erreichen sind, Menüpunkte nur mit einer Funktion belegt werden und auch nur eine Instanz für Desktop, Tablet und Mobile definiert wird.

Darstellung

Es sollte vor allem auf eine klare Symbolik und Hierarchie geachtet werden. Wichtig ist auch, den Landscape-Modus zu bedenken, denn was im Portrait-Modus gut aussieht, funktioniert noch lange nicht, wenn man das Gerät dreht.

Alternative Einstiege

Schnelleinstiege sind gut und wichtig, dürfen aber nicht in Konkurrenz zur Hauptnavigation stehen. Sonst wird es für den User schnell zu unübersichtlich.

Orientierungshilfen

Nutzer wollen wissen, wo in der Navigation sie sich befinden. Darum sollte man sie in jeder Unterebene über den aktuellen Navigationspunkt informieren, etwa mithilfe eindeutiger Header.

Das Ziel der Responsive Navigation ist es in jedem Fall, dem User eine positive User Experience und Usability zu bieten. Eins darf man dabei aber nicht vergessen, erklärte Peter Rozek abschließend:

Design for Humans, not Devices.


Aufmacherbild: Car navigation system von Shutterstock / Urheberrecht: Pincasso

Unsere Redaktion empfiehlt:

Relevante Beiträge

X
- Gib Deinen Standort ein -
- or -