Kreative und Innovative Navigationsdesigns

Ich arbeite gerade an einem neuen Template, welches natürlich responsive sein soll. Grund genug, mich näher mit kreativen und innovativen Navigationsdesigns zu beschäftigen und schön Beispiele aufzuzeigen. Eine klare Navigationsdesign gehört zu den Grundlagen des Webdesigns.

Dabei muss natürlich zwischen der Darstellung auf dem Desktop und auf dem Smartphone unterschieden werden. Während ich auf dem Desktop locker in die Breite gehen kann und die volle Größe des Bildschirms nutzen kann, muss das Navigationskonzept auf dem Smartphone überarbeitet werden. Dabei muss beachtet werden, dass Nutzer mit der Desktop-Version der Webseite bereits vertraut sein könnte und sich nun auch mit der mobilen Navigation zurechtfinden muss.Sucht man hier nach passenden Konzepten, kann man sehr viel von Apps lernen. Die Designer sind hier sehr weit und haben viele gute Konzepte erarbeitet. Lernt man von diesen, steht dem Erfolg der mobile Webseite nicht mehr viel im Weg.

Mobile Navigationsdesigns und -konzepte

Auf einer Webseite muss man zum Teil sehr viele Inhalte unterbringen. Wie bereits oben beschrieben ist dies auf dem Desktop kein Problem. Im Portraitmodus habe ich auf einem Smartphone aber nur begrenzten Platz und wenn ich die Schriftgröße nicht bis zum unkenntlichen verkleinern will, muss eine andere Art von Navigation als eine Vertikale nutzen.

Facebook ist eine sehr große Plattformen mit sehr vielen Inhalten. Die Entwickler der App standen hier also auch vor dem Problem, all diese Inhalte in der App zugänglich zu machen. Meines Erachtens ist dies sehr gut gelungen. Tippt man den Menübutton an, wird die Navigation sichtbar. Diese ist dann nach den entsprechenden Themen gruppiert.

Mobile Navigationsdesign Patterns

Konversionskraft hat in einem Artikel 9 verschiedene Patterns aufgeführt, diese werde ich hier nur sehr kurz anreißen.

• Dropdown
  Ein Dropdown-Menü in der Kopfzeile.
• Mega-Dropdown
  Ein grafisch aufbereitestes Dropdown-Menü.
• Priority
  Diese Navigations zeigt nur die wichtigsten Punkte der Navigation als Textlinks an.
• Carousel
  Dieses Navigationsdesign kommt iTunes-Nutzern bekannt vor. Die Navigationselemente werden nebeneinander angeordnet.
• Off Canvas
  Die Navigation ist immer da und befindet sich außerhalb des Screens. Ein Tap blendet sie ein. Facebook nutzt diese Art der Navigation. Luke Wroblewski hat zu Off Canvas Navigation einen umfangreichen Artikel geschrieben.
• Springboard
  Ein Raster mit Icons. Sehr übersichtlich, allerdings ist die Zahl der Navigationspunkte limitiert.
• List-View
  Listen stellen immer eine übersichtliche Möglichkeit dar, Inhalte übersichtlich zu gliedern.
• Slide Menu
  Über einen Slider mit Grafiken kann der Nutzer sich hier durch die Navigation wischen.
• Galerie
  Menschen können Bilder schneller verarbeiten als Text. Diese Form der Navigation macht sich diese Eigenschaft zu nutze.

Man kann natürlich auch diverse Pattern kombinieren. Je nach Projekt ist ein anderes nützlich. Ich habe mich für mein Template für Off Canvas und List-View entschieden, da ich sehr viele Inhalte unterbringen muss.

Weitere inspirierende Navigationsdesign Patterns gibt es zum Beispiel bei mobile-patterns.com oder inspired-ui.com.

Kreative Navigationsdesigns für den Desktop

Da auch der Desktop nicht zu kurz kommen darf, hier noch ein paar kreative Beispiele:

Toybox

Eine Navigation sollte immer dann da sein, wenn der Nutzer sie brauch. Sehr schöne Animationen und eine Anlehnung an Mobile Navigationspatterns.

Second Story

Ein schönes Beispiel für eine vertikale Navigation.

Mostly Serious

Ein wenig verspielt und schön animiert. Die Navigation begrüßt den Nutzer und lädt ihn ein, auf die Ballons zu klicken.

Diese und weitere spannende Navigationsdesigns habe ich bei Smashing Magazine gefunden. Nutzt man aktuelle Technologien, dann sind der Kreativität fast keine Grenzen gesetzt. Allerdings sollte man am Ende immer den Nutzer im Blick behalten. Ist man sich nicht sicher, ob die Navigation funktioniert empfiehlt sich ein Usability-Test.