9 Mobile Navigation Patterns die Sie kennen sollten

Ein großes Problem auf mobilen Seiten ist die Navigation. Wie soll der Nutzer an seine heiß begehrten Informationen kommen? Und das auch noch schnell und unkompliziert. Vielleicht auch ein wenig spielerisch, je nachdem was Ihre Webseite zu bieten hat. Warum nicht einfach auf Navigation Patterns zurück greifen? In diesem Blogpost möchte ich Ihnen 9 dieser Patterns vorstellen, um das Navigations-Problem zu lösen.

Navigationskonzepte - von Apps lernen

Funktionen wie ein Gyro-Sensor, GPS und Ortungsdienste sowie eine Kamera gehören bei Smartphones und Tablets zur Standardausrüstung. Eingeschränkt können diese Funktionen auch auf Webseiten genutzt werden. Gerne verwendet wird das Bestimmen der aktuellen Location um Inhalte gezielt anzupassen.

 

 

Google Wetter

Die Suche nach "Wetter" bei Google spielt das Ergebnis der Location entsprechend aus

 

Speziell von Apps kann man viel lernen. Hier sind Designer und Entwickler weit voran geschritten, um den vorhandenen Content komfortabel zugänglich zu machen.

Die Burger King App spricht eine mobile Sprache. Fünf einfache Einstiege, die helfen, unterwegs das nächste Restaurant zu finden, vorher ein Menü auszuwählen und durch Coupons Geld zu sparen.

Burger King App

Facebook ist eine umfangreiche Community mit vielen Funktionen. Neuigkeiten abrufen, Freunde suchen und finden, Veranstaltungen planen, Gruppen gründen und natürlich auch online Spielen. Eine Menge an Inhalten, welche erreichbar sein müssen ohne dabei den Überblick zu verlieren.

 

Facebook App

Facebook App - Navigation durch Off Canvas Menü

 

Mobile Navigation Patterns

Um ihre Seite einfach und strukturiert zu halten, stellen Sie sich nicht einfach nur die Frage "Was soll ich weg lassen?". Verwenden Sie lieber die Energie auf die Suche nach einem passenden mobilen Navigationskonzept. Im folgenden möchte ich Ihnen 9 Mobile Navigation Patterns vorstellen, die dabei helfen, den gesamten Content beizubehalten ohne die Seite unübersichtlich wirken zu lassen.

Dropdown - Der Klassiker

Dropdown

Ein Dropdown Menü in der Kopfzeile einer mobilen Seite bietet Platz für alle Seiten oder Kategorien. Außerdem ist dies ein Standard Element (einfach einzubinden), welches den Spinnig Picker des jeweiligen Betriebssystems (OS) nutzt. Sollen zu viele Einträge angezeigt werden, kann die Auswahl aber schnell unübersichtlich werden.

Intel Drop Down

Mega Dropdown - Der Klassiker 2.0

Mega Drop Down

Anders als das altbewährte Dropdown Feld ist ein Mega Dropdown grafisch aufgearbeitet und nutzt nicht die Standard User Interface Elemente des OS. Es kann Icons enthalten oder einfache Textlinks. Im Grunde funktioniert es ähnlich wie ein PopUp und bietet den Einstieg in die wichtigsten Seiten.

 

 

H&M Mega Drop Down

H&M Mega Drop Down mit Store Finder

 

Priority+ - Einfach und wirkungsvoll

Das Prinzip wurde von Michael Scharnagl erstmalig erwähnt. Hierbei wird die Seitenstruktur auf die wichtigsten Einstiege reduzieren. Als Menü werden einfach Textlinks angeboten. Bei Bedarf kann auch mit einem Tap auf „more+“ die gesamte Navigation eingeblendet werden.

Priority+

Carousel - Spielerische Seitennavigation

Carousel

Pate für diese Navigationsform ist nicht etwa die Cover Album Darstellung in iTunes von Apple. Als Carousel bezeichnet man Diaprojektoren der Firma Kodak. Sie haben ein rundes Magazin und die Dias werden darin kreisförmig einsortiert. So geschieht es auch mit der Navigation. Die Kategorien werden - bspw. mit Hilfe von Bildern - nebeneinander angeordnet. Dadurch entsteht die Möglichkeit, spielerisch die Inhalte zu erforschen und mit dem Finger durch die Seiten zu wischen.

 

