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

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.

Navigationtypen
Die Bandbreite von Navigationen ist vielfältig. Vier Darstellungsformen für das Hauptmenü haben wir in einem Artikel zusammengefasst.

Zum Artikel
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.

Passender Case
Über die Übersichtlichkeit und Gestaltung von Navigationen haben wir auch in unserem Case zur IKEA Deutschland Website geschrieben.

Zum Case
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.