Kreative Webseiten-Navigation

In einigen Fällen lohnt es sich, das konventionelle Webdesign abzulehnen und eine kreative Navigation durch die eigene Webseite zu gestalten. Konventionen sind im Webdesign äußerst hilfreich. Das Logo verlinkt auf die Startseite.

Die Überschrift eines Teasers führt zum Artikel. Und das Hauptmenü befindet sich im Kopf oder auf der linken Seite. Das dient insbesondere der Nutzerfreundlichkeit. Besucher können sich so schnell orientieren und müssen sich nicht jedes Mal neu auf einer Seite zurechtfinden.

Aus Sicht eines Webentwicklers oder Usability-Experten gibt es auch keinen Grund, daran zu rütteln. Besucher sollen ja zu den Inhalten finden. Gehen Sie jedoch von Konzeption oder Design aus, stellt sich die Sache etwas anders da: Diese immer gleiche Art der Anordnung wirkt dann nämlich schnell langweilig und kann eine kreative Ader nicht bei Laune halten. Wer als Kreativer etwas auf sich hält, will also schon aus eigenem Antrieb Neues ausprobieren, und dazu gehören auch andere Arten der Navigation.

Kreative Experimente sind nicht für jedes Projekt geeignet: Je verspielter die Navigation wird, desto größer ist die Gefahr, dass ein Besucher sie nicht versteht (oder gar findet). Daher kommen solche Spielereien nur für wenige Seiten infrage: Meist sind es Portfolios von Freelancern oder Agenturen, One-Pager oder Microsites. Zunächst brauchen Sie ein kreatives Konzept für die Navigation.

Dabei stellen sich ein paar offensichtliche Fragen: Was passiert z. B. mit der Navigation in der Mitte einer Startseite, wenn nach einem Klick an dieser Stelle Inhalte erscheinen sollen? Ist die Navigation deutlich zu erkennen; muss sie vielleicht farblich hervorgehoben werden? Wie barrierearm ist die Navigation? Lässt sie sich auch mit der Tastatur bedienen? Ist ersichtlich, wie mit Maus und Tastatur gearbeitet werden kann - oder müssen Sie die Navigation kurz erklären? Vielleicht ist es sinnvoll, zusätzlich zu einer Navigation per Drag oder Tastatur doch ein kleines Menü anzubieten? Das allein kann bereits problematisch sein.

Wenn Sie jedoch heutzutage eine Webseite frisch ins Netz stellen, kommen weitere Anforderungen hinzu, die Sie vor ein paar Jahren noch außer Acht lassen konnten: Funktioniert die Navigation auch mit einem Touchscreen? Wie passt sich die Navigation in einem responsiven Design an?

Trotz der Probleme kann sich ein außergewöhnlicher Ansatz lohnen. Etwa weil Sie ein ungewöhnliches Produkt präsentieren oder die Kreativität Ihrer Agentur in den Vordergrund stellen wollen. Hier finden Sie einige Beispiele, wie andere es machen. Nicht jedes Beispiel genügt Anforderungen an eine moderne Webseite; es gibt etwa nicht überall responsive Lösungen, in einigen Fällen sind die Navigationen auch nicht barrierefrei. Aber sie können Anregungen für eigene Projekte liefern. Sie müssen nicht gleich alle Register ziehen und Ihre Navigation komplett auf den Kopf stellen.

Es gibt deutlich dezentere Varianten, die Ihre Menüpunkte vielleicht nur etwas anders anordnen. Die Webseite von Aneta Jani?kova etwa zeigt ein Nebenmenü rechts, die Menüpunkte sind leicht verstreut. Die farbenfrohe Anordnung mit Sechsecken trägt hier zum Design bei. Das Menü ist deutlich zu erkennen, bleibt beim Klicken am Platz und dürfte auch neue Benutzer nicht überfordern. Ein Blick in den Quellcode zeigt, dass die Menüpunkte hier wild als div-Elemente angelegt sind. Das ließe sich auch "ordentlich" nach Webstandards mit einer Liste für die Navigation regeln.

Eine Variante, die oft zu sehen ist, zeigt ein etwas freieres Hauptmenü auf einer Art Verteilerseite. Die Menüpunkte sind vielleicht im Kreis, als Rauten oder Streifen angelegt.

Bei einem Klick legt sich der gewünschte Inhalt dann entweder in einem Layer über die Seite - oder aber es öffnet sich wie auf blindalterations.com.au tatsächlich eine neue Seite. Auf der Webseite sind die Menüpunkte in die Mitte der Seite "gerutscht". Bei einem Klick öffnet sich ein Kasten, der sich über das Raster in der Seitenmitte legt. Sichtbar bleibt der große grüne Home-Button im Kopf, über den Sie wieder zur Übersicht kommen.

