Menü-Gestaltung für mobile Websites – Antworten auf die 3 häufigsten Fragen

Auf Desktop-Websites haben sich inzwischen so genannte Mega-Dropdowns als Best Practice für die Hauptnavigation etabliert. Auf dem Smartphone dagegen stellt sich die Menü-Gestaltung weit komplizierter dar: Der stark begrenzte Platz erfordert meist eine nicht permanent sichtbare Navigation.

Aus diesem Grund führte die eResult GmbH im März 2014 eine Grundlagenstudie zum Thema „Mobile Web Navigation“ durch. Basierend auf den gewonnenen Erkenntnissen werde ich in diesem Artikel die drei häufigsten Fragen beantworten, die sich zur Menü-Gestaltung auf mobilen Websites stellen:

1. Wie kennzeichne ich den Zugang zum Menü?
2. Wie sollte ich das Menü einblenden
3. Wie gehe ich mit mehreren Navigationsebenen um?

Zur Grundlagenstudie „Mobile Web Navigation“

Die eResult GmbH führte die Studie im März 2014 im Usability-Labor in Hamburg durch. Es nahmen 13 Probanden zwischen 25 und 54 Jahren teil, die ihr Smartphone bereits länger als ein Jahr besaßen und es zwischen 2 und 10 Stunden pro Woche für den Aufruf von Websites verwendeten. Sie nutzten im Test vier unterschiedliche Websites auf ihrem eigenen Smartphone, zunächst frei und dann anhand konkreter Aufgaben. Wir wählten die Websites so, dass eine möglichst breite Abdeckung unterschiedlicher Ansätze für die mobile Navigation gegeben war: Tagesschau.de, Obi.de, Huk24.de und VisitEngland.de.

Weitere Details zum Studiendesign sowie alle Erkenntnisse liefern euch der Forschungsbeitrag und der dort verlinkte, vollständige Studienband. Unter anderem konnten wir die folgenden häufigen Fragen zur Menü-Gestaltung beantworten:

1. Wie kennzeichne ich den Zugang zum Menü?

Auf vielen mobilen Websites findet sich zum Aufruf des versteckten Hauptmenüs das so genannte „Hamburger-Icon“, welches drei horizontale Linien übereinander zeigt. Auch in mobilen Apps hat sich dieses Symbol als de-facto-Standard durchgesetzt. Aber ist diese Verbreitung gerechtfertigt? Wird das Icon wirklich von allen Nutzern verstanden?

Leider zeigte unsere Studie, dass dies nicht der Fall ist. Wie sich auf den Seiten von Obi.de und VisitEngland.de herausstellte, war das „Hamburger-Icon“ mehreren Probanden nicht geläufig, so dass sie den Einstieg in die Hauptnavigation nicht fanden – ein schwerwiegendes Usability-Problem!

Als problemlos stellte sich dagegen eine Beschriftung der entsprechenden Schaltfläche heraus. Das Wort „Menü“ ist kurz, prägnant und wurde von allen Probanden sofort gesehen und verstanden. Die zusätzliche Verwendung eines Icons ist dabei nicht notwendig, kann jedoch das Verhalten des Menüs andeuten (z.B. Pfeil nach unten für Dropdown-Menüs) und den Lernprozess der Nutzer fördern.

Guidelines für den Zugang zum Menü:

• Der Zugang zum Hauptmenü sollte nicht nur mit einem Icon, sondern mit Text gekennzeichnet werden.
• Ausnahmen von dieser Regel kann es natürlich bei speziellen, besonders affinen Zielgruppen geben.
• Zudem ist zu erwarten, dass die Verbreitung und das Verständnis der Nutzer für dieses Icon in den nächsten Jahren weiter steigen werden.

2. Wie sollte ich das Menü einblenden?

