Website-Navigationsbeispiele, von denen du lernen kannst

Es gibt zwei Typen von Einkäufern. Die einen gehen im Geschäft direkt zum ersten Verkäufer, fragen nach dem gesuchten Produkt und lassen sich dorthin führen. Die anderen machen sich selbst auf die Suche und folgen den Schildern bis sie das Produkt gefunden haben. Das gleiche Verhalten sieht man auch auf Websites. Die einen nutzen die Suchleisten und die anderen nutzen die Website-Navigation. Je besser die Navigation aufgebaut ist, desto schneller finden sie das gesuchte und geben nicht frustriert auf. In diesem Blogartikel zeigen wir anhand Beispielen, wie du deine Website-Navigation strukturiert und intuitiv aufbaust.

 

Was ist eine Website-Navigation?

Eine Website-Navigation ist ein Orientierungselement, das auf Websites eingesetzt wird, um Benutzern die Navigation durch die Website zu ermöglichen. Der Zweck einer Website-Navigation ist es, die Websitebesucher problemlos durch die Strukturen einer Website zu führen. Dabei weiß der Websitebesucher immer, wo er sich gerade auf der Website befindet und findet schnell einen Weg, zu seiner gesuchten Seite zu gelangen.

Um das zu ermöglichen, gibt es verschiedene Bestandteile in einer Websitenavigation:

  • Das Menü bildet über mehrere hierarchisch angeordnete Kategoriestufen den wichtigsten Inhalt der Website ab und leitet den Websitebesucher über Links dorthin.
  • Die Utilities-Leiste kommt häufig auf umfangreichen Websites zum Einsatz und beinhalten z. B. Links zum Konto oder Warenkorb.
  • Zusätzlich können die Inhalte auf einer Kategorieseite über Filter weiter eingegrenzt werden.
  • Damit die Websitebesucher immer wissen, wo sie sich gerade befinden, gibt es Breadcrumbs. Das sind Textlinks, die zu den jeweils übergeordneten Seiten verlinken.
  • Am Ende der Seite ist noch die Footer Navigation zu finden. Sie beinhaltet hilfreiche Links, meistens zu Content-Seiten, wie „Über uns“.

 

Website-Navigationsbeispiel für den Aufbau

Hier möchten wir gleich vorweg nehmen: Erfinde bei der Struktur und dem Aufbau deiner Website-Navigation das Rad nicht neu. Die Benutzer haben sich an die gängigen Strukturen gewöhnt und können diese einfach und schnell bedienen. Deshalb erklären wir dir im Folgenden die Bestandteile davon am Beispiel vom Baumarkt toom.

 

Die Struktur einer Website-Navigation am Beispiel toom

Bei der Struktur der Navigation solltest du dir zunächst dein Sortiment bzw. dein Angebot genau anschauen, um es anschließend einordnen zu können. Im Folgenden zeigen wir dir am Beispiel toom, welche Elemente du zu den jeweiligen Bestandteilen einer Website-Navigation zuordnen kannst.

Ein Screenshot aus dem Website-Menü vom Toom Baumarkt, das als Website Navigation Beispiel dient.

Screenshot der Website-Navigation im toom Baumarkt

Logo

In Bereich 1 ist das Logo, das in den meisten Fällen in der linken oberen Ecke platziert ist und die Benutzer wieder zur Startseite führt. Das Logo gehört zur Persistent Navigation, was bedeutet, dass es auf jeder Seite zu finden ist und dem Nutzer immer zeigt, wo er ist (sehr nützlich bei 10 parallel geöffneten Tabs).

Das Logo gehört zur Persistent Navigation, was bedeutet, dass es auf jeder Seite zu finden ist

Utilities

In Bereich 2 findest du nützliche Links, die nicht direkt Teil der Content Hierarchie sind. Sie beinhalten für gewöhnlich Links, die einem helfen die Seite zu nutzen, wie z. B.

  • Sign in / Mein Konto
  • Hilfe
  • Suchleiste
  • Warenkorb (bei Online Shops)

oder Informationen über die Websitebetreiber, wie „Über uns“ oder „Kontakt“. Hier sollten nur die wichtigsten Links eingesetzt werden (am besten 4-5). Die Hilfsmittel kommen meistens nur bei größeren Website-Navigationsstrukturen zum Einsatz.

