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.
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.
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.
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
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.
Mega Dropdown – Der Klassiker 2.0
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.
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.
Carousel – Spielerische Seitennavigation
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
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ü.
Springboard – König der Icons
Ein Springboard ist ein einfaches Raster aus bspw. 3×3 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.
List View – strukturelle Übersicht
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.
Slide Menu – Explorativer Einstieg
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
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.
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
Welche Navigations Patterns nutzen Sie auf Ihrer Webseite und welche sehen Sie kritisch? Lassen Sie es mich wissen. Ich freue mich auf die Kommentare.
5 Kommentare
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
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.
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.
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: //b2zo0i6c.myraidbox.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.
Jup,
Spitze!