Off Canvas - Nicht sichtbar aber immer da

Off Canvas

Als Canvas bezeichnet man die Fläche, die einem Webdesigner zur Verfügung steht - vergleichbar mit einer Leinwand. Verschiebt man nun diese Leinwand außerhalb des sichtbaren Bereichs, befindet man sich im sogenannten „Off“. Die darin enthaltenen Informationen können jederzeit mittels Button aufgerufen und eingeblendet werden.

Der Autor und Designer Luke Wroblewski beschreibt in seinem Blog sehr anschaulich, welche Formen des Off Canvas es gibt und wie diese sinnvoll eingesetzt werden können.

Denkbare Szenarien sind die Unterbringung von Blog-Kategorien, Login-Informationen oder einfach dem Seitenmenü.

Mashable

Springboard - König der Icons

Springboard

Ein Springboard ist ein einfaches Raster aus bspw. 3x3 Elementen. In diesem können Icons zur besseren Orientierung und einem einfachen Zugriff auf Funktionen platziert werden. Natürlich ist es auch erlaubt, aus dem Raster auszubrechen und ähnlich der Burger King App ein anderes Layout mit kleineren oder größeren Flächen zu verwenden.

O2 Springboard

List View - strukturelle Übersicht

List View

Listen sind toll. Sie dienen der Übersicht und sind optimal für einen Einstieg in ein großes Seiten-Sortiment. Darüber hinaus ist diese Darstellung auch in hohem Maße mobile tauglich. Viele E-Commerce Shops setzen diese Navigationsmethode ein, um den Kunden gezielt zur gewünschten Kategorie zu leiten. In einer Studie zu Mobile Commerce Patterns hat sich dieses Prinzip auch bei den Probanden bewährt. Mehr als 50% bevorzugten diese Variante des Einstiegs in einen Online Shop.

T3N_List

Slide Menu - Explorativer Einstieg

Slide Menu

Nutzen Sie auf Ihrer Seite einen Einstieg, welcher über ansprechende Bilderwelten funktioniert? Dann kann das Slide Menu die richtige Wahl für Sie sein. Hier kann der User die Inhalte der Seite regelrecht erkunden und sich von den Inhalten überraschen lassen. Große Teaserflächen haben Platz um ihre volle Wirkung auf den Nutzer zu entfalten. Mit einer Swipe Geste gelangt er einfach zur nächsten Kategorie und wieder zurück.

 

Galerie - Stimulanz durch Bilder

Galerie

Auch bei dieser Variante ist ein Einstieg durch Bilder bevorzugt. Dies hat einen hohen Grad an Stimulanz und eine schnelle Orientierung durch die visuelle Darstellung zum Vorteil. Dieser Methode bedienen sich gerne Online Shops, die ein einfaches und überschaubares Sortiment haben. Für den Bereich Mode ist ein schneller Eintritt in die Bereiche „Herren“, „Damen“, „Schuhe“ und „Sale“ denkbar. Ein schönes Beispiel für eine Galerie-Navigation ist die Auswahl der Lektionen in der Langenscheidt IQ App.

Langenscheidt IQ App

Fazit und Tipps

Die vorgeschlagenen Patterns sollen helfen, den Content zu strukturieren. So behält der Nutzer den Überblick und muss sich nicht grämen, dass Inhalte möglicherweise fehlen.

Natürlich sind Sie nicht daran gebunden, sich ein Konzept auszusuchen. Vielmehr hoffe ich, dass ich Ihre Fantasie angeregt habe, die Patterns zu kombinieren. Hier lassen sich wunderbare Symbiosen schaffen:

  • Off Canvas + Dropdown
  • Carousel + List View
  • Priority+ + Dropdown

 

Navigation Patterns Kombinationen

Navigation Patterns Kombinationen: links - Baur mit einem Teaser Carousel und List View // rechts - Priority+ mit Dropdown

