Christian Fernandez

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. Bild: Starbucks.com Responsive Navigation: Best Practice II windows.microsoft.com Kombination aus verstecktem Menü, sowie Slide- und Push-Navigation. Variante 2: Der Inhalt wird vom Menü überlagert. Bild: Microsoft Responsive Navigation: Best Practice III mcdonalds.de Kombination aus einem Listen- und Rastermenü. Als erstes erscheint eine Liste und anschließend eine Rasterdarstellung. Bild: McDonald's

Sovereign Cloud in Deutschland: Milliarden für Datenhoheit

So nutzt du Claude Code (Anfängerleitfaden)

Innovation für die Energiewende entsteht im Netzwerk

Gefährliche Tricks: E-Mail- und Domain-Spoofing im Fokus

Employee Advocacy im Mittelstand: Eine praktische Anleitung

Leadership ist keine Frage des Titels – sondern des Übergangs.

KI als Karriere-Turbo: Warum CIOs zu den CEOs von morgen werden

Komfortzone kills Sichtbarkeit: Warum echte Medienpräsenz für Startups überlebenswichtig ist

Startup WebMeister360 im GründerView

Startup iMTED im GründerView

Startup WAYSSART Solutions im GründerView

Innovation für die Energiewende entsteht im Netzwerk

Wie viel Mensch verträgt die KI?

Vom Know-how zum Green Skill: Wenn Nachhaltigkeit zur Kompetenz wird

Was macht KI mit unserem Denken? Ein Blick auf die MIT-Studie

Vom Hype zum Helfer: Wie KI-Agenten Fahrt aufnehmen