Zum Inhalt springen

Dos & Don’ts – wie du deine Website-Navigation intuitiv gestaltest

|
10. März 2021
Inhalt

Die User von Websites sind anspruchsvoller und ungeduldiger denn je. Überraschen sollte diese Erkenntnis nicht, da das Angebot an Websites und Online-Shops regelrecht explodiert. Laut Statista ist allein die Anzahl an .de-Domains zwischen den Jahren 2000 und 2020 von 3,7 Mio. auf mehr als 16 Mio. gestiegen.¹ Um dennoch herauszustechen, solltest du bei der Entwicklung deiner Website darauf achten, dass User diese intuitiv nutzen können und somit ein positives Nutzererlebnis haben. Ein zentrales Element stellt hierbei die Website-Navigation dar. Diese gewährleistet die Möglichkeit, sich zu orientieren. Die Entscheidung, ob jemand auf einer Website bleibt oder sie verlässt, geht laut einer Studie häufig mit der Usability der Navigation einher. ² Eine Optimierung erhöht daher die Wahrscheinlichkeit, eine Steigerung der Conversion-Rate zu erzielen. Erfahre hier wichtige Dos and Don’ts für die Gestaltung deiner Website-Navigation.

Dos: Mit diesen Tricks wird die Navigation zum Hingucker

Es gibt einige Maßnahmen, die eine große Wirkung erzielen können. Allerdings – wie so oft bei Usability-Themen – kommen diese vielen Website-Betreibern häufig nicht sofort in den Sinn.

1. Wähle die Navigationspunkte strategisch aus

Die Navigationspunkte sollten bereits Kernaussagen darüber treffen, was dein Unternehmen anbietet und welche Aktivitäten auf der Seite ermöglicht werden. Ist das Ziel des Besuchs eines Online-Shops beispielsweise der Kauf eines Kleides und es existiert ein entsprechendes Angebot, so sollte dies auch klar in der Navigation erkennbar sein. So können Nutzer auf den ersten Blick entscheiden, ob sie an die richtige Adresse gelangt sind und eine Chance sehen, ihr Ziel zu erreichen. Nicht zu vernachlässigen ist außerdem die Wortwahl. Sprich die Sprache deiner Kunden! Extrem spezielle Fachbegriffe eignen sich nicht für die Navigation, wenn diese dem Publikum gar nicht bekannt sind und es mit Fragezeichen im Kopf vor dem Rechner sitzen lässt.

Screenshot der Website-Navigation von aboutyou.de
Beispiel für eine zielführende Website-Navigation / Bildnachweis: Screenshot von aboutyou.de (26.02.2021)

2. Zeige Nutzern ihren Aufenthaltsort auf der Website und ihren Weg dorthin

Es gibt linkdominante User, die sich durch die Website klicken, um einen Überblick über den angebotenen Content zu bekommen. Insbesondere bei einer hohen Anzahl an Unterseiten ist es hilfreich, jederzeit angezeigt zu bekommen, wo man sich gerade befindet. ³ Hierbei hilft es, sich ins Gedächtnis zu rufen, dass nicht alle User pausenlos recherchieren, sondern zwischendurch auch mal ein Kaffee geholt wird. Längst nicht jeder erinnert sich nach einer halben Stunde noch daran, welche Klicks zu der aufgerufenen Seite geführt haben. Aus diesem Grund sollte der aktuell ausgewählte Navigationspunkt beispielsweise durch eine farbige Markierung deutlich hervorgehoben werden. Das sorgt für eine gute Orientierung und ein damit einhergehendes Sicherheitsgefühl.

Screenshot der Website-Navigation von hoeffner.de
Beispiel für die Markierung einer Unterseite in der Navigation / Bildnachweis: Screenshot von hoeffner.de (26.02.2021)

