Website-Navigation: Best Practices

Über eine gelungene Navigation verliert niemand ein Wort. Sie fällt erst auf, wenn sie fehlt — dann allerdings sofort, und meistens in Form eines Besuchers, der nicht wiederkommt.

Dabei hat sie nur zwei Fragen zu beantworten, und beide stellt niemand laut: Wo bin ich gerade? und Wo kann ich sonst noch hin? Alles, was auf den nächsten Absätzen steht, dient einer dieser beiden Fragen. Was keiner von beiden dient, gehört nicht ins Menü.

Oben: Logo, Navigation, Kontakt

Diese Reihenfolge ist keine Geschmacksfrage mehr. Sie steht auf so vielen Websites, dass Besucher sie nicht lesen, sondern voraussetzen — links das Logo, in der Mitte oder rechts daneben die Menüpunkte, ganz rechts der auffällige Button, der zum Kontakt führt. Wer diese Anordnung umbaut, gewinnt Originalität und verliert Tempo. Das ist selten ein guter Tausch.

Zwei Dinge daran werden regelmäßig übersehen:

Das Logo verlinkt auf die Startseite. Deshalb braucht ein Menü nicht zwingend einen Punkt „Home" — er kostet einen Platz und erklärt etwas, das ohnehin jeder probiert.
Der Kontakt-Button ist kein Menüpunkt, er sieht anders aus. Ein Menü listet auf, ein Call to Action fordert auf. Steht beides in derselben Schrift und derselben Farbe nebeneinander, ist es eine Liste mit sechs Einträgen.

Die Beschriftung ist die halbe Miete

Menüpunkte scheitern selten an der Gestaltung. Sie scheitern daran, dass dort die Wörter des Unternehmens stehen und nicht die des Kunden. „Lösungen" ist ein Wort aus einer internen Präsentation. Wer etwas sucht, sucht nach dem, was er braucht.

Benennen Sie, was der Besucher bekommt, nicht wie Ihre Abteilungen heißen.
Bleiben Sie bei einem Wort pro Punkt, wo es geht.
Verwenden Sie dasselbe Wort auf der Zielseite wieder.

Ein Menüpunkt ist eine Schublade, keine Seite

Die zweite Anforderung an eine Beschriftung merkt man erst zwei Jahre später. Eine Website wächst — es kommt eine Leistung dazu, ein Standort, eine Referenz. Wenn dafür jedes Mal ein neuer Punkt in die oberste Ebene muss, war die Ebene falsch benannt.

Der Test dauert eine Minute: Nehmen Sie jeden Ihrer Menüpunkte und fragen Sie, was Sie im nächsten Jahr darunter einsortieren könnten. „Leistungen" nimmt eine sechste Leistung auf, ohne dass sich oben etwas ändert. „Webdesign" nimmt gar nichts auf — es ist schon der Inhalt. Ein Punkt, der nichts aufnehmen kann, ist eine Seite, die sich als Kategorie ausgibt.

Fünf bis sieben Schubladen tragen eine erstaunlich große Website. Fünf bis sieben Seiten sind nach kurzer Zeit zwölf.

Wo bin ich gerade?

Von allen Bauteilen einer Seite kann diese Frage nur die Navigation beantworten. Sie tut es, indem der Punkt, auf dem der Besucher gerade steht, anders aussieht als die übrigen: kräftiger gesetzt, farbig unterlegt, mit einem Strich markiert. Welche Form Sie wählen, ist zweitrangig — dass die Markierung sich von einem bloßen Mouseover unterscheidet, ist es nicht.

Das zweite Signal wird fast immer vergessen, und ohne es läuft das erste ins Leere: Die Seite muss so heißen wie der Menüpunkt, der auf sie zeigt. Steht oben „Leistungen" markiert und trägt die Seite die Überschrift „Was wir für Sie tun", zieht der Besucher die Verbindung nicht — er sieht eine Markierung, aber keine Bestätigung. Wortgleichheit ist der billigste Teil einer guten Navigation und der, an dem am häufigsten gespart wird.

Bei tieferen Seiten übernimmt die Markierung der Oberpunkt. Wer auf einer Unterseite steht, sieht die Kategorie hervorgehoben, in der er sich befindet. Ab der zweiten Ebene lohnt sich zusätzlich eine Pfadangabe über der Überschrift — vier Wörter, die zeigen, wie tief man steht und wie man wieder hochkommt.

Ein Satz Technik dazu

Die Markierung ist nicht nur Kosmetik, sie ist eine Information — und Informationen sollten nicht ausschließlich als Farbe existieren. Für den aktiven Punkt gibt es im HTML ein eigenes Merkmal:

<a href="/leistungen" aria-current="page">Leistungen</a>

