Heute geht es um die Themen Informationsarchitektur und Navigation deiner Website – insgesamt geht es also darum, wie du deine Besucher sinnvoll durch deine Webseite leitest. Deine Navigation ist das Fundament deiner Seite, welche Menüformen gibt es eigentlich überhaupt? Und: Was solltest du beachten?

Die Informationsarchitektur

Um eine Webseite zu strukturieren, gibt es den wunderbaren Begriff Informationsarchitektur die sinnvolle Organisation und Strukturierung von Webinhalten. Informationsarchitektur ist nicht zu verwechseln mit der Navigation an sich; die Navigation ist ein Bestandteil deiner Informationsarchitektur – und somit ein Teil des Leitsystems. 

Je mehr Information du auf deiner Webseite unterbringen möchtest, umso durchdachter muss deine Informationsarchitektur sein! Kommt dein Besucher auf deiner Webseite an, stellt er sich viele Fragen, etwa:

• Wo bin ich hier?
• Worum geht es hier?
• Wohin gelange ich von hier?
• Was kann ich hier tun?
• Wenn ich hier klicke, wo lande ich dann dort?
• Ist das überhaupt für mich relevant?
• An welcher Stelle deines Angebotes befinde ich mich gerade?
• Wo bin ich auf der Webseite – ohne mich zu verlieren?
• Und wozu dient diese Webseite überhaupt?
• Was habe ich von diesem Angebot?
• Was steckt dahinter?
• Wie kann ich den Betreiber (dich) erreichen?

Brechen wir den Fragenkatalog auf 3 Fragen herunter, sind wir bei den 3 Hauptfragen:

1. Was kann ich hier tun?
2. Was habe ich davon?
3. Warum sollte ich mich für dich entscheiden? (… und nicht für eine der vielen anderen Personen, die mir in der Suchmaschine angezeigt werden…)

Um eine solide Informationsarchitektur wie auch eine gute Navigation zu erstellen, gibt es unterschiedliche Methoden. Ich nenne dir 3 Varianten: 

Variante 1 – Card-Sorting

Card-Sorting ist eine recht einfache Methode, um deine Webseitenstruktur vorzubereiten. Du schreibst jedes Thema, das du auf deiner Webseite unterbringen möchtest, auf eine Karte. Anschließend legst du alle vor dir aus – berücksichtige auch die Unterthemen! Sortiere nun die Karten, lege sie auf verschiedene Stapel und gib den Stapeln einen Namen. 

Beispiel: Du hast 20 Themen und clustert diese. Diesen Clustern gibst du Namen, die dann die Hauptmenüpunkte sein könnten – darunter sortierst du dann die Untermenüpunkte ein. 

Variante 2 – Mockups

Mockups sind komplett reduzierte Module, die kein Design haben. Mockups sind die konzeptionelle Vorstufe zu deiner Webseite. Zum Beispiel ein Button, ein Navigationspunkt – es gibt Container und Text. Das heißt, es sind einfache graue Flächen ohne jegliches Design; Dummy-Module, mit denen du vorab deine Webseite strukturierst. Auf diese Weise kannst du Grundstruktur und Aussehen deiner Webseite schon recht gut simulieren, ohne dass diese durch Designelemente abgelenkt wird.

Variante 3 – Prototyping

Prototyping – mit dieser Variante arbeite ich persönlich am liebsten. Über ein Briefing, ein Gespräch, dass in der Regel 3 Stunden dauert, stelle ich viele Fragen und mache mir Notizen. Daraus ergibt sich dann Stück für Stück ein Prototyp der Webseite, welcher dann aber auch schon designed ist!  Eine Art Moodboard – auf diese Weise erfährst du, ob du auf dem richtigen Weg bist. 

Vor dem Prototyping kannst du auch ein Mockup skizzieren, entweder handschriftlich oder mit einer speziellen Software – um schon einmal einen Weg einzuschlagen und eine Richtung zu erkennen. 

Weniger ist mehr!

Packe nicht zu viel auf deine Webseite und bleibe in Struktur und Kommunikation klar – um deine Besucher nicht zu verwirren. Je klarer du deine Webseite aufbaust, umso eher wird dein Besucher das tun, was du gerne möchtest. 

Halte dir zwischendurch immer wieder deine Ziele für deinen Internetauftritt vor Augen und vergiss auch nicht den Google-Bot, der deine Seite scannt. Google mag gern flachere Hierarchien, „einfach“ ist die bessere Wahl für ein gutes Google-Ranking. Orientiere dich an der magischen Zahl 7. Die 7 ist eine Zahl, die wir Menschen gut überblicken können. 

Serieller Positionseffekt (Primacy-Recency-Effekt)

Die meisten Personen können sich den ersten und den letzten Punkt auf einer Liste besonders nachhaltig einprägen. Tipp: Achte darum auf den ersten und den letzten Menüeintrag besonders!

Welche Navigationsarten gibt es?

1. Hauptnavigation

Die Hauptnavigation ist eine Konstante, die immer angezeigt werden sollte. Eine versteckte Navigation bewegt Besucher dazu, schnell aus einer Webseite wieder auszusteigen.

2. Kategorien-Seiten

„Über mich“, „Angebote“, „Themen“, etc. – wähle 5 bis 7 Menüpunkte, um nicht zu wenige oder zu viele Menüpunkte zu haben. Überdenke vorher, was wirklich wichtig ist.

3. Breadcrumb-Navigation

Die Breadcrumb-Navigation findet bei sehr komplexen Hierarchien/Navigationen Anwendung, etwa bei sehr umfangreichen Online-Shops, damit der Besucher erkennen kann, wo er sich gerade befindet – und sich nicht auf der Webseite verliert.

4. Suchfunktion

Bei komplexeren Webseiten ist eine Suchfunktion unerlässlich, ohne sie würde die Seite nicht funktionieren und ein Einkauf in großen Online-Shops wäre gar nicht möglich. Aber auch in einem Blog ist die Suchfunktion essenziell: Wer nach bestimmten Themen sucht, möchte diese schnell und gefiltert anschauen können – denn nicht alle Themen sind für den Besucher von Relevanz.

5. Fußnavigation

Hier hinein gehören Siteinformationen wie zum Beispiel Rechtliches, Impressum, Datenschutz, Kontakt, AGBs, Pressematerial, etc.

Menüarten

Neben den Navigationsmöglichkeiten gibt es auch verschiedene Darstellungsmöglichkeiten für dein Menü!

• Menü als Liste mit Menüpunkten untereinander oder nebeneinander.
• Drop-Down-Menü bzw. Auswahlmenü, wenn es um ein sehr umfangreiches Menü wie etwa bei Online-Versandhäusern geht. Große Onlineshops verfügen in der Regel über ein Hauptmenü, auf der linken Seite meist auch über ein erweitertes Menü – ein  Auswahlmenü als Drop-Down-Menü. 
• Mega-Menü – dieses wird bei sehr großen Produktpaletten verwendet, z. B. auf Webseiten von Großversandhäusern. 

Du möchtest gern mehr erfahren? Hör dir einfach meinen Podcast an. Wenn du zuvor noch nie mit WordPress gearbeitet hast und gerne einmal reinschnuppern möchtest, hol dir jederzeit meinen Gratis-WordPress-Kurs hier auf meiner Webseite. 😊

Ich freue mich auf dich! 

[et_bloom_inline optin_id=“optin_2″]