Menü

In Bereich 3 ist das Menü mit den Links zu den Hauptkategorien. Die Hauptnavigation stellt die oberste Hierarchiestufe dar und bildet dein Angebot über zusammenfassenden Kategorien, wie hier z. B. „Bad & Sanitär“ ab.

In Bereich 4 findest du die zweite Navigationsebene. Hier sind die Links zu den Unterkategorien der momentan aktiven Überkategorie abgebildet. Im Beispiel von toom öffnet sich die zweite Navigationsebene jeweils beim Hovern über die Hauptkategorie.

Weitere Beispiele um zur zweiten Navigationsebene zu gelangen, sind:

  • Öffnen eines Dropdown Menüs beim Klick auf die Überkategorie
  • Öffnen der entsprechenden Kategorieseite mit integrierten zweiten Navigationsebene beim Klick auf die Überkategorie

Filter

Hier siehst du die Filter auf der Kategorieseite Bad & Sanitär, mit denen die Produkte noch weiter eingegrenzt werden können. Das können entweder weitere Kategorien oder auch z. B. der gewünschte Preisrahmen sein.

Ein Screenshot aus der Website-Filter-Funktion vom Toom Baumarkt, die als Website Navigation Beispiel dient.

Screenshot der Kategorieseite Badspiegel bei dem Online Shop von toom

Footer Navigation

Weitere Links können in dem Footer platziert werden. Er befindet sich am Ende jeder Seite. Dort werden weitere nützliche Informationen und Links eingesetzt, die häufig zu Content-Seiten führen, wie z. B. den FAQs:

Ein Screenshot aus dem Website-Footer vom Toom Baumarkt, der als Website Navigation Beispiel dient.

Screenshot des Footers mit hilfreichen Links beim Baumarkt Toom

Wenn du noch mehr zum Setzen von internen Links erfahren möchtest, haben wir diesen Blogartikel für dich: Wieso interne Links unheimlich wichtig sind

 

Website-Navigationsbeispiele für das Design

Wie auch bei der Struktur solltest du dich im Design an die gängigen und gelernten Standards halten, damit deine Nutzer keine Schwierigkeiten haben, sie zu bedienen. Trotzdem gibt es im Design Spielraum und Möglichkeiten die Navigation individuell zu gestalten.

 

1. Design-Beispiel: Sparkasse

Hier möchten wir uns den You Are Here Indikator anschauen. Er zeigt den Nutzern an, wo sie sich gerade im Bereich der Navigation befinden und sollte daher deutlich zu erkennen sein.

Die Sparkasse nutzt hier einen farblichen Indikator, der sehr deutlich hervorsticht. Allerdings kommt der Indikator der Unternavigation (grau) auch als default Farbe in der Hauptnavigation vor, was unserer Meinung nach verwirren könnte. Was denkst du darüber? Schreib deine Meinung dazu gerne in die Kommentare.

Ein Screenshot aus der Website von der Sparkasse, die als Website Navigation Beispiel dient.

Screenshot Website-Navigation der Sparkasse

 

2. Design-Beispiel: essen & trinken

Hier ist die zweite Navigationsebene sehr groß und kann nicht über ein einfaches Drop-Down-Menü unterhalb der Überkategorie gelöst werden. Hier füllt die Unternavigation die gesamte Website-Breite, allerdings ist durch den farbigen Rahmen um den Kasten und der dicken blauen Linie unter der Überkategorie die Zuordnung sehr gut zu erkennen.

Ein Screenshot aus der essen&trinken Website, die als Website Navigation Beispiel dient.

Screenshot der Website-Navigation mit zweiter Navigationsebene aus dem Online-Magazin essen&trinken

 

3. Design-Beispiel: Etsy

Ein Screenshot aus der Etsy-Website, die als Website Navigation Beispiel dient.

Screenshot der Website-Navigation mit Unterkategorien des Verkaufportals Etsy

