Start Netzkultur Responsive Navigation: Zielgenaues Surfen auf mobilen Endgeräten

Netzkultur

Responsive Navigation: Zielgenaues Surfen auf mobilen Endgeräten

Von

11/08/2014

Lesedauer ca. 4 Minuten

An dem Thema Responsive Navigation kommt kaum ein Unternehmen mehr vorbei. Das Surfverhalten hat sich in den letzten Jahren stark verändert, immer mehr Nutzer greifen von mobilen Endgeräten auf das Internet zu. Wichtig ist dabei ein gleichbleibendes Nutzererlebnis auch auf diesen Endgeräten, sowie der schnelle und einfache Zugang zu den Informationen. Hierfür benötigen die heuten Internetauftritte anpassungsfähige und dynamische Navigationen, um auf den unterschiedlichen Touch-Devices optimal zu funktionieren. Pauschale Empfehlungen gibt es zu diesem Thema nicht, aber fünf grundlegende Dinge, die Sie im Vorfeld betrachten sollten.

Top vs. Side-Navigation

Die Entscheidung, ob eine Top- oder Side-Navigation verwendet werden soll, hängt zum einen von der Anzahl der Navigationspunkte ab und zum anderen, wie viel Platz für den Inhaltsbereich benötigt wird. Da auf einem Smartphone nur eine geringe Displaybreite zur Verfügung steht, können nur wenige Navigationspunkte horizontal untergebracht werden. In der Regel sind hier drei das Maximum. Vertikal lassen sich hingegen mehr abbilden. Der Nachteil einer Side-Navigation jedoch ist, dass in der Breite kaum Platz für Content bleibt und dieser zwangsläufig überlagert oder zur Seite aus dem Sichtfeld geschoben wird (vgl. Slide und Push-Menüs – 2 Varianten).

Slide und Push-Menüs – Überlagern vs. Verschieben

Hierbei handelt es sich um ein Ausklappmenü, welches sich auf Wunsch ins Sichtfeld schiebt (vgl. „Sichtbar vs. Versteckt“). In einer Ausführung wird der Inhaltsbereich vom Menü überlagert. In der anderen wird der Inhalt beiseite geschoben. Beide Varianten haben ihre Vor- und Nachteile. Je nach Displaybreite bleibt beim Verschieben ein Teil des Contents sichtbar und kann ohne Einschränkung erfasst werden. Ungewohnt ist jedoch, dass das Auge einen „Sprung“ vollziehen muss, um zwischen Menü und Inhalt zu wechseln. Bei einer Überlagerung liegt der Fokus stärker auf dem Menü, da der darunterliegende Bereich nicht oder bei Transparenz nur schwer zu erfassen ist.

Single vs. Multi-level Navigation

Eine Grundregel besagt, dass nicht mehr als 7 Navigationspunkte auf einer Ebene abzubilden sind. Hier stellt sich die Frage, wie umfassend der Inhalt einer Webseite ist und wie stark dieser untergliedert werden soll. Bedenken Sie also den Anwendungsfall und die Anforderung des Nutzers: Wie viel und welche Information braucht er bei einen mobilen Zugriff auf die Seite.

Sichtbar vs. Versteckt

Um den geringen Platz auf kleinen Displays möglichst effizient zu nutzen, kann es sinnvoll sein, die Navigation zu „verstecken“. Erst auf Abruf – Klick auf einen Button – wird das Menü eingeblendet. Nachteil ist, dass der Nutzer nicht immer vor Augen hat, welche Rubriken zur Verfügung stehen. Ein Mix aus beiden Varianten ist möglich. Beispielsweise ließen sich die wichtigsten Navigationspunkte in einer permanent sichtbaren Top-Navigation darstellen und weniger wichtige in einem versteckten Menü unterbringen. So sparen Sie Platz.

Listen vs. Raster

Hierbei handelt es sich um die Darstellung der Navigationspunkte. Diese können entweder Listenförmig in Top- oder Side-Navigation abgebildet sein oder in einem Raster. Sprich, mehrere Buttons neben- und untereinander. Hierfür wird dann meistens die ganze Fläche eines Displays in Anspruch genommen. Dadurch lassen sich mehrere Navigationspunkte auf einen Blick unterbringen. Der Content wird jedoch komplett ausgeblendet. Je nach Kombination der Merkmale ergeben sich die unterschiedlichsten Varianten. Bei der Entscheidung ist stets die jeweilige Zielgruppe im Hinterkopf zu behalten, für die eine Webseite entwickelt wird.

Responsive Navigation: Best Practice I starbucks.com

Kombination aus verstecktem Menü, sowie Slide- und Push-Navigation. Variante 1: Der Inhalt wird nach Klick auf das „Three-Lines“-Icon nach unten verschoben.