Außerdem kann es hilfreich sein, sogenannte Breadcrumbs in Kategorie-und Produktdetailseiten einzubauen. Diese stellen Pfade aus den bisher angeklickten Unterseiten dar, durch die Nutzer jederzeit zu dem bereits angesehenen Content zurückkehren können. ⁴ Das ist vor allem dann hilfreich, wenn User bestimmte Inhalte noch einmal genauer anschauen möchten.

Screenshot eines Breadcrumbs von sophienhof.de
Beispiel für den Einsatz von Breadcrumbs / Bildnachweis: Screenshot von sophienhof.de (26.02.2021)

3. Verlinke jede Unterseite mit der Startseite

Häufig wird vergessen, dass die Startseite immer noch einen wichtigen Stellenwert hat. Sie ist das Aushängeschild des Unternehmens und sollte deshalb nicht vernachlässigt werden. Heutzutage gelangen viele Nutzer durch externe Links wie Social-Ads-Kampagnen auf eine Unterseite der Website. Wenn diese ihr Interesse weckt, schauen sie sich gegebenenfalls noch weitere Seiten an.

Den besten Überblick bekommen die User auf der Startseite. Aus diesem Grund solltest du jede Unterseite mit der Startseite verlinken. Es gibt hierzu einen Weg, der sich etabliert hat und als vom Nutzer erlernt angesehen werden kann: Die Verknüpfung der Startseite mit dem Unternehmenslogo.

Screenshot des Unternehmenslogos von telekom.de
Beispiel für ein anklickbares Logo, das zurück zur Startseite verlinkt / Bildnachweis: Screenshot von telekom.de (02.03.2021)

4. Integriere eine Suchfunktion in die Navigation

Ich habe bereits erwähnt, dass es linkdominante User gibt. Allerdings gibt es auch Nutzer, die ihr Ziel mit der Eingabe von Suchbegriffen erreichen möchten, um nicht allzu viel für sie nicht relevanten Content überfliegen zu müssen. ⁵ Für die Steigerung deiner Conversion-Rate ist es essenziell, auch diese Personen abzuholen. Das funktioniert am besten, wenn du eine klar erkennbare Suchfunktion auf Höhe der Navigation integrierst. Nutze hierfür die Erkenntnis, dass Menschen sich mit der Zeit an bestimmte Dinge gewöhnen. Das Lupensymbol in Kombination mit einem ausgeklappten Suchfeld ist im Web als Zeichen für die Suche bekannt, also nutze diese Tatsache für deinen eigenen Erfolg.

Screenshot von der Suchfunktion auf amazon.de
Beispiel für eine sichtbare Suchfunktion / Bildnachweis: Screenshot von amazon.de (26.02.2021)

Don’ts: Diese Fehler solltest du in deiner Website-Navigation vermeiden

Es gibt viele Probleme im Zusammenhang mit der Navigation, die du vermeiden solltest, damit keine potenziellen Kunden abspringen.

1. Platziere die Navigation nicht an ungewohnten Stellen

Widerstehe der Versuchung, die Navigation an Stellen der Website zu platzieren, an der sie auf anderen Websites nicht zu finden ist. Wie bereits erwähnt sind einige Dinge vom User erlernt. Ein Beispiel für eine solche sogenannte Konvention ist die Tatsache, dass die Navigation sich in der Regel horizontal oben oder vertikal links befindet. ⁶ Es wäre für User daher irritierend, sie auf der rechten Seite oder unten vorzufinden.

Screenshot von der ungewöhnlichen Navigations-Platzierung von elkline.de
Beispiel für eine ungewöhnliche Navigations-Platzierung / Bildnachweis: Screenshot von elkline.de (26.02.2021)

2. Ein extravagantes Navigations-Design sollte nicht im Fokus stehen

Übertreibe es nicht mit ausgefallenen Designs. Eine Website-Navigation dient in erster Linie dazu, User durch die Website zu führen. Eine zu hohe Anzahl an Farben oder schlecht lesbare Schriftformen sind hierbei aufgrund der Reizüberflutung und nicht gegebenen Übersichtlichkeit alles andere als zielführend.

