6 Webdesign-Beispiele, wie du deine Navigation zum kreativen Highlight werden lässt

5. März 2015 von Sebastian Maier

Die Navigation als kreatives Highlight

Wissen, wo’s langgeht: Die Navigation gehört zu den wichtigsten Elementen einer Website, denn sie sorgt dafür, dass Besucher sich schnell zurechtfinden. Am benutzerfreundlichsten ist eine Navigation, wenn sie die inhaltliche Struktur eines Webauftritts klar und sinnvoll abbildet.

Normalerweise sind Navigationen daher sehr ähnlich aufgebaut. Sie befinden sich meist im oberen Bereich einer Seite und clustern einzelne Unterbereiche durch übergeordnete Kategorien. Beim Webdesign wird das Thema Navigation meist eher stiefmütterlich behandelt. Möglicherweise liegt das daran, dass es schwierig ist, den Spagat zwischen einer außergewöhnlichen Idee und dem Erhalt der Usability zu meistern.

Bei den folgenden Beispielen ist genau das aus meiner Sicht jedoch sehr gut gelungen. Es macht Spaß, ungewöhnliche und kreative Ideen bei einem in den meisten Fällen doch recht gleichförmigen Websiteelement zu entdecken. Ich hoffe, euch geht das genauso!


open-your-heart.ca 
Die Navigation bei Open Your Heart gleicht mehr der einer App.

Bei dem Webprojekt “Open Your Heart” geht es darum, zu vermitteln wie wichtig Akzeptanz und Unterstützung für psychisch Erkrankte ist – klar, dass hier auch bei der Navigation der Mensch im Mittelpunkt steht. Bei einer interaktiven Reise kann der Besucher die Geschichten der auf der Website präsentierten Menschen hautnah mitverfolgen

Klickt man auf den “Open My Story”-Button bei einer Person – im Bild bei dem kleinen Jungen –, öffnet sich eine Unterseite mit der persönlichen Geschichte zur psychischen Erkrankung dieses Menschen oder dessen Umgang mit einem Fall im familiären Umfeld. Im rechten Teil der Unterseite kann man mit den Pfeiltasten durch die verschiedenen Geschichten navigieren. Dabei wird die gerade “aktive” Person immer in hellem Grün angezeigt.

Navigation zwischen den Menschen bei der Website Open Your Heart

Die Geschichten selbst lassen sich in drei Versionen lesen. Zunächst mit ausgeschalteter Unterstützung (“support off”) und ausgeschalteter Akzeptanz (“acceptance off”), aber beide Schieber lassen sich im Verlauf des Lesens der Geschichten und unten auf der Hauptseite auf “on” stellen. Damit verändern sich die Geschichten der Menschen ins Positive – so, wie es wohl auch im echten Leben wäre.

Die Inhalte der Website werden beim Aufruf partiell nachgeladen, damit keine langen Ladezeiten das Blättern durch die Geschichten verlangsamen. Die Navigation und der "Seitenaufbau" wurden vollständig mit JavaScript entwickelt. Viele Funktionen wie z. B. das Aktivieren von “support” oder “acceptance” führen ähnlich wie bei einer App zu einer Veränderung der Darstellung, ohne dass die Seite komplett neu geladen werden muss. Die Website und damit auch die Navigation verwenden ähnliche Elemente wie die Präsentations-Software Prezi.

Grundsätzlich war der Programmieraufwand dieser Seite sicherlich sehr viel höher als bei einer “normalen” Website. Es beginnt bei der Logik, die der Navigation hinterlegt ist, sodass von jeder Unterseite aus die verschiedenen Geschichtsvarianten ohne lange Ladezeiten abgerufen werden können. Auch war der Abstimmungsbedarf zwischen Entwickler und Designer daher bestimmt dementsprechend groß.

Hinzu kommt, dass die Navigation nur auf der Desktopversion der Website zu sehen ist. Bei der mobilen Darstellung sind diverse Videos passend zum Thema eingebunden. Das bedeutet, dass ein doppelter Entwicklungsaufwand betrieben werden musste.


rallyinteractive.com
Die Navigation bei Website Rally ist besonders toll animiert

Der Internetauftritt der Webagentur “Rally Interactive” hat es mir besonders angetan. Aus meiner Sicht handelt es sich dabei um ein kleines Meisterwerk. Die verschiedenen Animationen auf der Seite sind nicht nur sehr aufwendig gestaltet, sondern auch wirkungsvoll miteinander verknüpft.

Klickt man beispielsweise rechts oben auf das Navigationsicon, entfaltet sich der bisher rein dekorative Papierstreifen zu einem Menü am Kopf der Website.

Das ausgeklappte Navigationmenüs bei der Website Rally


Schließt man das Menü, wird der Hintergrund wieder zu einem animierten Papierstreifen.

Dieselbe Navigation wird auch in der mobilen Version der Seite verwendet, nur befindet sich dort das ausgeklappte Menü nicht am Kopf der Website, sondern am linken Bildschirmrand.


thisislandscape.com
Bei der Navigation bei Website Landscape wechseln die Bilder im Hintergrund

Die Designagentur Landscape bietet auf der Startseite ihrer Website einen Überblick über ihr Portfolio mit einer speziellen Animation: Fährt man mit dem Mauszeiger über die Kundennamen, wird im Hintergrund ein dem Projekt zugehöriges Bild eingeblendet. Dies wirkt jedoch überhaupt nicht hektisch, was daran liegt, dass zu schnelle Überblendungen vermieden werden.

