uxcases

4 heiße Tipps für ein gutes Mobile Menü

Veröffentlicht am

Lesezeit: ca. 2 Minuten

Schlagworte Navigation, Mobile

Eine wesentliche Aufgabe des UX-Designers ist es, dem User das Navigieren auf der Website so intuitiv und einfach wie möglich zu gestalten. Vor allem mobil gibt es da ein paar Hürden zu überwinden: Wie kennzeichne ich das Menü? Wo platziere ich es und welche Inhalte gehören hinein? Wir haben vier Best Practice-Tipps für eine gelungene mobile Navigation.

Best Practice Mobile Menü

1. Position und Erreichbarkeit der Navigation

Die Hauptnavigation einer Website ist wichtigste Anlaufstelle zum Navigieren. Sie sollte daher jederzeit erreichbar sein. Erreichen lässt sich dies dadurch, dass man beispielsweise die Kopfzeile mobil fixiert, sodass der Link zur Navigation beim Scrollen mitwandert.

Doch ist Position in der Kopfzeile gerade in mobilen Seiten nicht zwingend notwendig. So gibt es auch vereinzelt Beispiele, bei der die Navigation am unteren oder gar seitlichen Bildschirmrand fixiert ist. Denn dort ist die Navigation für die einhändige Bedienung des Smartphones gegebenenfalls einfacher zu erreichen.

2. Art der Navigation

Das Menü der Website lässt sich in verschiedenen Arten darstellen. Ob in einem Drawer-Panel, welches sich von der Seite einschiebt, oder eine fixierte Navigationsbar am unteren Ende des Viewports. Die Möglichkeiten sind divers und sollten vorher diskutiert werden. Denn nicht jede Darstellungsform eignet sich für alle Arten von Websites.

Hat man sich für einen Typ entschiedenen, ist es wichtig, dass man es bei diesem einen Typ belässt und nicht mit anderen Navigationstypen kombiniert. Außnahmen bilden hier natürlich zweitrangige Menüs, die allerdings weitaus dezenter gestaltet werden sollten und nicht zwingend permanent im Viewport zu sehen sein müssen.

3. Umfang und Inhalte der Navigation

Eine gute Mobile Navigation sollte Direkteinstiege in die wichtigsten Übersichtsseiten der Website bieten. Gerade weil mobil keine großen Baumstrukturen abgebildet werden können, ist es ratsam wenige Hierachieebenen anzubieten und stattdessen über gute Übersichtsseiten auf tiefere Inhalte zu verlinken.

Oft vergessen bei der mobilen Navigation: Die Suche. Sie sollte mobil keinesfalls wegfallen und gut in die Menüstruktur integriert werden. Gut lässt sich dies mit einem passenden Lupen-Symbol, welches das Eingabefeld öffnet, lösen.

Um mobil schneller auf die eigenen Social-Media-Kanäle zu verweisen hat es sich außerdem bewährt die Profile mit entsprechenden Icons direkt unter den Hauptlinks zu platzieren.

4. Bedienbarkeit der Navigation

Aufgepasst, wir befinden uns auf mobilen Endgeräten. Hier erfolgt die Bedienung üblicherweise via Touch-Steuerung. Das bedeutet auch, dass alle Menü-Einträge großzügig gestaltet sein müssen und der Abstand zwischen den Items entsprechend hoch gesetzt ist.

Denkbar ist auch eine Gestensteuerung bei der die Navigation neben dem klassischen Hamburger-Icon auch durch Touchslide eingeblendet werden kann.

So geht's – Benutzerfreundliche Mobile Navigation

Um eine mobile Navigation benutzerfreundlich zu gestalten sind folgende vier Aspekte zu beachten:

  • Das Hauptmenü sollte von jeder Stelle aus erreichbar sein. Am besten wird der Link zum Menü mobil fixiert.
  • Es gibt verschiedene Arten von Navigationen. Die Wahl der Darstellungsform des Hauptmenüs ist abhängig von Umfang und Aufgabe.
  • Mobil sollte die Navigation kompakt und überichtlich sein. Eine Suche ist als weitere Navigationsform sinnvoll.
  • Gerade mobil ist die Touch-Bedienung zu beachten. Elemente müssen gegebenenfalls größer ausfallen.

Ä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.