Trends im Navigationsdesign
Moderne Menüs

Von der Sitemap zum Menü

Trends im Navigationsdesign

Das übliche Webprojekt beginnt mit einer Sitemap. Daraus entwickelt sich dann nach und nach die Navigationsleiste. Außen herum gibt es – gerade bei komplexen Websites – natürlich noch einige andere hilfreiche Leitfunktionen wie die Breadcrumb-Navigation und die Suche (siehe Artikel Ausgabe 8/2006, Seite 68). In diesem Artikel soll allerdings die optische und funktionale Gestaltung der Navigation im Vordergrund stehen.

Eine Navigation unterliegt zwei Einflüssen: Zum einen sind da die aktuell im Web verbreiteten Gestaltungsformen für Navigationen. Im Moment zählen dazu vor allem die CSS-Navigationen mit Hover-Effekten, die am oberen oder linken Bildschirmrand angeordnet werden. Der zweite Einfluss sind die Optik, die Inhalte und die Zielgruppe der jeweiligen Website. Aus diesen zwei Einflüssen muss ein vernünftiges Navigationskonzept und eine optisch ansprechende Navigation erarbeitet werden. Leider geschieht das auf vielen Websites nur im Vorbeigehen: Entweder der Designer übernimmt recht ungeprüft eine Navigationsidee von einer anderen Website, weil sie gefällt, oder er vertraut auf das, was er schon zigmal gemacht hat. Beides birgt die Gefahr, nicht modern zu wirken, Nutzer zu verunsichern und eine zweitklassige Website zu erstellen. Um das zu vermeiden, analysiert dieser Artikel alle wichtigen Design-Bestandteile einer Navigation in der Chronologie, in der im Projekt meist die Entscheidungen fallen.

Technologie

Trends im Navigationsdesign

Im Bereich Navigation bestimmen ein paar Schlagworte die Technikdiskussion: Flash ist nach wie vor für außergewöhnliche Navigationen zuständig und wird beispielsweise bei MTV in Deutschland eingesetzt (www.mtv.de). Hier gibt es allerdings berechtigte Kritik, die das Beispiel MTV gut illustriert. Neben der Usability-Todsünde, einen Flash-Film für die MTV-Awards mit Javascript auszugeben und damit Nutzern ohne Flash-Player nicht einmal eine Download-Möglichkeit zu bieten, wirkt die Flash-Navigation bei MTV wie reiner Selbstzweck. Da der Rest der Seite durchaus teilweise aus HTML besteht, ist der einzige Sinn der Flash-Navigation, dort ein wenig Animation zu zeigen. Wie man es besser macht, zeigt das Modelabel Quiksilver (www.quiksilver.com). Dort entsteht die Navigation aus einem frei platzierten Kubus. Zwar ist auch das eine Spielerei, aber im Gegensatz zum einfallslosen MTV-Ansatz wird der Nutzer mit einer neuen Navigationsart überrascht. Er muss sich mit der Navigation beschäftigen, und seine Aufmerksamkeit wird geleitet.

Die amerikanische MTV-Site geht dagegen technisch einen anderen Weg. Hier wird auf Flash in der Navigation verzichtet und stattdessen ein Javascript-Aufklappmenü verwendet. Ähnlich wie bei Flash oder aus Grafiken bestehenden Menüs grenzen Sie damit Zielgruppen aus. Vor allem in Sachen Accessibility sind diese Lösungen nicht optimal. Und auch die Suchmaschinenoptimierung leidet darunter. Aus diesen Gründen ist die einfache und recht reduzierte CSS-Navigation zurzeit auch auf typischen Web-2.0-Seiten recht populär (www.drweb.de/weblog/weblog/?p=531).

Der Begriff Web 2.0 hat ansonsten aber wenig mit der Navigation zu tun. Im weiteren Sinne bezeichnet Web 2.0 moderne Web-Anwendungen, die vor allem auf den sozialen Aspekt Wert legen. Diese Sites haben wie erwähnt meist eine normale CSS-Navigation. Im technischen, engeren Sinne entspricht Web 2.0 natürlich auch Ajax-Anwendungen. Da diese bereits auf Javascript setzen, sind dort die schon lange bekannten DHTML-Menüs natürlich eine Möglichkeit. Auch Menüs mit Registerkarten, die auf Rollover hin andere Inhalte anzeigen, sind populäre Elemente. Allerdings waren all diese Effekte schon vor dem Hype um Ajax und Web 2.0 möglich, und allen wohnt auch der Nachteil inne, dass Accessibility und Suchmaschinenoptimierung damit kaum zu erreichen sind.

Position und Größe

Trends im Navigationsdesign