Befindet man sich auf einer Unterseite, kann man komfortabel durch die Website navigieren, indem man links oben auf das Landscape-Logo klickt. Es erscheint ein Overlay der Startseite, über den man entweder auf eine andere Projektseite wechseln oder den man mit einem Klick auf das “X” wieder schließen kann.

Einerseits finde ich es eine tolle Idee, mit einem Klick auf das Logo die Startseite mit der Navigation wieder erscheinen zu lassen, andererseits ist das nicht unbedingt bedienerfreundlich. Geht man von einem weniger internetaffinen Nutzer aus, kann es sehr wahrscheinlich sein, dass er die Funktion des Logos nicht erkennt und frustriert aufgibt. Außerdem ist das “X” bei manchen Farbhintergründen nur schwer zu erkennen.

In der mobilen Version gibt es im Gegensatz zur Desktopversion keine Möglichkeit zur Direktauswahl der Projekte. Das ist in meinen Augen ein weiterer Kritikpunkt. Kennt man die Bedienung der Website auf dem Rechner, fühlt man sich auf der mobilen Website verloren.


oudolf.com
Die Navigation bei Website Piet Oudolf wird durch Projektbilder unterstützt

Piet Oudolf ist ein Landschaftsgärtner, der auf seiner Website die Natur beziehungsweise die von ihm gestalteten Gärten und Parks in den Mittelpunkt stellt. Die gestanzte Schrift der präsent auf der Eingangsseite aufgelisteten Gartenprojekte lässt vermuten, dass sich dahinter jeweils ein grünes und blühendes Bild verbirgt. Und tatsächlich – fährt man mit dem Mauszeiger über einen der Namen, öffnet sich ein Arbeitsbeispiel des Landschaftsgärtners in Form eines Fotos.

Dank der Mouseover-Funktion wird kein Gartenname von einem der Bilder verdeckt, während es geöffnet ist. Man kann somit zwischen den Namen hin und her navigieren und sich die Arbeitsbeispiele ansehen, ohne dass man ein Foto wieder schließen muss.

Die Navigation wurde auf die mobile Darstellung angepasst, indem die Namen untereinander und nicht blockweise nebeneinander angeordnet wurden. Da es bei mobilen Geräten nicht die Möglichkeit gibt, mit der Maus über ein Element zu fahren, funktioniert das Betrachten der Arbeitsbeispiele auf dem Tablet oder dem Smartphone nur per Klick.


jovaconstruction.com
Durch die Animation ist die Navigation der Website JOVA Construction besonders verspielt.

Das französische Bauunternehmen Jova wartet mit einer besonders verspielten Navigation auf. Ruft man die Website auf, rollt sich die Navigation ähnlich wie ein Papierbogen nach rechts auf. Beim Mouseover über die einzelnen Menüpunkte klappen diese auf und der zusätzliche Text neben der Überkategorie verschwindet. Mit einem Klick auf den Pfeil unter der Navigationsbox verkleinert sich diese und fährt nach links.

Auf den Unterseiten ist das Menü von Anfang an am linken Bildschirmrand fixiert.

Auf Unterseiten ist die Navigation am Rand fixiert.

Klickt man darauf, öffnet sich die Navigation wie auch auf der Startseite in einem Overlay als rechteckige Box im Zentrum der Seite. Wenn man solche Overlays normalerweise schließen möchte, muss man erst mühsam nach einem “X” oder etwas Ähnlichem suchen. Auf der Jova-Website wurde aus meiner Sicht ein kleines, aber besonderes Detail eingesetzt. Verlässt man mit der Mouse das Overlay, verwandelt sich der Mousezeiger in ein gestaltetes “X”. Das heißt, dass man die Navigation an jeder Stelle der Seite ganz einfach mit einem Rechtsklick schließen kann.

Leider wurde die Website nicht für die mobile Nutzung optimiert – die Inhalte lassen sich nur sehr schwer lesen und auch das Zoomen funktioniert nicht.


joris.works
Die Navigation bei Joris Rigerl ist schwer zu lesen

Bei dieser Navigation sind wir bei smooster nicht einer Meinung – die einen finden sie super – die anderen finden sie nicht so ideal. Doch da wir diese Art der Navigation bisher noch nicht gesehen hatten, wollten wir sie hier für euch aufnehmen. Der größte Kritikpunkt aus unserem Team ist die schlechte Lesbarkeit aufgrund der vielen hellen Farben, denen kaum Kontraste entgegensetzt sind.

Zur Navigation selbst: Fährt man mit der Maus über die einzelnen Navigationselemente, öffnet sich eine horizontale Leiste mit weiteren Informationen und der Gedankenstrich am linken Rand verwandelt sich in ein “+”.

Klickt man auf die Leiste, betritt man die dazugehörige Unterseite, wobei die Leiste am Kopf der Website fixiert bleibt.

In der mobilen Version sieht die Navigation fast genauso aus. Nur die Animation mit der sich öffnenden Leiste wurde weggelassen. Klickt man auf eine Unterseite, sieht man dort neben dem Menü-Icon, auf welcher Seite man sich befindet.


Ich hoffe, ich konnte euch zu ein wenig Kreativität und Mut beim Designen einer Navigation inspirieren. Mir persönlich gefällt es nämlich sehr gut, beim Aufrufen einer Website mit einer ungewöhnlichen Menüführung überrascht zu werden – vorausgesetzt natürlich, dass sie gut gemacht ist. Da gerade beim Thema mobile Optimierung bei den meisten hier vorgestellten Beispielen noch Luft nach oben war, interessiert euch vielleicht mein Artikel “6 Tipps, die dir helfen, die richtige Responsive Navigation für deine nächste Website zu finden”.

zurück
comments powered by Disqus