Screenshot der Website-Navigation des Universitätsklinikums Frankfurt
Beispiel für eine nicht zielführende Farbgestaltung der Navigation / Bildnachweis: Screenshot von kgu.de (25.02.2021)

3. Vergiss nicht, die Navigation an mobile Endgeräte anzupassen

Im Zeitalter von Smartphones, Tablets & Co.  hat sich das Nutzerverhalten verändert. Die User möchten möglichst viel möglichst schnell schaffen – und zwar unterwegs. Daher liegt es nahe, dass Webseiten-Betreiber ihre mobile Website optimieren sollten. Wenn sich beispielsweise die Navigation beim Scrollen nicht mitbewegt, kostet das User Zeit und Nerven, da sie immer wieder zum Anfang der Seite zurückkehren müssen, bevor sie einen Menüpunkt auswählen können. Das könnte sie im Worst Case Scenario dazu bewegen, deine Website zu verlassen und ihr Glück bei der Konkurrenz zu suchen.

Screenshots der mobilen Website-Version von philips.de
Beispiel einer mobilen Navigation, die sich beim Scrollen nicht mitbewegt / Bildnachweis: Screenshots von der mobilen Version von philips.de (01.03.2021)

Fazit

Die Ansprüche der User an eine Website werden immer höher und Unternehmer sollten sich damit auseinandersetzen, welche Stolpersteine auf ihrer Website Nutzer daran hindern, zu Kunden zu werden.

Die Navigation ist ein bedeutendes Element und bietet daher auch viel Fläche für kleine, aber entscheidende Fehler.

Daher sollte die Navigation vor allen Dingen

  • selbsterklärend
  • oben oder
    links platziert
  • an mobile
    Endgeräte angepasst

sein und dem User auf jeder Unterseite die Orientierung so leicht wie möglich machen.

Hast du noch Fragen zu diesem Thema? Dann wende dich doch gerne an uns. Als professionelle Conversion-Optimierung-Agentur helfen wir dir gerne mit Usability-Analysen und Website-Analysen weiter!

Viele Grüße

Natalie


Kostenlose Online-Marketing-Webinare

Wir bieten jede Woche kostenlos zwei Webinare an. Alle Themen und die nächsten Termine findet ihr auf: web-netz.de/webinare.


Quellen:

[1] URL: https://de.statista.com/statistik/daten/studie/39530/umfrage/entwicklung-der-domainzahl-mit-endung-de/, aufgerufen am 09.03.2021.

[2] Angerbrandt, M. et al.: A Case Study: How to Restructure an Open Source Teaching Website to Improve Global and Digital Presence and Usage, 2015. URL: https://pdfs.semanticscholar.org/57b7/691adc9c0632e044714156455567e8cc3034.pdf, aufgerufen am 10.03.2021.

[3] Vgl. Krug, S.: Don’t make
me think: Web & Mobile Usability. Heideberg: mitp Verlags GmbH & Co. KG,
3. Auflage, 2014, S. 79.

[4], [5] Vgl. Krug, S.: Don’t
make me think: Web & Mobile Usability. Heideberg: mitp Verlags GmbH &
Co. KG, 3. Auflage, 2014, S. 58-59.

[6] Vgl. Barker, S.: 9
Website Navigation Mistakes You Might Be Making (Updated July 2019), 2019. URL:
https://shanebarker.com/blog/website-navigation/, aufgerufen am 01.03.2021.


Bildnachweis Titelbild: undrey | istockphoto.com

Gefallen? Dann einfach teilen!

Autor/in

webnetz GmbH

Webinare

Kommende Webinare passend zum Thema

Newsletter

Online-Marketing-News direkt ins Postfach

Blogs, Podcasts, Webinare zu aktuellen Themen:
Melden Sie sich jetzt für unseren Newsletter an.

Kommentare

Noch sind keine Kommentare vorhanden. Das ist deine Chance dies zu ändern!