Die Art und Weise, wie die Hauptnavigation auf mobilen Websites eingeblendet wird, variiert: Häufig gibt es Dropdown-Menüs, die sich über den Seiteninhalt legen. Aber in der letzten Zeit verbreiten sich auch so genannte Off-Canvas-Menüs immer mehr. Diese schieben sich vom (meist linken) Seitenrand ins Bild und verdrängen dabei den eigentlichen Seiteninhalt, statt sich darüber zu legen. Die untersuchte Seite Huk24.de setzt dieses Menüverhalten ein. Sorgt eine dieser Darstellungsformen für Verwirrung bei den Nutzern oder wird bevorzugt?

Den Probanden in unserer Studie war die Art derEinblendung des Menüs egal – sie zeigten weder eine Präferenz, noch kam es zu Verwirrung durch eine der beiden Arten. Die Wahl kann also frei getroffen werden, etwa aus ästhetischen und inhaltlichen Gründen. Zu beachten ist jedoch: Egal ob Off-Canvas oder Dropdown, ein Teil des Seiteninhaltes sollte immer sichtbar bleiben. Ansonsten halten die Nutzer das Menü für eine komplett neue Seite und verwenden die Browser-Back-Funktion, um das Menü zu schließen – so häufiger passiert auf Obi.de und VisitEngland.de. Häufig geraten die Nutzer auf eine ganz andere Seite und sind extrem verwirrt. Ein Usability- und Conversion-GAU!

Guidelines für die Einblendung des Menüs:

• Ob Dropdown oder Off-Canvas ist aus Usability-Sicht egal und beide Varianten sind für die Nutzer verständlich.
• Der Seiteninhalt sollte immer zum Teil sichtbar bleiben, um die Nutzer nicht zum Browser-Back zu verleiten.
• Alternative: Browser-Back zum Schließen des Menüs durch das manuelle Setzen von Browser-History-Einträgen unterstützen.

3. Wie gehe ich mit weiteren Navigationsebenen um?

Alle getesteten Menüs erstreckten sich über mehrere Ebenen. Dieser direkte Zugriff auf tieferliegende Seiten ohne mehrfachen Page-Reload wurde von den Probanden klar begrüßt. In der genauen Umsetzung der Navigation zeigten sich jedoch teilweise Probleme. Der Unterschied zwischen Seiten, die noch Unterseiten besitzen und solchen, die direkt geöffnet werden, konnte durch Icons den Probanden deutlich gemacht werden. Sowohl Pfeile als auch Pluszeichen wurden problemlos verstanden – der entscheidende Faktor war der deutlich sichtbare Unterschied zwischen Icon und keinem Icon.

Eine interessante Frage ist ebenfalls, wie eine Seite aufgerufen werden kann, die auch noch Unterseiten besitzt. Die am besten funktionierende Lösung war eindeutig die auf Tagesschau.de genutzte: Hier findet sich in jedem Untermenü als erster Link der Zugriff auf die Oberseite, bezeichnet etwa als „Startseite Inland“. Je nach Seiteninhalten können auch Bezeichnungen wie „Alle anzeigen“ oder „Übersicht“ Sinn machen. Zu großen Problemen dagegen führte die auf VisitEngland.de gewählte Variante: Hier klappt nur das Drücken des Icons das Untermenü auf, während das Drücken des Textes auf die Oberseite wechselt. Diese Unterscheidung war den Probanden in keiner Weise verständlich – sie erwarteten den gleichen Effekt, egal wo genau sie drücken.

Guidelines für weitere Navigationsebenen:

• Den Nutzern sollten auf jeden Fall auch weitere Ebenen der Informationsarchitektur angeboten werden.
• Aufklappende Unterseiten sollten durch ein Icon, etwa einen Pfeil oder ein Plus-Zeichen, gekennzeichnet werden.
• Im Untermenü sollte der erste Menüpunkt zur Oberseite führen, verständlich bezeichnet etwa mit „Startseite Inland“.

Die gesamte Studie mit 22 Guidelines zum Download

Auf Basis der Grundlagenstudie wurden insgesamt 22 Guidelines für die Unterstützung von Navigation und Orientierung auf mobilen Websites entwickelt. Diese Guidelines findet ihr gesammelt im Forschungsbeitrag und noch ausführlicher im dort verlinkten, vollständigen Studienband.