Google Maps für eure Website

Warum ist die Navigation so wichtig?

Jede Website und jede Softwareanwendung benötigen eine Navigation, die den Usern zeigt, wo sie gerade sind und wo die gesuchten Informationen zu finden sind. Vielleicht ist euch schon mal eine Seite aufgefallen, die euch zum Verzweifeln gebracht hat, weil ihr einfach nicht dorthin gekommen seid, wo ihr hinwolltet? Und wenn die Website dann nicht mal eine ordentliche Suchfunktion gehabt hat, habt ihr genervt und unzufrieden die Seite verlassen. Das möchten die Websitebetreiber natürlich verhindern und deshalb haben sie eine Navigation eingebaut. Aber vielleicht ist diese nicht die richtige Wahl für den Seiteninhalt gewesen oder die Navigation ist erst nach dem Seitenaufbau entstanden und sozusagen historisch gewachsen. Wichtig für jede Website und jede digitale Anwendung ist, dem User stets folgende Informationen zu geben:

• Wo bin ich gerade und wie bin ich hierhergekommen?
• Wie komme ich wieder zurück oder wo geht es weiter?
• Welche weiteren Informationen kann ich hier noch erhalten?

Die Navigation ist ein wesentlicher Bestandteil eurer Anwendung und will wohl überlegt und durchdacht sein. Sie ist ein Inhaltsverzeichnis eurer Website oder Anwendung und kann als einfache Liste dargestellt werden oder als Menü. Sie sorgt für einen guten und schnellen Überblick und gibt preis, wo welche Funktion steckt und was den User auf der Seite alles erwartet.

Doch wie erreicht ihr das und auf was solltet ihr unbedingt achten? Um diese Fragen zu beantworten, schauen wir uns im Folgenden an, welche verschiedenen Arten von Navigation es gibt.

Damit der User sie immer sieht, kann sie auch fixiert werden. Somit wird sie auch dann angezeigt, wenn der Seiteninhalt gescrollt wird. Wird das horizontale Menü um ein Drop-down-Menü ergänzt, lassen sich viele weitere Einträge darstellen.

Der große Bruder des Drop-down-Menüs ist das sogenannte Mega-Drop-down-Menü. Diese Menüerweiterung wird bei einer sehr großen Navigation eingesetzt. Vorreiter sind hier Onlineshops, die ein enorm großes Sortiment haben. Bringt die Anzahl der Drop-down-Punkte das Menü an seine Grenzen und lässt es unübersichtlich wirken, wird ein Mega-Drop-down-Menü gebaut. Das Menüfenster wird größer und bietet deshalb mehr Platz für verschiedene Kategorien und deren Unterkategorien. So soll dem User in übersichtlicher Form ein Überblick über alle Produkte gegeben werden.

Die kleine Schwester des Off-Canvas-Menüs ist das sogenannte Page Overlay. Hier wird die Navigation auf dem gesamten Bildschirm angezeigt. Sie lagert sich also über die gesamte Seite und befindet sich nicht nur auf einer kleinen Ebene an der Seite oder im Header.

Zusammengefasst – die Pros und Kontras der Navigationsformen

Horizontale Navigation

Pro

• Kurze Klickwege
• Großer Zuspruch aufgrund der bekannten Positionierung
• Beste Sichtbarkeit durch Mitscrollen
• Platzsparend

Kontra

• Begrenzte Anzahl an Links möglich
• Ein zusätzliches Drop-down-Menü überdeckt den Websiteinhalt

Vertikale Navigation

Pro

• Kein Limit für die Anzahl der Menüpunkte
• Übersichtliche Struktur mit mehreren Navigationsebenen und Kategorien möglich

Kontra

• Fordert viel Platz
• Kann schnell überladen wirken und den User verwirren
• Aufgrund der breiten Websites kann die Navigation ins Abseits geraten

Drop-down-Menü

Pro

• Bietet viel Platz für Unterkategorien
• Ist jederzeit erweiterbar
• Mehrere Ebenen sind möglich

Kontra

• Wirkt schnell unübersichtlich
• Verdeckt den Websiteinhalt beim Auswählen
• Bedienbarkeit kann für User schwierig werden, wenn Flyouts in das Drop-down-Menü eingebaut werden
• Kann schnell überladen wirken

Mega-Drop-down-Menü

Pro

• Alle Seiten sind auf einen Blick sicht- und anklickbar
• Bietet viel Platz und ist erweiterbar
• Visuelle Strukturierung ist möglich
• Icons oder kleine Bilder können eingebaut werden