Da die grünen Menüpunkte deutlich auffallen und nicht nur Icons, sondern auch Textbieten, sollte es auch hier wenig Probleme mit der Benutzerführung geben. Deutlich anders navigieren Sie auf der Webseite von Reverse Büro durch die Referenzen. In den Ecken finden Sie Navigationshilfen. Rechts unten zeigen Buttons, dass Sie mit den Pfeiltasten bzw. der Plus- und Minustaste zwischen den Referenzen hin- und herschalten können (das Mausrad funktioniert hier nicht). Rechts oben zeigt Ihnen eine kleine Legende, wo Sie sich gerade befinden. Sicherheitshalber gibt es links unten zusätzlich einen Button "Menü", durch den Sie die einzelnen Referenzen direkt anklicken können. Alles sehr bildlastig und reduziert umgesetzt, aber passend für ein Designbüro.

Es muss nicht immer dezent sein. Bei der Agentur Lawler Ballard Van Durand nehmen die Navigationspunkte gleich die ganze Seite ein. Sie sehen einfach eine lange Liste an Referenzen. Egal ob Text oder Bild, alles ist anklickbar. Daraufhin öffnet sich eine Lightbox mit der Referenz. Auch die beiden Menüpunkte "About" und "Contact" in der fixierten Fußzeile öffnen eine Lightbox. Die Seite wird per JavaScript dem Viewport angepasst, bei kleinen Bildschirmbreiten erscheinen die Inhalte linearisiert.

Die russische Seite actionfilm.ru startet mit einer kurzen Erklärung zur Navigation, die dann schnell wieder ausgeblendet wird. Auch ohne Russisch zu verstehen, können Sie leicht erkennen, dass sich die Seite per Maus oder Pfeiltasten navigieren lässt. Am linken Rand finden Sie schmale Menüpunkte für das Team, Kunden, Awards oder Über uns. Hauptsächlich geht es aber um die vielen Video-Referenzen, die hier deutlich im Fokus stehen. Passend für ein Unternehmen, das auf TV, Werbespots, Musikvideos und Spielfilme spezialisiert ist.

Grip Limited ist eine Agentur aus Toronto, Kanada. Die Webseite präsentiert sich ungewöhnlich voll und textlastig. Jede Spalte lässt sich einzeln mit dem Scrollrad nach unten und oben verschieben. Zusätzlich kann ein Benutzer die ganze Seite nach links und rechts ziehen - und dort gibt es noch jede Menge Inhalte zu entdecken. Die dritte Spalte klärt den Benutzer über seine Navigationsmöglichkeiten auf, Spalten lassen sich zusammenklappen, oben gibt es zusätzlich ein Menü. Und per Pfeiltasten ist die Seite ebenfalls navigierbar. Umgesetzt ist das Ganze noch in Flash, mit offensichtlichen Nachteilen für die Barrierefreiheit oder Suchmaschinenoptimierung.

Das Ganze könnten Sie aber auch leicht mit Webstandards umsetzen. Form follows function ist eine Sammlung von "interaktiven Erlebnissen", die alle in HTML5 für Desktop und Tablets entwickelt wurden. Darauf finden Sie viele interessante Web-Experimente. Auch die kreisförmige Navigation am unteren Rand ist mitWebstandards umgesetzt. Ein Benutzer kann den Kreis bewegen, indem er ihn mit der Maus nach rechts und links zieht. Das funktioniert auch auf einem Tablet flüssig. Was fehlt, ist hier allerdings eine Steuerung per Tastatur.

Dann gibt es noch Webseiten für Entdecker, wie z. B. "jacqui's Journey to the Perferct Cake". Die Seite beschreibt den Weg zum perfekten Kuchen. Direkt unter dem Titel weist ein "Drag to explore" auf die Navigation hin: Hier wird erwartet, dass ein Benutzer die Maus zum Ziehen der Seite nutzt. Zusätzlich lässt sich die Seite auch mit den Pfeiltasten bewegen, das Scrollrad dient hier zum Zoomen. Links oben sind die Navigationsmöglichkeiten auch einmal grafisch dargestellt. Im fixierten Hauptmenü können Sie per "Quick Jump" alle Punkte der Seite direkt ansteuern.

Alle genannten Beispiele sind zwar an der einen oder anderen Stelle verbesserungswürdig. Es ist aber auch deutlich zu sehen: Es gibt Spielraum für innovative Navigationen. Für manche Produkte oder Dienstleistungen kann es sich durchaus lohnen, ein wenig experimentierfreudiger zu sein. Und sei es nur, um die Menüpunkte einmal nicht langweilig oben oder links in Reih und Glied zu setzen.