Nun aber von der Technikwahl zur Gestaltung der Navigation: Oben und links, das sind die Standardpositionen für eine Navigation. Sie entsprechen auch den Erwartungen der meisten Nutzer und erreichen aus Usability-Gesichtspunkten sicherlich die höchste Navigationseffizienz. Die Navigationseffizienz bezeichnet, wie schnell ein Nutzer bestimmte Informationen erreicht, und sie wird meist mit Nutzertests und Nutzerbeobachtung errechnet. Dazu erhält der Nutzer bestimmte Aufgaben und wird dann – idealerweise indirekt – beobachtet. Aus der Menge an Seiten, die ein Nutzer anklickt, und aus den sonstigen Aktionen, zum Beispiel dem Klicken auf die Zurück-Schaltfläche des Browsers, lässt sich dann die Navigationseffizienz ablesen.

Natürlich muss die Navigationseffizienz nicht das alleinige Kriterium sein. Eine Navigation kann auch auf der rechten Seite stehen und damit vom Nutzer Aufmerksamkeit und Umdenken erfordern. Oder eine Navigation kann wie bei www.bobscube.com aus dem Erforschen eines Bildes bestehen. Hier wird der hierarchische Grundaufbau, den die meisten Websites verwenden, verlassen. Wichtig ist nur, sich solcher Regelbrüche bewusst zu sein und sie mit Absicht durchzuführen. Auf einer designorientierten Website ist beispielsweise ein Tabubruch leichter zu verkraften als auf einer seriösen Unternehmenswebsite.

Der Trend geht aktuell zu Navigationen im oberen Bereich der Website. Dort versammeln sich oft Suche, Hauptnavigation und unter Umständen sogar noch eine Sekundärnavigation für Impressum, Sprachwahl et cetera. Der Vorteil dieses kompakten Navigationsbereichs ist, dass der Inhalt besonders viel Platz eingeräumt bekommt. Andererseits muss man mit dem wenigen Platz im oberen Bereich verantwortungsvoll umgehen, und gerade bei komplexeren Sites zur Informationsvermittlung muss ein Teil der untergeordneten Navigation meist auf die linke Seite wandern.

Reihenfolge und Größe

Trends im Navigationsdesign

Gibt es zwei Arten von Navigationen, sollte auf jeden Fall klar werden, welche der Navigationen die Hauptnavigation ist. Zwar muss der Designer nicht wie MTV USA Main daneben schreiben, aber die zwei Navigationen sollten – wenn sie zusammenhängen – auf jeden Fall diese Abhängigkeit über Farben, Schriftgrößen et cetera ausdrücken.

Auch bei den Navigationspunkten sollten Sie auf die Reihenfolge achten. Beispielsweise hat es sich bei Unternehmens-Websites eingebürgert, die Produkte vorn an den Anfang zu setzen. Auch bei »Über das Unternehmen« gibt es Konventionen, die von den meisten Websites eingehalten werden.

Die Größe der Navigation hängt vom Corporate-Design und dem Layout einer Site ab. Allerdings ist in der Praxis ein Trend nicht nur hin zu größeren Bildern (siehe Workshop Ausgabe 9/2006, Seite 56) sondern auch zu größeren Schriften zu beobachten. Im Zuge steigender Auflösungen wird es auch in Zukunft Sites mit flexiblen Bereichen geben. Ein gutes Beispiel ist www.tokyocube.com. Hier dominiert große Typografie in der ersten und zweiten Navigationsebene. Die Navigationspunkte erscheinen zusätzlich komplett in Versalien.

Formen und Farben

Trends im Navigationsdesign

Eine Navigation muss zu allererst vom Nutzer überhaupt als solche und in ihrer Funktionsweise erkannt werden. Die Erkennung läuft dabei über Muster und folgt den Gesetzen der Wahrnehmung: Das Gesetz der Intensität besagt, dass Auffälligkeit durch Kontrast, Farbsättigung und Bewegu
ng gesteuert wird. Je mehr davon vorhanden ist, desto auffälliger wird ein bestimmter Punkt im Kontext zum Rest.

Das zweite relevante Gesetz ist das Gesetz der Ausnahme beispielsweise bei der Form. Ein eckiger Navigationspunkt fällt unter vielen runden Punkten besonders auf, da er die Ausnahme bildet und damit in seinem Umfeld auffälliger wirkt. Genauso ist das mit einem orangen Punkt unter lauter grauen. Bei der Navigation gilt es, über Aufmerksamkeit in zweierlei Hinsicht nachzudenken: Zum einen sollten Sie überlegen, wie und ob die Navigation aus der Site herausragen soll. Bei der ARD ist die Navigation beispielsweise in dunklem Blau gehalten und tritt angenehm hinter den Inhalt zurück beziehungsweise leitet zum Inhalt über, ohne schlecht findbar zu sein. Zum anderen geht es darum, einzelne Zustände in der Navigation voneinander abzuheben.

