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.
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 ✌🏻
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:
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.
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.
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.
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.
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.
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.
Mit diesen einfach umsetzbaren Design-Regeln lieferst du deinen Besuchern eine solide Navigation:
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.
