Basiswissen

Optimale Website-Navigation für bessere User Experience

Optimale Website-Navigation für bessere User Experience

90% aller Besucher einer Website klicken sofort wieder weg. Daran ist nicht unbedingt der Content schuld. Auch die Website-Navigation spielt eine enorm wichtige Rolle. Denn viele User werfen auch auf diese einen Blick, um mehr über das Angebot auf der Website zu erfahren. Gelingt ihnen das nicht, hat man auch eine wertvolle zweite Chance vertan.

Das Problem: Oft ist die Navigation mangelhaft. Das kann an unverständlichen Inhalten, aber auch an einer eingeschränkten Benutzbarkeit liegen. Vor allem Ersteres ist nicht so einfach umzusetzen, weil Besucher (Buyer Personas) sehr unterschiedlich “ticken”. Bist Du in der Lage, die Welt aus deren Perspektive zu betrachten und darauf aufbauend eine geeignete Website-Navigation zu konzipieren?

Informationsarchitektur einer Website

Bevor Du Dich mit der Navigation beschäftigst, sollte das Fundament der Website wasserdicht sein. Sowohl bei einer Neugestaltung als auch im Rahmen eines umfassenden Audits ist es sinnvoll, die optimale Informationsarchitektur zu gestalten. Dabei geht es darum, Inhalte sinnvoll zu gruppieren, damit sie später besser gefunden werden.

Die Vorgehensweise ist gar nicht so schwer. Versuche ausgehend von der Startseite alle einzelnen Seiten in einer Baumstruktur zu platzieren. Achte aber darauf, dass es nicht mehr als zwei bis maximal drei Ebenen gibt. Auch sollten sich auf einer Ebene nicht mehr als sechs bis acht Seiten befinden.

website-navigation tipps und beispiele

Die Kunst ist, Inhalte sinnvoll zu gruppieren. Orientiere Dich dabei unbedingt an die User Journeys der einzelnen Buyer Personas. Wenn Du die noch nicht beschreiben kannst, entwickle in Deinem Team Customer Journey Maps. Eine Anleitung findest Du hier. Ergänzend kannst Du Dir auch anschauen, wie die Websites von Wettbewerbern aufgebaut sind.

Die Hauptnavigation

Wenn Deine Informationsarchitektur steht, kannst Du auf deren Basis die Hauptnavigation Deiner Website erstellen. Als zentraler Bestandteil einer Website sichert sie die einfache und zuverlässige Navigation. Folgende beiden Techniken sind am verbreitetsten:

Navigationsleiste

Der Klassiker schlechthin ist eine feste Navigationsleiste, welches sich meistens im Seitenheader befindet. Zum Teil beinhalten diese auch Untermenüs, welche sich durch ein Klicken oder Drüberfahren mit der Maus aufklappen lassen. Die Inhalte des Menüs bestehen meistens aus kurzen Schlagwörtern, manchmal ergänzt um Icons, Bilder oder Texten.

website navigation beispiel

Optional kann man eine Navigationsleiste Bildschirmrand so fixieren, dass sie beim Scrollen sichtbar bleibt.

Hamburger-Menu

Für mobile Websites hat sich ein besonders platzsparendes Menü durchgesetzt. Das sogenannte Hamburger-Menü öffnet sich erst durch den Klick auf ein Icon, welches mit etwas Fantasie an einen Hamburger erinnert. Auch hier können Untermenüs integriert werden. Neben kurzen Schlagwörtern werden hier auch gern Icons eingesetzt.

website navigation beispiel

Alternative Navigationsarten

Natürlich gibt es noch unzählige Alternativen zu den bereits genannten Navigationsarten.

Breadcrumb-Navigation

Diese Form der Website-Navigation kennst Du sicher aus Webkatalogen oder dem Windows Explorer. Gerade bei sehr vielen Navigationsebenen erlaubt diese dem User eine gute Orientierung.

Sitemap

Wie eine Landkarte umfasst die Sitemap alle Seiten auf einen Blick. Sind dies jedoch ein paar Hundert, hilft sie nicht wirklich bei der Orientierung.

Kontextbezogene Navigation

Der Klassiker schlechthin sind Verlinkungen im Content. Vor allem beim “intuitiven Herumklicken” bringen sie den User ans Ziel.

Schlagwortwolke

Diese Form der Website-Navigation ist relativ neu. Eine Liste von Schlagwörtern (“Tags”) wird in Form einer Wolke angeordnet, wobei sich die Größe der Wörter an deren Gewichtung orientiert. User tun sich mit “Tag Clouds” jedoch relativ schwer.

Suche

Es gibt regelrecht Fans der Suchfunktion, die gar nicht anders durch Websites navigieren. Da ein Eingabefeld für die Suchanfrage wenig Platz in Anspruch nimmt, spricht wenig gegen die Suchfunktion.

Sonstige

Es gibt natürlich unzählige weitere Navigationsarten. Vor allem mobile Apps bieten unzählige neue Möglichkeiten, sich durch Inhalte zu navigieren. Einige wie der Floating Action Button eignen sich tatsächlich auch für die Desktop-Darstellung, aber sind vielen Usern noch fremd.

Drei Empfehlungen für eine optimale Website-Navigation

1. Setze auf Best Practice

Es ist ja immer schön, sich von der Masse abzuheben. Aber gerade bei der Hauptnavigation setze besser auf gängige Techniken, die jeder versteht. Stecke die Energie lieber in gute Umsetzung. Nicht jeder ist ein Finger-Akrobat an der Maus oder auf dem Touchscreen. Und nicht jeder hat solche Adleraugen wie Eure 20-jährige Designerin.

2. Biete Alternativen an

Im Leben ist es immer gut, einen Plan B in der Tasche zu haben. Das gilt auch im UX-Design. Biete den Usern also zwei bis drei alternative Formen der Navigation an. Dann kann dieser selbst entscheiden. Messe dann, welche er nutzt. Was nicht genutzt wird, darf dann gern wieder verschwinden, um unnötige Ablenkung zu minimieren.

3. Berücksichtige die User Journey

Wie schon beim Erstellen der Informationsarchitektur, orientiere Dich immer noch an den typischen User Journeys Eurer Buyer Personas. Welche Pfade geht der User meistens? Welche Pfade soll der User gehen, um ohne Umwege sein Ziel zu erreichen?

Fazit

Der Erfolg einer Website steht und fällt mit der Navigation. Der Content kann noch so gut sein – wenn sich der User darin nicht orientieren kann, ist die Mühe vergebens. Achte also dringend auf eine verständliche und einwandfrei funktionierende Website-Navigation, die eine optimale Nutzererfahrung ermöglicht.

Ebenfalls interessant
Mehr Newsletter-Abonnenten dank modaler Fenster
email bot clicks
Bot Clicks: Wie trennt man die Spreu vom Weizen?

Bitte kommentieren

Ihr Kommentar*

Ihr Name*
Ihre Website



Gratis-Updates folgen bis auf Widerruf automatisch.
Hier geht es zu unseren Datenschutzbestimmungen.