Der Rollover-Zustand hat sich, auch dank der CSS-Klasse hover, als Standard etabliert, um dem Nutzer anzuzeigen, auf welchem Navigationspunkt gerade die Maus ruht. Daneben ist meist noch der Navigationspunkt aktiv dargestellt, auf beziehungsweise unterhalb dem sich der Nutzer gerade befindet. Dabei ist – ähnlich wie bei der Bildsprache – eine grafische Reduktion zu beobachten. Beispielsweise besteht der Rollover-Effekt bei der Skype-Navigation nur noch aus einem blauen Rahmen. Bei der ARD werden für die einzelnen Sparten unterschiedliche Farben eingesetzt. Das gesonderte Darstellen besuchter Links ist schon seit Jahren aus der Mode gekommen. Obwohl eigentlich recht praktisch, ist es deswegen den meisten Nutzern nicht mehr bekannt und bietet deswegen in der Navigation keinen großen Mehrwert.

Registerkarten

Trends im Navigationsdesign

In Sachen Formen sind nach wie vor die Registerkarten sehr beliebt. Meist kommen sie in horizontaler Anordnung im oberen Bereich zum Einsatz, zum Beispiel bei Amazon. Sat 1 variiert das Prinzip mit Registerkarten auf der linken Seite. Zwar wetterte Usability-Wortführer Jakob Nielsen, dass Register eigentlich verschiedene Ansichten auf dieselben Informationen bieten sollten (www.useit.com/alertbox/991114.html). In der Praxis werden sie allerdings hauptsächlich dazu eingesetzt, völlig voneinander unabhängige Hauptpunkte oder Bereiche einer Website erreichbar zu machen. Sat 1 verknüpft dabei, unterstützt durch ein Farbsystem, sehr geschickt den jeweiligen Oberpunkt mit dem Inhalt der Registerkarte. Zwei Schwächen hat die Sat-1-Lösung allerdings: Die Registerkarte selbst ist eine Grafik und damit weder Accessibility- noch Suchmaschinen-optimal. Und das Register muss die Position wechseln, um mit den Unternavigationspunkten verbunden zu sein.

Icon und Bild

Trends im Navigationsdesign

Klassische Schaltflächen haben ausgedient. Wenn Bilder eingesetzt werden, dann sehr reduziert. Beispielsweise sind abgerundete Ecken und einfache Schatten oder 3D-Effekte aktuell. Allerdings werden alle Effekte sehr reduziert eingesetzt. Auch 3D-Effekte sind sehr einfach gehalten und ohne übertriebene Tiefe. Die aufwendigeren Effekte werden idealerweise über eine CSS-Hintergrundgrafik gelöst. Bei höherem typografischem Anspruch ist allerdings auch eine reine Grafiklösung denkbar. Diese hat aber immer den Nachteil schlechterer Accessibility und problematischer Suchmaschinenoptimierung.

Seltener sind im Web Navigationen mit guten Icons zu sehen. Das liegt nicht daran, dass man sich an Icons satt gesehen hätte, sondern hat zwei Gründe: Zum einen bedeuten gute Icons viel Arbeit, zum anderen müssen aussagekräftige Icons aus Symbolen bestehen, die der Nutzer gelernt hat und zuordnen kann, um sich ohne Einarbeitung sofort zurechtzufinden. Beispielsweise verbindet jeder Autofahrer einen Teller mit Gabel und Messer mit einer Raststätte. Im Web gibt es auch einige Symbole wie Pfeil oder Warenkorb, die ähnlich hohe Wiedererkennung besitzen. Eine interessante Übersicht über unterschiedliche Designlösungen liefert www.intersmash.com/300images. Aber auch wenn die Symbole nicht sofort erkennbar sind, lassen sich Icons wie beispielsweise bei www.vcarious.com oder auch bei MTV USA mit dem Text verbinden und sorgen so für eine spannende Optik.

Fazit

Trends im Navigationsdesign

Leider machen sich viel zu wenige Websites Gedanken über das genaue Aussehen ihrer Navigation. Es wird viel von den Großen kopiert. Das ist zwar aus Usability-Gesichtspunkten eher positiv zu bewerten, führt aber oft zu langweiliger Optik und dem Gefühl, dass die Navigation doch nicht ganz zu der Seite passt.

Um die Navigation einer bestehenden Website kritisch zu überprüfen, bieten sich Usability-Tests an. Ergänzend oder als kostengünstigen Ersatz können Sie auch eine einfache Möglichkeitenmatrix anlegen: Schreiben Sie einfach in eine Tabelle, welche Techniken alternativ eingesetzt werden könnten, ob Icons oder Bilder in Frage kämen, welche Formen gute Alternativen wären und wie das Farbkonzept verändert werden könnte. Anschließend bewerten Sie die Alternativen. Wenn Sie eine oder mehrere der aktuellen Navigation vorziehen, dann sollten Sie Änderungen in Erwägung ziehen.