Auch hier ist über die Linie unter der Überkategorie deutlich zu erkennen, wozu die Unternavigation gehört. Auch eine Überschrift in der linken oberen Ecke („Alles in „Kleidung & Schuhe“➔) zeigt dem Nutzer deutlich, wozu der Menüpunkt gehört. Durch einen Hover ausgelöst, gelangt man auf der rechten Seite zur nächsten untergeordneten Kategorie. Hier haben wir auch nichts einzuwenden, bis auf den Link „Alles in „Für Frauen“➔“ der unglücklicherweise unterhalb den Schuhen für Frauen angeordnet ist, allerdings auf die Kategorieseite „Kleidung&Schuhe“ für Frauen verlinkt.

 

4. Design Beispiel: Jochen Schweizer 

Ein Screenshot aus der Jochen Schweizer Website, die als Website Navigation Beispiel dient.

Screenshot der Website von Jochen Schweizer mit einem weiteren Menü auf der Kategorieseite „Reisen & Kurzurlaub“

Hier möchten wir die einfach klickbare zweite Navigationsebene zeigen. Sie öffnet sich erst im Header der Kategorieseite beim Klick auf die jeweilige Kategorieseite, wie z. B. „Reisen & Kurzurlaub“. Dadurch gibt es für den Nutzer keinerlei Probleme in der Zeile eines Drop-Down-Menüs zu verrutschen.

 

Website-Navigation – eine der wichtigsten Bestandteile deiner Website

Damit du auch weißt, warum du so viel Mühe in die Website-Navigation stecken solltest, wollen wir dir hier die enorm wichtige Rolle und starke Bedeutung einer guten Website-Navigation für deine Website in 5 Punkten zusammenfassen:

1. Zeige deinen Benutzern, wo sie sind

Über eine visuelle Markierung (wie in den Design-Beispielen) gibt eine Navigation immer einen Hinweis, wo sich der Benutzer auf der Seite befindet.

2. Helfe deinen Benutzern zum gewünschten Ziel zu gelangen

Das ist der erste ersichtliche Punkt, dass eine Navigation den Benutzer zu einer bestimmten Seite navigiert. Nur klingt das leichter als gesagt. Allein eine Navigation in eine Website einzubauen führt nicht immer automatisch zum Ziel. 😉 Wenn die Nutzer darüber nicht das Gesuchte finden, werden sie die Seite schnell wieder verlassen.

3. Zeige, was deine Website alles anbietet

Da eine gute Website-Navigation den Content deiner Seite logisch und hierarisch gliedert, können die Benutzer deiner Seite schnell erkennen, was dort angeboten wird. Der Content ist hier durch eine klare Struktur wiedergegeben und die Benutzer können dadurch erahnen, ob sie auf deiner Seite fündig werden. Die Struktur ist besonders wichtig, da die Nutzer, falls sie glauben, nicht das Gesuchte bei dir finden zu können, schnell wieder weg sind.

4. Gebe vor, wie man die Website nutzen soll

Die Hierarchie einer Website-Navigation zeigt dem Benutzer, welchen Weg er gehen und wo er sich zunächst eine Übersicht verschaffen sollte und später weiter in die Details gehen kann.

5. Schaffe einen positiven ersten Eindruck über deine Website-Navigation

Bei dem Besuch einer neuen Website versucht man möglichst schnell herauszufinden, wie seriös, glaubwürdig und auch qualitativ hochwertig die Website und das Team dahinter ist. Mit einer klar strukturierten und intuitiv bedienbaren Navigation hast du eine super Möglichkeit zu überzeugen.

 

Fazit: Halte dich an die gängige Struktur und nutze eindeutige Design-Elemente

Wie zu Beginn bereits erwähnt, ist die Website-Navigation enorm wichtig für deine gesamte Website-Präsenz. Hat dein Benutzer bereits hier Probleme, das Gesuchte zu finden, oder ihm wird gar nicht klar, was er überhaupt bei dir finden kann, hast du die Chance auf einen positiven ersten Eindruck verspielt. Da wir uns alle bereits beim Surfen durch das WWW an bestimmte Standards gewöhnt haben und diese auch schnell und einfach bedienen können, solltest du dich in der Struktur und dem Aufbau deiner Website-Navigation dringend an die gängigen Standards halten. Bei dem Design hast du noch genügend Spielraum, deinen eigenen Schliff mit einzubringen. Gehe aber auch hier sicher, dass du deinen Website-Benutzern immer deutliche Hinweise gibst, wo sie sich gerade befinden.

0 830
Fanny

Leave a Reply