7 Tipps für eine lupenreine Navigation

  • von Lennart Prange

Die Navigation einer Website ist eines der wichtigsten Elemente. Ohne sie ist der User aufgeschmissen und man sollte sich vor dem Designprozess bereits über die Navigationsstruktur im Klaren sein. Der Nutzer muss sich bequem durch die Inhalte der Website bewegen können. In diesem Beitrag möchte ich ein paar Tipps für eine gute Navigation geben.
Wie immer könnt ihr mit euren Kommentaren den Beitrag erweitern, um die Qualität zu erhöhen.

Kommentare und Social Bookmarks würden mich wie immer freuen.

1. Navigationsleiste

Position

Die User erwarten die Navigation entweder horizontal unter dem Header oder vertikal oben auf der linken Seite. „Never touch a running System“ passt hier sehr gut. Erfüllt die Erwartungen der User, um eine optimale Usability zu erreichen.

Gestaltung

Achtet darauf, dass ihr einen Rollover-Status und einen eindeutigen Active-Status definiert. So merkt der User wo er sich befindet und auch wenn er gerade einen Menüpunkt anwählt. Beide Zustände sollten verschieden sein, auffallen, aber doch nicht zu doll herausstechen. Zu heftiger Farbwechsel oder Font-Änderungen können das Design zerstören.

In der Hauptnavigation sollten sich maximal 7 (die magische Zahl) – 9 Menüpunkte befinden. Wenn die Internetseite mehr als 7-9 Unterseiten enthalten soll, sollte man sich über eine sekundäre Navigation (Subnavigation) Gedanken machen.

Außerdem

Achtet auf eindeutige Beschriftung. Kürzlich sehe ich öfters den Trend, dass die Startseite mit Root statt Home oder Start bzw. Startseite betitelt wird. Sowas halte ich nicht für sinnvoll.

2. Sitemap

Wer umfangreichere Seiten hat, sollte immer eine Sitemap bereitstellen. Einige User suchen auf großen Seiten gezielt danach, da eine Sitemap den Navigationsvorgang auf einer Seite mit sehr verzweigter Navigation extrem erleichtert.
Übrigens: Wer die Sitemap gut verlinkt, macht es den Google Bots einfach, tiefer in die Seite vorzudringen.

3. Links im Content

Um die Usability zu verbessern, sollte man auch Links im Content setzen. Da, wo sie halt passen. Außerdem kann man Links auch wiederholen. In der Sidebar kann man beispielsweise mit einem kleinem Preview sein neues Magazin verlinken und unter dem Menüpunkt Publikationen ist es dann ebenfalls zu finden.

4. 3-klick-Regel

Jede Unterseite sollte mit max. 3 Klicks erreichbar sein. Sonst finden die Nutzer nicht schnell genug zu den gewünschten Informationen und dann verlassen sie schnell die Seite.

5. Breadcrumb Navigation

Eine Breadcrumb Navigation zeigt dem User wo genau er sich gerade befindet. Auf größeren Seiten ist diese unverzichtbar. Sie schafft Übersicht, Durchblick und macht die Navigation einfacher. Immer ein Grund, um sowas einzubauen.

Die Breadcrumb-Navigation von Spiegel

Die Breadcrumb-Navigation von Spiegel.de

6. Logo verlinken

Das Logo sollte meiner Meinung nach immer mit der Startseite verlinkt sein. Ich, als Besucher, nutze diese Möglichkeit sehr häufig und empfinde das als selbstverständlich. Ich denke, dass mir viele User da zustimmen. Eine Zeile Code, die nicht Schaden kann.

7. Technik

Falls eure Navigation Flash, Java Script oder andere Techniken, die nicht überall verfügbar sind, benutzt, muss eine textbasierte Alternative vorhanden sein.

8. Ihr seid dran. Ergänzt, was ich vergessen habe!

9 Kommentare

  1. pibo
    17. September 2008 um 14:54 Uhr

    Praktisch finde ich auch immer im Footer bereich einige wichtige Navigationpunkte zu wiederholen z.B. Impressum, Kontakt, Kontaktform etc. – da ich zu denjenigen gehöre die solche Angaben als erstes im Footer oder Header vermuten würde.

    Pfürti!

  2. Mediensache
    17. September 2008 um 14:59 Uhr

    Super geschrieben.
    bzgl. 7.:
    Vlt. sollte man erwähnen, dass die navigation meist die ersten links der seite enthält, die google besuchen soll. oftmals sind die meisten inhalte nur über diese eine navigation erreichbar. um dennoch nicht auf schicke navigationen verzichten müssen, kann man eine standardisierte navi mit dem css eigenschaften text-inherit oder display: none für den besucher unsichtbar machen. es wird aber die erste variante empfohlen. auf etwas seo muss man auch achten.

    gruß
    damian

    Mediensaches letzter Beitrag..Relaunch Serie – Wann und wieso sollte ein Relaunch in Erwägung gezogen werden

  3. Marvin
    17. September 2008 um 15:37 Uhr

    schön geschrieben!
    zu Nr.3 – wäre schön wenn sich alle dran halten würden :)

    zu Nr.1 – ich finds gut wenn man englisch und deutsch nicht mischt.
    auch wenn der titel “home” weitaus gebrächlichr ist!

    @ mediensache – da ichmeistens eine horizontale navigation oben habe, muss ich zum Glück nicht drauf achten, weil diese dann immer die ersten Links der Seite enthält, aber gewusst hab ich das auch noch nicht! danke für den Tip!

    Marvins letzter Beitrag..Mit Digsby alles unter einem Hut?

  4. OrangeBlue
    17. September 2008 um 17:53 Uhr

    bei 1 ist noch nen schreibfehler bei Position…

    sonst super Artikel !

  5. Lennart Prange
    17. September 2008 um 18:11 Uhr

    Oh, da sind ja noch gute Tipps aufgetaucht :). Super!

    @ OrangeBlue: Danke für den Hinweis. Ich habs korrigiert.

  6. ff-webdesigner München
    20. September 2008 um 17:06 Uhr

    Zur Technik sollte man noch erwähnen, dass dynamische Navigationen über JavaScript ohnehin einige Risiken bezüglich der SEO bergen. Zwar ist Google dazu übergegangen, Links aus Java-Scripts zumindest teilweise zu verfolgen. Man bedenke jedoch die vielen Wenn-Dann-Fälle, die in Navigationsscripten eingebaut werden können: woher soll Google wissen, welcher Link wirklich erreichbar ist, welcher nicht? Man sollte sich also immer bewusst sein, dass solche Navigationen eventuell nicht von Suchmaschinen ausgelesen werden und Unterseiten nicht in die Suchergebnisse aufgenommen werden. Dasselbe gilt natürlich für Flash Navigationen. Man sollte in diesen fällen grundsätzlich eine Browserweiche einsetzen

    Gruß ff-webdesigner

Trackbacks/Pingbacks