Wie sieht eigentlich die perfekte Website-Navigation aus? Pauschal gibt es darauf keine eindeutige Antwort, denn Zielgruppen unterscheiden sich in ihren Erwartungen und Konsumverhalten. In diesem Artikel gebe ich dir aber acht Tipps, welche deine Navigation definitiv verbessern werden.
Die Navigation ist vermutlich das erste, was Besucher auf deiner Website sehen - eine gute Übersicht und Nutzbarkeit sind daher essenziell
Links wie "Home", "Impressum" oder "Datenschutz" haben in der Navigation nichts zu suchen
Das Wichtigste vorweg: Am Ende des Tages entscheidest du selbst über die Umsetzung deiner Navigation. In diesem Artikel findest du Tipps, welche auf User Interviews und Testings bestehen. Niemand soll sich angegriffen fühlen, wenn die eigene Website-Navigation abweicht ✌🏻
Mach deine Navbar sticky!
Folgendes Szenario: Dein Besucher liest sich einen langen Blogbeitrag durch und möchte von dort aus zu einer anderen Unterseite navigieren. Mit dem Scrollen ist die Navigation verschwunden, denn diese folgt dem Inhalt der Website nicht. Dein Besucher muss also den ganzen Weg zurück nach oben scrollen, um andere Unterseiten zu erreichen. Drei Alternativen gibt es her:
Du hoffst, dass dein User die Abkürzung zum Footer nimmt
Du setzt die gesamten Navigation auf "sticky" und sie begleitet den Nutzer dauerhaft
Du lässt die Leiste einblenden, sobald ein User zurück nach oben scrollt.
Lass das mit dem Hamburger-Menü
Jeder Klick ist einer zu viel. Deswegen solltest du auf Desktop-Geräten auf Hamburger-Menüs als primäre Navigation verzichten. Je nach Zielgruppe kann es sein, dass deine User den Sinn des Icons gar nicht kennen und die Navigation damit nicht finden. Ich verstehe den Design-Aspekt dahinter voll und ganz: Ein Hamburger-Menü macht das Design minimalistischer und moderner, jedoch sollte der Nutzer bei dem Design-Prozess die Hauptrolle spielen.
Mit Usertests und Interviews kannst du schnell herausfinden, ob deine Zielgruppe die Bedeutung des Icons versteht. Ist dem nicht so, solltest du auf die klassische Navigation in deinem Webdesign zurückgreifen.
Weniger ist mehr
Du stehst im Supermarkt vor einem Marmeladenregal und kannst dich wegen der enormen Menge an Gläsern nicht entscheiden. So ähnlich kann es bei einer überladenen Website-Navigation enden. Haben wir im Supermarkt die Wahl zwischen drei verschiedenen Gläsern, so wird uns die Entscheidung deutlich leichter fallen. Versuche also, deine Navigation zu verschlanken.
Sites wie das Impressum, deine AGB oder die Datenschutzerklärung haben in der Hauptnavigation nichts zu suchen. Binde stattdessen deine wichtigsten Unterseiten ein. Dies könnten beispielsweise Produkt- oder Dienstleistungsseiten, Informationen über dich oder das Unternehmen ("Über uns") und die Kontaktseite sein. Einige Unterseiten können mit Sicherheit auch gebündelt werden.
Seiten wie "Team", "Unsere Vision", "Historie" und "Karriere" lassen sich in die "Über uns"-Hauptkategorie unterbringen.
Logo vs "Home"
Ein weiteres Thema, an dem sich die Geister scheiden. In einem Land vor unserer Zeit war es völlig normal, eine "Home"-Verlinkung in die Navigation einzubauen - neben dem üblichen Logo-Link versteht sich. Der Nutzer hatte also zwei Möglichkeiten, um auf die Startseite zurückzukehren: Ein Klick auf das Logo, in der Regel oben links oder ein Klick auf "Home" - für gewöhnlich nur ein paar Pixel neben dem Logo.
Persönlich bin ich kein Fan des separaten "Home"-Links, teste es aber bei jedem Projekt mit echten Nutzern. Bisher waren die Antworten eindeutig: Über 95 % wissen, dass sie durch einen Klick auf das Logo zurück zur Homepage gelangen. Trotzdem gibt es Nutzer mit wenig Internet-Erfahrung, die diesen Schritt nicht kennen. Mein Tipp daher: testen, testen, testen.
Finde heraus was deine User wollen
Analyse-Tools wie Google Analytics und Piwik bieten dir eine genaue Übersicht, welche Seiten besonders häufig aufgerufen werden. Willst du eine Schippe drauflegen, solltest du dich einmal Heatmap-Tools befassen. Diesen zeichnen auf, wie deine Website-Besucher sich auf deinen Seiten verhalten, wie weit sie scrollen, wo sie klicken, wie sie mit ihrer Maus arbeiten.
Als Auswertung erhältst du entweder einen Screenshot deiner Website mit farblichen Hervorhebungen oder gar reale Aufzeichnungen einer User-Session. Auf diesem Weg kannst du eventuelle UX-Fallen schnell identifizieren und beheben. Beispiel: Die meisten Nutzer wissen, dass unterstrichener Text Links sind und klicken diesen fast schon automatisch an.
In den letzten Jahren entwickelte sich ein Webdesign-Trend, welcher Textbereiche markant unterstricht um somit mehr Aufmerksamkeit zu erlangen. Stellst du auf der Heatmap fest, dass User häufig versuchen, dieses Gestaltungselement anzuklicken, solltest du nachbessern.
Nutze vereinfachte Icons
Nicht immer haben wir viel Platz, um Links darzustellen, besonders auf mobilen Geräten kann es schnell eng werden. In vielen Fällen kann die klassische Navigation auf Mobilgeräten gegen eine minimalistische Icon-Leiste ausgetauscht werden. Icons wie Home, den Warenkorb oder Favoriten sind uns durch die Nutzung von Apps bekannt.
Ist dir aufgefallen, dass Instagram in ihren beiden Hauptnavigationen ausschließlich Icons einsetzt? UI-Designer aus dem Hause LinkedIn, WhatsApp oder Vodafone gehen auf Nummer sicher und kombinieren Icons mit Text.
Verwende einen Call to Action in deiner Navigation
Dank Call to Actions (engl.: Handlungsaufforderung) können wir dem Nutzer indirekt mitteilen, welche Aktion wir von ihm erwarten bzw. was wir uns erhoffen. Ein ganz klassischer CtA kann ein Button im Webdesign sein. Diese werden auf einer kommerziellen Seite wiederkehrend eingebaut, sodass der Webseitenbesucher schnell an das Ziel gelangt.
Und auch in der Webseiten-Navigation macht ein Call to Action durchaus Sinn. Dienstleister wie beispielsweise Friseure können mit einem CtA auf einen Terminkalender verweisen. Apple verleitet auf seinen Produktseiten zum Kauf, Google und Uber bewerben den Registrierungsprozess. Finde also heraus, welche Art von Call to Action für dein Projekt sinnvoll ist und hebe ihn optisch von den anderen Links ab.
Beachte die gängigen UX-Regeln
Mit diesen einfach umsetzbaren Design-Regeln lieferst du deinen Besuchern eine solide Navigation:
zeige klar und deutlich, auf welcher Seite sich der Nutzer gerade befindet. Das kannst du mit einer aktiven Farbe, einem Balken unter dem Navigationslink oder einem Kasten um den Link herum darstellen - diesen Status kannst du auch als Hover-Effekt einbauen
verschachtelst du mehrere Unterseiten in einem Hauptnavigationspunkt, so weise den User darauf hin. Ein Dropdown-Icon bietet sich hier an. Andernfalls ist die Wahrscheinlichkeit sehr hoch, dass der User nichts von den anderen Unterseiten zu sehen bekommt
nicht alle Menschen haben kleine Finger. Trotzdem sollten mobile User mit Bärenpranken die Möglichkeit haben, sich leicht durch eine Navigation zu tippen. Erhöhe dafür die Padding-Werte deiner Links. Dadurch wird der Linkbereich größer
achte darauf, dass deine Links farblich gut lesbar sind, einen hohen Kontrastwert zur Hintergrundfarbe der Navigation haben. Hilfe kann dir ein Contrast Checker bieten
platziere dein Logo auf der linken Seite deiner Navigation. Dies ist natürlich keine Pflicht, aber die meisten Nutzer erwarten dies einfach
gewährleiste eine gute Lesbarkeit, indem deine Schriftgröße mindestens 16pt beträgt
Fazit
Das einfache Rezept für die perfekte Website-Navigation gibt es leider nicht. Stattdessen bedeutet eine gute Navigation stetiges Testen. Deine Webseitenbesucher sollten so einfach wie nur möglich an ihr Ziel zu gelangen. Mache dich mit der Nutzerintention vertraut und finde heraus, wie sich Besucher auf deiner Seite bewegen, welche Unterseiten besonders häufig aufgerufen werden.
Statistiken über die Ein- und Ausstiegsseiten, Absprungraten und Verweildauer helfen dir, deine User zu verstehen und Inhalte für sie zu optimieren. Auch Tools wie Hotjar können dir mit Heatmaps und Recordings bei der Analyse unter die Arme greifen und Fehlerquellen aufzeigen.
* Um den Lesefluss nicht zu beeinträchtigen wird zwar nur die männliche Form genannt, stets aber die weibliche Form gleichermaßen mitgemeint. Menschen jeglichen Geschlechts sind mir als Leser*innen herzlich willkommen 🌈❤️
Du möchtest in eine neue Website investieren und bist auf der Suche nach einem professionellen Webdesigner? Lass uns unverbindlich über deine Probleme, Wünsche und Projektziele reden. Sende mir einfach eine Projektanfrage und wir gehen es an!