Für weitere Inspirationen empfehle ich einen Blick in die Design Pattern Galleries zu werfen:

http://inspired-ui.com/tagged/navigation

http://www.mobiledesignpatterngallery.com/mobile-patterns.php

Welche Navigations Patterns nutzen Sie auf Ihrer Webseite und welche sehen Sie kritisch? Lassen Sie es mich wissen. Ich freue mich auf die Kommentare.

  • Teilen
  • Send to Kindle
  • http://www.konversionskraft.de/?p=18241
Dennis Herzberger Als Senior Conversion Architect bei der Web Arts AG hat sich Dennis Herzberger der Usability und User Experience von Webseiten gewidmet. Sein leidenschaftlicher Fokus liegt auf der Konzeption und Optimierung von mobilen Webseiten und Onlineshops. Folgen Sie ihm auf Twitter.

Frage zum Artikel? Fragen Sie den Autor!


Please leave this field empty.

7 Reaktionen auf  “9 Mobile Navigation Patterns die Sie kennen sollten”

Kommentare

  1. Lutz Lehmann Lutz Lehmann

    Hallo Dennis Herzberger,

    machens macht man im Alltag quasi intuitiv. So eine tolle Zusammenfassung habe ich aber noch nicht gefunden. Danke!

    Beste Grüße
    Lutz Lehmann

  2. Markus Markus

    Hallo,

    vielen Dank für diese Übersicht, aber mich lässt etwas jetzt nicht in Ruhe.
    Alle Abbildungen beziehen sich auf Smartphones, also Displays mit einem sehr, sehr geringen Platzangebot. Zwar dürften Smartphones öfter zur Hand sein als ein Tablett, aber der Ein oder Andere Besucher hat sicher ein Tablett. Welche Seite sollte man diesen jetzt Anzeigen, die „Desktop“-Version oder die „Smartphone“-Version?
    Bei einem Tablett kann ich zudem schlecht sehen, ob dieser über W-Lan oder EDGE daher kommt.

  3. Hildegard Fuchs Hildegard Fuchs

    Theoretisch finde ich die Bilder- oder Iconnavigationen am besten, weil sie sehr aussagekräftig sind. Andererseits sollte man nicht vergessen, daß die Ladezeiten im WLAN immer noch sehr lange sein können. Daher sind textbasierte Navis meines Erachtens ihrer Schnelligkeit wegen deutlich zu bervorzugen.

  4. Dennis Herzberger Dennis Herzberger

    @Lutz Lehmann:
    Danke. Freut mich. Welche Kombinationen nutzt Du?

    @Markus:
    In meinen früheren Artikeln habe ich mich mit dem Thema auseinander gesetzt. (6 Pfeiler für eine mobile Strategie: http://www.konversionskraft.de/strategie/6-pfeiler-fur-eine-erfolgreiche-mobile-strategie.html) Zu Deiner speziellen Frage: Auf einem Tablet eine für Smartphones optimierte Seite anzuzeigen, halte ich nicht für sinnvoll. Hier kann die Desktop Variante genutzt werden, sollte aber mit Finger benutzbar sein. Dieses Thema ist einen eigenen Blogpost wert. Vielleicht sogar der nächste 😉

    @Hildegard Fuchs:
    Viele der vorgestellten Varianten greifen auf Java Script zurück und benötigen damit entsprechend mehr Ladezeit. Dies ist natürlich bei der Entscheidung abzuwägen. Dennoch denke ich, sofern die Navigation gut umgesetzt und zielführend ist, kann dies eine gewisse Ladezeit rechtfertigen. Ein finaler Test unter realen Bedingungen ohne WLAN darf nicht vernachlässigt werden.

Trackbacks/Pingbacks

  1. […] 9 Mobile Navigation Patterns die Sie kennen sollten […]

  2. […] 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, […]

  3. […] Lernen Sie anhand von 9 praktischen Beispielen, wie sie mit Mobile Navigation Patterns Inhalte auf Ihrer mobilen Seite einfach und schnell zugänglich machen  […]

Hinterlassen Sie einen Kommentar