uxcases

Mobile Navigation best pratice - optimale Bedienung für Smartphones

Veröffentlicht am

Lesezeit: ca. 3 Minuten

Schlagworte Navigation, Mobile

Die mobile Navigation einer Website oder App ist essentiell für die Nutzerführung. Ziel ist es, den User schnell auf relevante Seiten zu navigieren, ohne dabei störend aufzufallen. Mit der Zeit haben sich verschiedene Darstellungsformen von Navigationen durchgesetzt. Wir zeigen hier vier Navigationstypen, die als Best Practice zu bezeichnen sind. Welche ist die richtige für meine mobile Website?

4 Darstellungsformen von Mobile Navigationen

Drawer Navigation

Die Drawer Navigation ist die klassische Darstellung auf Mobile Devices für die Hauptnavigation. Gerade Google hat es mit dem standardisierten Material Design auf der Android-Plattform für sämtliche Native Apps etabliert. Aber auch viele Websites und Web Apps profitieren von der smarten Darstellung.

Über ein Hamburger-Icon kann das Panel von der Seite eingeschoben werden. Das ist platzsparend, sodass auch umfangreichere Menüs in einem solchen Drawer platziert werden können, ohne dass sie das digitale Erlebnis für den User beeinträchtigen.

Bei der Gestaltung einer solchen Navigation sollte man darauf achten, von welcher Seite man den Drawer einschieben möchte. Dementsprechend ist auch die Position und Art des Icons zu wählen. Um den Drawer mehr in den Fokus zu setzen, kann man den restlichen Bildschirminhalt mithilfe eines schwarzen halbtransparenten Layers abdunkeln.


Dropdown Navigation

Eine gute Alternative zur Drawer-Navigation ist ein sogenanntes Dropdown. Dabei klappt bei Klick auf ein Hamburger-Icon (manchmal auch ein Select-Feld) ein Menü aus. Klassischerweise sind hier weniger Menülinks als bei der großen Drawer-Navigation hinterlegt, sodass nur die Hälfte des Viewports überdeckt wird.

Der Navigationstyp ist kleiner und eignet sich für Websites mit nur wenigen Menülinks. Werden es zu viele, sollte man auf eine Drawer-Navigation umsteigen.

Auch bei dieser Variante empfiehlt es sich, bei geöffnetem Menü den restlichen Bildschirm abzudunkeln. Von einem Select-Feld als Trigger für das Menü sollte man absehen, denn dafür ist Javascript-Einsatz notwendig, um die Weiterleitung auf die Ziele einzurichten. Das heißt hierbei werden keine Links gesetzt, was sich negativ auf SEO und Ladezeit der Website auswirkt.


Iconbar Navigation

Die Iconbar Navigation wird gerade im App-Segment oft eingesetzt. Dabei werden die Hauptbereiche der Applikation mit Icons visualisiert und in einer horizontalen Bar dargestellt. Gerade Apple hat diesen Navigationstyp auf den iOS-Geräten etabliert. Hier ist die Navigation meist am unteren Ende des Bildschirms fixiert (Bottom Iconbar Navigation um ein Gegengewicht zur Kopfzeile zu haben.

Dieser Navigationstyp ist bei Websites generell nicht en vogue, da er nur für übersichtliche Seiten einsetzbar ist. Umfangreiche Corporate Websites profitieren von solch einer Hauptnavigation nicht, da sich dort nicht alle relevanten Bereiche abbilden lassen.

Damit die Navigation richtig funktioniert, ist die richtige Auswahl von passenden Icons essentiell. Diese sollten den Inhalt hinter dem Menüreiter gut verbildlichen. Um den Einstieg für neue User zu vereinfachen, ist der Einsatz von Labels für die Icons empfehlenswert. Mehr als 5 Icons in der Reihe sollten vermieden werden, da sonst die Darstellung der Icons zu klein wird.


Horizontal Scroling Navigation

Eine Abwandlung der Iconbar ist die Horizontal Scrolling Navigation. Dies ist ebenfalls eine horizontal ausgerichtete Bar, bei der allerdings die Inhalte durch horizontales Scrollen erreicht werden können. Hierbei wird auch auf üblicherweise auf den Einsatz von Icons verzichtet, um mehr Links abbilden zu können.

Der User muss wissen, dass das Menü scrollbar ist. Deshalb ist der Einsatz von einem Pfeil und ein Ausfaden mithilfe eines kleinen Farbverlaufs über den Links sinnvoll. Auch sollte hier beachtet werden, dass auf Touch-Geräten klickbare Elemente großzügig gestaltet sind um ein versehentliches Tippen auf den falschen Link zu vermeiden.


Fazit

Egal welcher Typ von Navigation man einsetzt, eines haben alle gemeinsam: Sie müssen den User die bestmögliche Nutzerführung bieten um erfolgreich relevante Inhalte finden zu können. Die Gestaltung der Haupt-Navigation alleine ist aber nicht ausreichend für eine gute User Experience. Auch speielen weitere Aspekte wie beispielsweose eine gute Suche oder gut platzierte Links unter Artikeln oder Seiten eine wesentliche Rolle für ein gutes Nutzerelebnis.

Ähnliche Tipps

Ihr Case

Sie haben auch einen Case für uns?

Wir prüfen regelmäßig Websites und Apps auf ihre Usability. Dabei gehen wir von einfachen Usecases aus, wie beispielsweise der Bestellvorgang in einem Online-Shop oder die Handhabung einer News-App. Haben Sie auch einen Case für uns? Dann melden Sie sich bei uns!

Die Experten

Logo der Digitalagentur helllicht

helllicht ist eine spezialisierte Digitalagentur mit Büros in Frankfurt und Groß-Gerau.

Als Agentur realisieren wir für unsere Kunden Web-Projekte bei denen Usability und Conversions erfolgsentscheidende Faktoren sind. Also immer dann, wenn es darauf ankommt.

Zu unseren Stärken gehört es User, ihre Bedürfnisse und Verhaltensweisen zu verstehen. Daher wissen wir aus vielen Jahren Erfahrung, was eine Website ausmacht und welche Effekte sich positiv und nachhaltig auf die User Experience auswirken.

Mehr Informationen

Unser Newsletter

Die neuesten Cases in Ihr E-Mail-Postfach.

Verpassen Sie keine Website-Reviews mehr. Wir benachrichtigen Sie in unserem kostenlosen Newsletter regelmäßig über unseren aktuellen Case.

Wir verwenden MailChimp als unsere Plattform zur Marketing-Automatisierung. Indem Sie unten zur Absendung dieses Formulars klicken, bestätigen Sie, dass die von Ihnen angegebenen Informationen an MailChimp zur Verarbeitung in Übereinstimmung mit deren Datenschutzrichtlinien und Bedingungen weitergegeben werden. Bitte beachten Sie auch unsere weiteren Hinweise zum Datenschutz.