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


Verpasse keine Inbound Marketing News: Melde dich zum Magnetise Newsletter an! Jetzt anmelden


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.

1 112336
Fanny

Fanny ist Co Founder der Inbound Marketing Agentur Magnetise. Mit Magnetise unterstützt sie Unternehmen dabei, einen digitalen Vertriebskanal aufzubauen. Danach können Unternehmen diesen selbstständig weiterführen und nachhaltig Leads generiert werden.

72 Comments

  1. Fantastic beat ! I wish to apprentice at the same time as
    you amend your site (https://justpaste.it/5cvly), how can i
    subscribe for a blog website? The account aided me a acceptable deal.

    I were tiny bit familiar of this your broadcast offered brillliant transparent idea.

  2. mexican pharmacy online : india pharmacy online online pharmacy cialis

  3. adderall online pharmacy : online pharmacy mexica adderall online pharmacy

  4. cvs pharmacy online : online pharmacy tech programs mexica online pharmacy

  5. online pharmacy hydrocodone : cvs pharmacy online online pharmacy adderall

  6. reputable online pharmacy : mexica pharmacy online review mexican pharmacies online

  7. online mexican pharmacy : tramadol online pharmacy mexican pharmacies online

  8. Randyjoync

    Hello! cvs pharmacy online application excellent internet site.

  9. Randyjoync

    Howdy! walgreens online pharmacy excellent internet site.

  10. Randyjoync

    Hi there! mexican online pharmacy great website.

  11. Philliproogy

    Hello there! cure ed great site.

  12. Philliproogy

    Hi there! top ed drugs beneficial website.

  13. Philliproogy

    Hello there! ed pills good internet site.

  14. Philliproogy

    Hello! ed pills otc beneficial internet site.

  15. Philliproogy

    Hi! non prescription erection pills very good web page.

  16. Philliproogy

    Hello! ed drugs compared beneficial website.

  17. Charlesteask

    Hello there! online pharmacies very good site.
    bni

  18. Charlesteask
  19. Charlesteask

    Hi there! online pharmacies canada very good web site.
    fsy

  20. Charlesteask

    Howdy! cost drugs excellent site.
    eks

  21. Charlesteask

    Hello there! no 1 canadian pharcharmy online excellent internet site.
    ovo

  22. Charlesteask

    Howdy! canadian pharcharmy online beneficial internet site.
    lwj

  23. Charlesteask

    Hi there! highest rated canadian pharmacies excellent website.
    rwt

  24. Charlesteask

    Hello there! no prior prescription required pharmacy excellent web site.
    ena

  25. Charlesteask

    Hi! medications canada beneficial web site.
    gjj

  26. Charlesteask

    Hello! canadian pharmacies top best very good site.
    ude

  27. Charlesteask

    Howdy! most reliable canadian pharmacies very good site.
    edz

  28. DelmarObede

    Hi there! online pharmacy prescription very good internet site.
    ihm

  29. DelmarObede
  30. DelmarObede

    Hi! cvs pharmacy application online great web page.
    yjh

  31. DelmarObede

    Hi there! are online pharmacies legit great internet site.
    tft

  32. DelmarObede

    Hi there! pet pharmacy online very good internet site.
    naw

  33. Careylialf

    Hello there! us online pharmacy good web site.
    hyz

  34. Careylialf

    Hello there! walmart pharmacy online good site.
    cpo

  35. Careylialf

    Howdy! online pharmacies canada excellent web page.
    gao

  36. JesseBaics

    Howdy! buy furosemide pills good internet site.
    wgg

  37. JesseBaics

    Hi there! buy furosemide excellent internet site.
    shq

  38. JesseBaics

    Hello! buy lasix pills excellent website.
    cqj

  39. JesseBaics

    Hi! purchase lasix online no prescription excellent web page.
    fcl

  40. JesseBaics

    Howdy! buy lasix no prescription great website.
    zms

  41. JesseBaics

    Howdy! buy lasix medication beneficial web page.
    pkz

  42. JesseBaics

    Howdy! buy lasix no prescription excellent web site.
    bgy

  43. JesseBaics

    Howdy! buy lasix beneficial web page.
    prd

  44. JesseBaics

    Hello! buy lasix no prescription very good internet site.
    ycx

  45. JesseBaics

    Hello! buy lasix uk very good site.
    tks

  46. JesseBaics

    Hi! order lasix good web page.
    tnt

  47. RussellMig

    Hello! erectile dysfunction drugs beneficial internet site.
    get

  48. RussellMig

    Hi there! men’s ed pills very good website.
    itz

  49. Iam sure thks paragraph has touched all the internet viewers, its really really good
    paragrapph on buildxing up new web site.

    My web-site :: ccie rack rentals (https://pdfmedia.net)

  50. RussellMig

    Hi there! ed medications list good internet site.
    wre

  51. RussellMig

    Hello! male ed drugs beneficial web page.
    nvk

  52. buy propecia no rx : buy propecia uk buy generic propecia

  53. propecia : propecia cheap buy propecia online

  54. buy propecia pills online : buy propecia usa buy generic propecia

  55. propecia cheap : buy propecia online buy propecia medication

  56. buy propecia medication : purchase finasteride propecia cheap

  57. ThomasHop

    Hi! buy propecia pills good site.
    lmz

  58. ThomasHop

    Howdy! purchase finasteride beneficial website.
    ers

  59. ThomasHop

    Howdy! buy propecia usa excellent website.
    uhk

  60. ThomasHop

    Hello! propecia cheap beneficial internet site.
    sph

  61. ThomasHop

    Hello! buy sildalis 25 mg good internet site.
    gda

  62. ThomasHop

    Hi there! buy sildenafil pills beneficial web page.
    hlm

  63. ThomasHop

    Hi there! buy sildalis pills online beneficial site.
    zts

  64. ThomasHop

    Hi! buy sildalis cheap excellent website.
    bce

  65. Быстровозводимые здания – это новейшие строения, которые отличаются большой скоростью строительства и гибкостью. Они представляют собой сооруженные объекты, образующиеся из предварительно выделанных составляющих либо модулей, которые способны быть скоро собраны на участке строительства.
    Быстровозводимые здания из металлоконструкций и сэндвич панелей отличаются податливостью и адаптируемостью, что дозволяет легко преобразовывать и переделывать их в соответствии с потребностями покупателя. Это экономически успешное а также экологически надежное решение, которое в крайние годы получило маштабное распространение.

  66. vavada зеркало 2022
    онлайн казино вавада
    вавада казино официальный сайт
    vavada 888
    вавада вход в личный кабинет

    Як вивести разве привнести гроші сверху рахунок язык букмекерськібуква компанийі Vavada? БУКВАізнайтесь усищеі подробиці относительно введення та виведення счетів течение язык Vavada.
    вавада казино онлайн
    вавада 444
    казино вавада скачать
    vavada ua
    vada recipe

  67. пин ап вхід
    пін ап гральні автомати
    пін ап онлайн
    пін ап казіно онлайн
    pin up casino зеркало
    pin up гральні автомати
    pinuporgesen.vn.ua
    pin up ua вход
    пин ап
    пін ап
    pin up казино
    pinup
    пін ап вхід
    пін ап казіно
    пінап казіно

    ін Ап – це казино та платформа для іграрних продуктів, яка представлена масштабним збором баккару, рулетки та американській рулетки у багатьох формах. Платформа понад багатьма видами найкращих іграрних продуктів, згрупованих так, щоб відповісти вимогам гравця. Однією з принципових мет Пін Ап є його пошуковий алгоритм.
    пін ап вхід
    український pin up
    український пін ап
    пінап автомати
    казіно пін ап
    пін ап офіційний сайт
    пін ап грати онлайн
    pin up реєстрація
    pinuporgesen.vn.ua
    ігрові автомати пін ап
    pin up ua casino
    пін ап гральні автомати
    пін ап реєстрація
    пінап
    пін ап автомати

  68. Cпецтехніка

    Будь-яке виробництво в течение сучасному світі безграмотный обращаться сверх використання технічних засобів. Для виконання вузькоспеціалізованих экстерьерів течение сокіт існують машини і механізми, якожеі об’єднані язык велику групу – спецтехніка.
    Cпецтехніка

  69. motoparamoga.vn.ua/uk/v-shlema/pol-is-detskiy/

    Инет-магазин числом торговле байков, квадроциклов, скутеров и еще другой мототехники «Motoparamoga». Симпатичные стоимость товаров а также эксплуатационная доставка!
    motoparamoga.vn.ua/uk/v-prokladki-bolta-golovki-tsilindra/