Mobile first in der Navigation Teil 2: Anforderungen an die Entwicklung einer mobilen Menüstruktur

Die mobile Navigation birgt bedeutende Herausforderungen an das Navigationsdesign und die zugrundeliegende Informationsarchitektur mobiler Webseiten. Der begrenzte Platz auf dem mobilen Interface steht der gewünschten Sichtbarkeit von Menüoptionen und der Erreichbarkeit der tieferen Seitenbereiche entgegen. Designpatterns für die Navigation, die sich in diesem Spannungsfeld bewegen und mögliche Lösungen aufzeigen, wurden im ersten Teil dieses Beitrags zusammengetragen. In diesem zweiten Teil soll es darum gehen, welche Anforderungen an die Entwicklung einer Menüstruktur sich aus der mobilen Problemstellung ergeben.

Was fällt in den Bereich Menüstruktur?

Die Menüstruktur ist das rohe Gerüst aus Hauptkategorien und Unterkategorien. Sie verästelt sich bis hinunter zu den direkten Einstiegen in den Inhalt einer Webseite. Man spricht hier auch von einem Tree, also einem Navigationsbaum. Eine Menüstruktur ist zunächst hierarchisch, Zugänge zu Seiteninhalten können jedoch auch an mehreren Stellen des Trees auftauchen.

Veranschaulichung eines hierarchischen Menübaums



Für die Entwicklung einer Menüstruktur spielt das mentale Modell der Nutzer eine zentrale Rolle. Welche Inhaltselemente werden als zusammengehörig verstanden? Wie sollen solche Gruppen benannt werden? Wir bei eresult wenden frühzeitig offenes Cardsorting an, um eine neue Menüstruktur auf einer nutzerzentrierten Basis zu entwickeln.

Relevante Aspekte der Menüstruktur für die mobile Navigation

Die Anzahl der Hauptrubriken ist im mobilen Kontext besonders relevant.

Zunächst ist die Anzahl der Hauptrubriken ein Merkmal der Menüstruktur, das im mobilen Kontext besonders relevant ist.

Genügen für den Einstieg in die Seiteninhalte bis zu fünf Rubriken und eine Menüebene, ist der Weg zur Navigation Bar und damit zu einer guten Sichtbarkeit des Menüs offen. Dies ist jedoch nur sehr selten der Fall.

Dann gibt es die gemischte Variante, bei der die zwei bis drei wichtigsten Hauptrubriken über die Navigation Bar und weitere Hauptkategorien über einen „Mehr“-Button zugänglich sind. Voraussetzung hierfür ist, dass eine Menüebene für den Zugang zu den Seiteninhalten ausreicht. Eine weitere Ebene kann etwa über Landingpages abgebildet werden. Die Anzahl der Hauptrubriken muss so begrenzt sein, dass alle Rubriken im Menü ohne Scrollen erreichbar sind und einen touchbare Größe behalten.

Für Menüs, die über einen Menü-Button erreichbar sind, muss die Anzahl der Hauptrubriken ebenfalls so begrenzt sein, dass alle Menüelemente weitestgehend ohne Scrollen erreichbar sind bei genügender Größe für die Touch-Interaktion.
Ein weiterer relevanter Aspekt der Menüstruktur für die mobile Navigation ist die Anzahl der Navigationsebenen und damit die Tiefe des Menüs.

Varianten der Navigation Bar und Mischformen funktionieren nur mit einer Menüebene. Ein mobiles Burger-Menü sollte nicht mehr als zwei Ebenen haben. Menüs mit mehr Ebenen sind schwer zu bedienen und werden schnell unübersichtlich und verwirrend. Bei beiden Varianten kann eine weitere Ebene auf Landingpages eingerichtet werden.

Auch bei der Breite der einzelnen Ebenen gilt, dass die Anzahl der Rubriken in einer Menüebene nicht zu groß sein darf. Muss der Nutzer im Menü scrollen, so ist dies wenig komfortabel und erhöht die Unübersichtlichkeit des Menüs.

Je weniger Knotenpunkte, desto besser.