Kontra

• Kann schnell unübersichtlich werden
• Muss für verschiedene Websitebreiten angepasst werden
• Erfordert eine gut strukturierte Kategorisierung

Off-Canvas-Menü

Pro

• Benötigt am wenigsten Platz
• Erweiterungen sind möglich
• Kein Unterschied zwischen mobiler und Desktop-Variante
• Visuelle Strukturierung ist möglich
• Icons oder kleine Bilder können eingebaut werden

Kontra

• Kann schnell übersehen werden
• Mehr Klicks notwendig
• Erfordert immer eine Aktion des Users, um die Navigation zu erreichen

Acht Tipps für die Navigation eurer Website

1. Platziert die Navigation an einem gewohnten Ort

User lieben es, schnell den Überblick über eine Website zu bekommen. Die Navigation suchen zu müssen, wäre frustrierend und verschwendet unnötig Zeit. Helft dem User deshalb, sich möglichst schnell zurechtzufinden, und platziert eure Navigation an einem für die Nutzerin und den Nutzer vertrauten Ort.

2. Lasst eure Navigation ein Teil eurer Website sein

Räumt der Navigation so viel Platz ein, dass sie gut wahrgenommen werden kann und sich deutlich vom Inhalt eurer Website absetzt, ohne fremd zu wirken.

3. Achtet auf gute Lesbarkeit

Die einzelnen Navigationselemente sollten gut lesbar und mit ausreichend Abstand zueinander dargestellt werden. Auch das Einrücken von Unterpunkten ist wichtig, genauso wie die Hervorhebung des Menüpunktes, an dem sich der User aktuell befindet. Wie auch bei den anderen Websiteinhalten sollte die Schriftgröße und -art der Navigationselemente so gewählt sein, dass sie leicht lesbar sind.

4. Vergesst nicht die tastenbasierte Navigation

Da nicht alle Menschen mit einer Maus oder einem Touchpad navigieren können, solltet ihr auf jeden Fall sicherstellen, dass der User auch per Tastatur durch eure Website navigieren kann.

5. Gestaltet die Navigation interaktiv

Schreibt euer Menü nicht als Fließtext. Hebt deutlich hervor, dass die einzelnen Menüpunkte anklickbar sind, indem ihr Hovertexte oder -effekte nutzt.

6. Strukturiert sinnvoll

Große Menüs brauchen verständliche und sinnvolle Kategorien. So unterteilt ihr lange Menülisten und helft dem User, sich besser zurechtzufinden. Auch Bilder oder Symbole können, sofern sie sinnvoll eingesetzt sind, zu einem schnelleren Überblick verhelfen.

7. Auch Mobil-User wollen navigieren können

Prüft, ob eure Navigation auch auf verschiedenen mobilen Endgeräten funktioniert und lesbar ist. Häufig ist es notwendig, ein separates mobiles Menü zu erstellen. Horizontale Desktopmenüs werden hier meist zu vertikalen mobilen Menüs. Einige Elemente werden eventuell komplett ausgeblendet oder Kategorien neu sortiert. Nehmt euch die Zeit, die Navigation ordentlich zu überarbeiten, und helft dem User, ohne Frust eure Anwendung bedienen zu können.

8. Legt Brotkrumen aus, um den Weg zurückzufinden

Bindet das sogenannte Breadcrumb-Menü auf jeder Seite ein, um den Usern stets ihre aktuelle Position zu zeigen, also wie sie dorthin gekommen sind, und macht die einzelnen „Brotkrumen“ anklickbar, sodass man auch wieder schnell zurückkommt.

Fazit

Es gibt viele verschiedene Möglichkeiten, User durch eine Website oder Anwendung zu navigieren. Welche Variante hier die beste ist, hängt von eurer Zielgruppe, euren Anforderungen und dem darzustellenden Inhaltsumfang ab. Prüft mit Usertests, ob alle Inhalte gefunden werden und gut zugänglich sind. Findet sich euer User gut zurecht oder hat er Probleme, zu navigieren oder einen bestimmten Content zu finden? Nehmt euch genügend Zeit, euer Menü zu planen, und überstürzt nichts. So werdet ihr am Ende mehr zufriedene User und dadurch mehr Erfolg haben.

Weitere spannende Themen aus der adesso-Welt findet ihr in unseren bisher erschienenen Blog-Beiträgen.