Im heutigen Artikel ist es die Navigation einer Webseite, die genauer unter die Lupe genommen wird.

Denn der beste Inhalt und das schickste Layout nützen herzlich wenig, wenn der Besucher sich auf der Seite nicht zurechtfindet oder die Navigation aus technischen Gründen (man denke an bestimmte Browser, mit ihren Eigenheiten oder an abgeschaltetes JavaScript) nicht benutzen kann.

Auf was sollte man bei der technischen Umsetzung der Navigation achten? Wo sollte das Menue einer Webseite am besten platziert sein? Welche Inhalte sollten unbedingt verlinkt werden, welche sind eher optional?

was ist die Navigation überhaupt?

Die Navigation einer Webseite besteht im Wesentlichen aus zwei Bereichen: dem Menue, in dem sich die Verweise zu den einzelnen Unterseiten befinden, sowie den Verlinkungen innerhalb dieser Seiten. Dies können beispielsweise Links im Fließtext sein, verlinkte Überschriften mit Ankerfunktion, oder oder oder.
Für den Besucher sind beide Arten von Links wichtig, um sich durch die Seite zu bewegen. Von daher sollte man auch beiden genügend Aufmerksamkeit widmen.

kennzeichnen!

Das A und O einer Navigation ist, dass der Besucher sie mühelos entdeckt. Einen Link, den man nicht als solchen erkennt, klickt man logischerweise auch nicht an.
Für das Menue bedeutet dies, dass es an einer gut sichtbaren Stelle platziert sein sollte – egal welche Auflösung der Besucher nutzt, das Menue muss er gleich beim Betreten der Webseite entdecken können. Es im Footer der Seite oder am rechten Rand unterzubringen, kann je nach Dimension des Layouts zu Problemen führen.

Die Schrift selber sollte gut leserlich sein, also groß genug, mit einem ausreichenden Kontrast zum Hintergrund und auch nicht übermäßig verschnörkelt. Links dürfen im Fließtext nicht untergehen! Hier bietet es sich an, sie durch Unterstreichen oder eine andere Farbgebung hervorzuheben.
Hover-Effekte sind nützlich, damit der User gleich sieht, wo er denn gerade mit dem Mauszeiger zugange ist, aber auch hier gilt: weniger ist mehr. Wenn Links beim Darüberfahren mit der Maus auf einmal die Schriftgröße verändern oder einen breiteren Abstand zwischen den einzelnen Buchstaben erhalten, sodass sich unter Umständen das ganze Layout verschiebt, sieht das sehr unschön aus und nervt.

eindeutige Bezeichnungen

Es kann eine hervorragende Lösung sein, anstelle von beschrifteten Links Icons zu verwenden, da man Bilder intuitiver und schneller erfasst – aber die Bedeutung dieser Bildchen muss dann auch wirklich offenkundig sein.
Viele Icons haben sich mittlerweile etabliert, so zum Beispiel das Häuschen für “gehe zur Startseite”, eine Lupe für die Suche oder das bekannte Icon des RSS-Feeds. Wenn Grafiken eingesetzt werden, bei denen der User zunächst einmal raten muss, wohin ihn der Link wohl führen mag, dann ist das Ganze nach hinten losgegangen.
Für alle Fälle sollte man auch bei eigentlich selbsterklärenden Icons eine kurze Linkbeschreibung in das title-Tag packen.

Selbstverständlich ist es auch bei Textlinks wichtig, dass sie dem Besucher problemlos vermitteln, wo sie ihn hinführen. Anstelle von “1, 2, 3, 4″ also lieber “Person, Seite, Links, Impressum” verwenden.

nicht zu viel

Viele Navigationen sind äußerst umfangreich und überfordern den Besucher dadurch hoffnungslos. Die Übersichtlichkeit geht bei mehreren Dutzend Links, die meist auch noch alle gleich gestaltet sind, schnell verloren. Daher sollte man sich überlegen, ob auf manche Links nicht einfach verzichtet werden kann (so halte ich etwa die Meta-Links, die viele WordPress-Themes standardmäßig enthalten, für recht überflüssig). Einiges kann man vielleicht thematisch gliedern und auf einer eigenen Unterseite verlinken, sodass die Hauptnavigation schlanker wird.
Die verbliebenen Links sollte man nach Themen und nach Prioritäten ordnen – für den Besucher wichtige Links kommen hierbei möglichst weit nach oben. Wenn jemand zum Beispiel auf einer GFX-Seite landet, dann will er sich in der Regel nicht erst durch die Seitenhistorie, Affiliatelinks und Creditlisten klicken, sondern er will gleich und problemlos zu den Downloadsektionen gelangen. So etwas gehört also nach oben.

“Platzhalter-Links” zu Seiten, die noch gar nicht existieren, nerven den User und sind somit ein No Go.

Technisches

Die Navigation muss unter allen Bedingungen funktionieren – also auch, wenn jemand in seinem Browser das Ausführen von JavaScript deaktiviert hat. Anstelle von JS-Navigationen sollte man also zu HTML und CSS greifen oder dafür sorgen, dass eine alternative Navigationsmöglichkeit bei abgeschaltetem JS zur Verfügung steht.
Ein beliebtes Beispiel für den Einsatz von JavaScript in Navigationen sind DropDown-Menues. Wie man diese auch vollkommen barrierefrei ohne JS realisieren kann, zeigt beispielsweise der Suckerfish.

in welchem Fenster öffnen?

Generell gilt: Links zu externen Seiten sollten sich in einem neuen Fenster resp. Tab öffnen, wohingegen interne Verlinkungen im gleichen Fenster geladen werden sollten. Dadurch verliert der Besucher beim Folgen eines Links nicht die ursprüngliche Seite aus den Augen, wird aber auch nicht durch eine Unzahl von offenen Fenstern erschlagen.