Die Einschränkungen sowohl bei der Tiefe des Menüs, als auch bei der Breite von Menüebenen bergen natürlich ein Spannungsfeld, da die Gesamtanzahl an Seitenelementen, die über das Menü erreichbar sein sollen, vorgegeben ist. Ist das Menü flacher, bedeutet das eine größere Breite in den Menüebenen. Wird eher auf eine Begrenzung der Breite gerade bei den Hauptrubriken geachtet, wird das Menü dadurch tiefer. Die Grenzen bei der Breite sollten eher ausgereizt werden, als diejenigen bei der Tiefe. Größere Tiefe bedeutet mehr Knotenpunkte und diese bergen in einer Menüstruktur immer das Risiko von Irrwegen. Je weniger Knotenpunkte es gibt, desto besser.

Auswirkungen auf die Methodik

Der Nutzer steht immer im Zentrum.

Auch bei der Generierung einer für den mobilen Kontext optimierten Menüstruktur steht das mentale Modell des Nutzers natürlich im Zentrum. Unabhängig von den besonderen Anforderungen eines mobilen Menüs ist es die Hauptmotivation herauszufinden, welche Elemente als zusammengehörig verstanden werden und wie diese Gruppen benannt werden. Die Methode der Wahl bei einer Neukonzeption ist hier unverändert ein offenes Cardsorting. Es sollte auch ohne Restriktionen bei der Tiefe und Breite durchgeführt werden, damit sich Probanden auf ihr eigenes Verständnis und ihre eigenen Vorstellungen konzentrieren können.

Bei der Auswertung ergibt sich jedoch einiger Spielraum durch die Streuung der Daten. Das spätere Navigationsdesign sollte sich zwar eher an die Menüstruktur anpassen, als umgekehrt. Die speziellen Anforderungen an die Breite und Tiefe des mobilen Menüs können jedoch in die Generierung von Menüvarianten einfließen.

Gerade wenn in den Menüvarianten mit der Anzahl der Hauptrubriken und Unterkategorien und damit auch mit der Tiefe des Menüs experimentiert wird, ist ein Variantentest über Tree Testing unbedingt zu empfehlen. Bei dieser Methode werden anhand von ausgewählten Menüelementen der untersten Ebene Aufgaben formuliert. Diese Menüelemente sind dann die korrekte Lösung für die Aufgaben. Probanden suchen in der rohen Menüstruktur nach der Lösung für die Aufgaben. Darüber kann anhand vom Sucherfolg, von der Direktheit der Suchpfade und von Abweichungen vom korrekten Pfad die Variante herausgefunden werden, die am besten funktioniert.

Fazit

Bei deutlich steigendem Anteil mobiler Nutzer im Web ist es von großer Bedeutung, auch die Navigation von Webseiten und Online Shops an die mobilen Bedürfnisse anzupassen. Das spätere Navigationsdesign spielt hier noch eine größere Rolle als auf dem Desktop. Den Anforderungen einer möglichst guten Sichtbarkeit von Menüoptionen und der Erreichbarkeit auch von tief verorteten Elemente steht der begrenzte Platz auf dem mobilen Display entgegen. Wir beobachten auf mobilen Webseiten eine häufig verringerte Aktivität auf unteren Seitenbereichen im Vergleich zur Desktop-Variante. Dieses Problem lässt sich nur über eine angepasste Menüstruktur lösen, die Breite und Sichtbarkeit soweit wie möglich, und Tiefe nicht mehr als nötig schafft. Beziehen Sie bei dieser schwierigen Entscheidung Ihre Nutzer frühzeitig ein und schaffen Sie so eine valide Grundlage. Die Herausforderung ist bedeutend.

Wie sind Ihre Erfahrungen im Bereich mobile IA? Fallen Ihnen noch weitere wichtige Aspekte ein, die hier ergänzt werden sollten? Ich freue mich auf Ihre Kommentare.

Portraitfoto: Rita Strebe

Rita Strebe

Senior User Experience Consultant

eresult GmbH

Bisher veröffentlichte Beiträge: 15

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.