Das aria-current sagt Screenreadern und Sprachassistenten dasselbe, was die Farbe dem sehenden Besucher sagt. Ein Attribut, eine Zeile, und die Navigation funktioniert auch für Menschen, die sie nicht sehen. Dieselbe Überlegung steckt hinter dem sichtbaren Rahmen, den ein Menüpunkt bekommen muss, wenn er mit der Tabulatortaste angesteuert wird — wer ohne Maus arbeitet, ist sonst blind unterwegs.

Wo die zweite Ebene sichtbar wird

Sobald mehr als eine Handvoll Seiten zusammenkommt, stellt sich die Frage, wie die Unterpunkte erreichbar werden. Die verbreitete Antwort ist das Klappmenü, das aufgeht, wenn der Mauszeiger darüber schwebt. Am Schreibtisch funktioniert das. Am Smartphone gibt es keinen Mauszeiger.

Was dort passiert, kennen Sie vermutlich: Der erste Tipp öffnet die Klappe, statt dem Link zu folgen, der zweite Tipp trifft dann den Unterpunkt. Besucher tippen einmal. Danach warten sie auf eine Seite, die nicht kommt, und tippen ein zweites Mal auf etwas anderes.

Die robustere Lösung kostet nichts und löst das Problem an der Wurzel: Der Oberpunkt ist selbst eine Seite. „Leistungen" führt auf eine Übersicht, und auf dieser Übersicht stehen die einzelnen Leistungen — als Text, als Kacheln, in ganzer Breite und ohne Zeitdruck. Der Klick geht nie ins Leere, die Unterseiten haben Platz für eine Beschreibung statt für zwei Wörter, und Suchmaschinen bekommen eine Seite, die es sonst nicht gäbe.

Ein Klappmenü kann trotzdem sinnvoll sein — als Abkürzung für den, der schon weiß, wohin er will. Es darf nur nicht der einzige Weg sein.

Und am Smartphone?

Dort gilt dieselbe Regel, nur schärfer: Ein aufgeklapptes Menü nimmt den ganzen Bildschirm ein. Was hier zu viel ist, fällt sofort auf.

Der Button, der es öffnet, gehört nach oben rechts. Ergonomisch ist das die schlechteste Ecke des Geräts — für den Daumen einer Hand, die das Telefon hält, ist sie am schwersten zu erreichen. Trotzdem ist sie richtig, weil dort seit Jahren jeder danach greift. Erwartung schlägt Ergonomie: Ein Weg, den man kennt, ist kürzer als ein kurzer Weg, den man suchen muss.

Zum Button selbst noch zwei Kleinigkeiten, die messbar wirken:

Die drei Striche allein werden schlechter erkannt als dieselben drei Striche mit dem Wort Menü daneben. Das Symbol ist verbreitet, aber es ist nicht selbsterklärend.
Was aufgeht, muss auch wieder zugehen. Ein sichtbares Kreuz an derselben Stelle, ein Tipp neben das Menü, die Zurück-Taste des Telefons — mindestens zwei dieser drei Wege sollten funktionieren.

Die Fußzeile ist die zweite Navigation

Ein schlankes Menü oben funktioniert nur, wenn es unten ein Ventil gibt. Sonst wächst die oberste Ebene doch wieder, weil irgendwo das Impressum hin muss.

In die Fußzeile gehört alles, was erreichbar sein soll, aber nicht gesucht wird: Impressum, Datenschutz, Anfahrt, Stellenangebote, die Seiten für die Handvoll Besucher, die genau danach fragen. Und sie steht an einer verkehrsgünstigen Stelle — wer eine Seite zu Ende gelesen hat, stellt in genau diesem Moment die Frage „wo kann ich sonst noch hin?". Eine leere Fußzeile lässt ihn damit allein.

Sechs Fragen an Ihre eigene Website

Prüfen Sie	Woran Sie es erkennen
Anzahl der Punkte	mehr als sieben oben — welche zwei wären eine Schublade?
Beschriftung	steht dort ein Wort, das ein Kunde am Telefon benutzen würde?
Wachstum	wo landet die nächste neue Seite, ohne dass oben ein Punkt dazukommt?
Aktiver Punkt	sieht man auf jeder Unterseite, wo man ist — auch zwei Ebenen tief?
Wortgleichheit	heißt die Seite genauso wie der Menüpunkt, der auf sie zeigt?
Mobilgeräte	Button oben rechts, beschriftet, und geht das Menü wieder zu?

Sechs Antworten, eine Viertelstunde. Wo dreimal ein Nein steht, liegt das Problem nicht bei der Gestaltung des Menüs, sondern bei der Gliederung dahinter — und die lässt sich reparieren, ohne die Website neu zu bauen.

Der Maßstab bleibt derselbe

Eine Navigation ist dann fertig, wenn niemand sie erwähnt. Kein Besucher lobt ein Menü; er merkt nur, dass er in zwei Klicks hatte, was er wollte, und schreibt das der Firma gut, nicht der Website.

Wenn Sie unsicher sind, ob Ihre Gliederung das leistet, schauen wir gemeinsam darauf — das Erstgespräch kostet nichts.