One Digital User Customer Human Brand Experience

Responsive Navigation

Zielgenaues Surfen auf mobilen Endgeräten.

Um das Thema „Responsive“  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.

Quelle

Website kuehlhaus AG

Jahr

Medium

Online

Autor

Picture of c.fernandez
Ich gehe Projekte mit einer strategischen und nutzerzentrierten Perspektive an. Viele Unternehmen und Organisationen haben durch meine Unterstützung ihre digitalen Angebote mit einer gezielten UX-Strategie erfolgreich verbessert. Mein Wissen umfasst Bereiche von der Kognitionspsychologie bis hin zur Typografie und verbindet somit fundierte wissenschaftliche Erkenntnisse mit den gestalterischen Aspekten des Designs. Meine Fähigkeiten nutze ich jetzt um mittelständischen Unternehmen in der Digitalisierung zu unterstützen. Durch schnelle UX-Prozesse entwickle ich Konzepte und Strategien damit sie auch online ihre Geschäftsziele erreichen.

Lassen Sie uns gemeinsam Ihre digitale Strategie auf die nächste Stufe heben!