Multi-Level Navigation auf Smartphones – Good Practices von Nachrichtenwebsites

Für die Navigation auf komplexen Webseiten werden inzwischen sehr häufig (Mega-)Dropdowns eingesetzt, die den direkten Zugriff auf tiefer liegende Seiten ermöglichen. Die Vorteile für Nutzer sind schnellere Navigationswege und ein besseres Verständnis des Kontexts. Gleichzeitig gibt es heute auch kaum einen Relaunch, der ohne eine optimierte Darstellung für Smartphones auskommt. Besonders Mega-Dropdowns aber sind auf solch kleinen Bildschirmen nicht umsetzbar. Wie also sollte die Navigation über mehrere Ebenen in der mobilen Darstellung funktionieren? Anhand von Nachrichtenwebsites stelle ich Ihnen im Folgenden verschiedene Varianten vor, die sich jeweils für unterschiedliche Fälle eignen. Sie sind geordnet von der geringsten Komplexität der Seitenstruktur zur höchsten.

Variante 1: Alle Möglichkeiten sofort zeigen


Abb. 1: Metro bietet sofort auch die zweite Ebene an, abgegrenzt durch die typographische Gestaltung

Abb. 1: Metro bietet sofort auch die zweite Ebene an, abgegrenzt durch die typographische Gestaltung


Am einfachsten ist es, alle Navigationsoptionen direkt im Menü anzuzeigen. Es können auch Links über mehrere Ebenen gezeigt werden, so lange die Anzahl relativ begrenzt ist. Die Seite von Metro etwa zeigt, wie die zwei Ebenen durch unterschiedliche Schriftgestaltung unterscheidbar bleiben (siehe Abb. 1). Durch die fehlende Ausrichtung aller Links an einer Linie leidet jedoch die Scanbarkeit für die Nutzer. Die Links liegen zudem sehr nah beieinander, was das Treffen des gewünschten Punktes mit dem Finger erschwert.

Die Lösung, alle Optionen direkt anzuzeigen, eignet sich nur bei Seiten mit wenig komplexer Informationsarchitektur. Es können maximal 2 Ebenen angezeigt werden, und auch diese meist nur mit Kompromissen und wenigen Unterpunkten. Die Seite sollte also entweder nur so wenige Ebenen umfassen oder die weiteren müssen von mobilen Nutzern definitiv nicht direkt ansteuerbar sein.

Variante 2: Auf Abruf die komplette zweite Ebene einblenden


Abb. 2: Zeit Online zeigt zunächst nur die Ressorts der ersten Ebene, erlaubt jedoch die Anzeige aller Unterressorts

Abb. 2: Zeit Online zeigt zunächst nur die Ressorts der ersten Ebene, erlaubt jedoch die Anzeige aller Unterressorts


Eine weitere Möglichkeit ist es, zunächst nur die Navigationspunkte der ersten Ebene zu zeigen, wie dies etwa Zeit Online macht (siehe Abb. 2). Per Klick auf „Alle Ressorts“ können jedoch alle Unterpunkte auf einmal eingeblendet werden. So wird die Komplexität auf den ersten Blick reduziert und nur bei Bedarf angeboten.


Abb. 3: HuffPost bietet die Optionen der zweiten Ebene ebenfalls auf Abruf an

Abb. 3: HuffPost bietet die Optionen der zweiten Ebene ebenfalls auf Abruf an


Auch HuffPost nutzt diese Variante (siehe Abb. 3). Die Darstellung verändert sich bei Klick auf „All Sections“ noch etwas stärker, folgt aber dem selben Prinzip.

Der Einsatz dieser Variante eignet sich besonders, wenn die erste Ebene klar wichtiger und stärker frequentiert ist als die darunter liegenden. Zudem dürfen die zweiten Ebenen nicht übermäßig komplex sein, da sie alle gleichzeitig eingeblendet werden und dies schnell unübersichtlich wird.

Variante 3: Weitere Ebenen einzeln für jeden Hauptpunkt einblenden


Abb. 4: Bei Forbes klappten die Unterpunkte beim Klick auf einen Oberpunkt aus

Abb. 4: Bei Forbes klappten die Unterpunkte beim Klick auf einen Oberpunkt aus


Häufig eingesetzt wird diese dritte Variante, so auch von Forbes (siehe Abb. 4). Es wird zunächst die erste Ebene angezeigt und alle Punkte mit einer Unterebene werden gekennzeichnet, in diesem Fall durch einen nach unten zeigenden Pfeil. Klicken auf einen dieser Links öffnet dann nicht die entsprechende Seite der ersten Ebene, sondern blendet die darunter liegenden Optionen der zweiten Ebene ein. Häufig wird dies. wie bei Forbes. durch Ausklappen erreicht.


Abb. 5: Die San Antonio Express News stellen ebenfalls die Unterpunkte bei Klick dar, jedoch neben der ersten Ebene

Abb. 5: Die San Antonio Express News stellen ebenfalls die Unterpunkte bei Klick dar, jedoch neben der ersten Ebene


San Antonio Express News verwendet ebenfalls diese Variante, jedoch in einer etwas anderen Darstellungsweise (siehe Abb. 5). Anstatt die Unterpunkte aufzuklappen werden diese rechts von der ersten Ebene angezeigt.


Abb. 6: Bei der Tagesschau erlaubt der Punkt „Startseite Inland“ den Zugriff auf die erste Ebene

Abb. 6: Bei der Tagesschau erlaubt der Punkt „Startseite Inland“ den Zugriff auf die erste Ebene


Unabhängig von der Darstellungsweise der Unterebene stellt sich bei dieser Variante aber eine Herausforderung: Die Nutzer können nicht ohne weiteres die Seiten der ersten Ebene ansteuern, sondern nur Seiten ohne weitere Unterpunkte. Die Tagesschau zeigt eine mögliche Lösung: Ein zusätzlicher Link, hier genannt „Startseite Inland“, der zur Seite der ersten Ebene führt (siehe Abb. 6).


Abb. 7: Bei Aftonbladet können sowohl die Oberpunkte gewählt werden als auch über „Mehr“ die Unterpunkte aufgeklappt werden

Abb. 7: Bei Aftonbladet können sowohl die Oberpunkte gewählt werden als auch über „Mehr“ die Unterpunkte aufgeklappt werden


Aftonbladet verwendet eine andere Lösung für dieses Problem (siehe Abb. 7). Für Seiten mit Unterseiten gibt es zwei unterschiedliche klickbare Bereiche: Den Seitennamen selber, der direkt zur entsprechenden Seite führt, und einen Button „Mehr“, der die Unterseiten aufklappt. So werden auch hier dem Nutzer beide Optionen geboten – der Zugriff auf Oberkategorien und auf Unterseiten. Aftonbladet zeigt zudem, dass eine solche Navigation auch über mehr als zwei Ebenen angewendet werden kann. Die gewählte Darstellung finde ich jedoch nicht optimal, da die unterschiedlichen Ebenen kaum zu unterscheiden sind und so schnell Verwirrung bei den Nutzern aufkommt.

Generell lässt sich sagen, dass diese Variante zu Recht häufig verwendet wird. Sie bietet eine hohe Flexibilität und kann auch für komplexere Strukturen eingesetzt werden. Als Lösung für das Anwählen der Oberkategorien halte ich das Einfügen von separaten Links („Startseite Inland“) für geeigneter, da dies für die Nutzer leichter verständlich ist und Fehlbedienungen vermieden werden können.

Variante 4: Drilldown in einzelne Bereiche


Abb. 8: Bleacherreport zeigt per Drilldown-Menü immer nur eine Ebene gleichzeitig

Abb. 8: Bleacherreport zeigt per Drilldown-Menü immer nur eine Ebene gleichzeitig


Bei vielen Seiten pro Ebene, und auch wenn mehr als zwei Ebenen angezeigt werden, wird das Navigationsmenü durch Aufklappen von Unterseiten jedoch schnell sehr lang und der Überblick geht verloren. Abhilfe dafür bietet der Einsatz eines Drilldowns, wie es etwa von Bleacherreport verwendet wird (siehe Abb. 8). Anstatt die erste Ebene weiterhin anzuzeigen, wenn auf eine Kategorie geklickt wurde, wird diese hier komplett ausgeblendet. Nur die Punkte der nächsten Ebene werden noch angezeigt. Zusätzlich gibt es ganz oben einen Button, um eine Ebene zurück zu springen.

Diese Variante eignet sich, wenn die gleichzeitige Darstellung mehrerer Ebenen zu viel würde. Zu tief darf die Navigation jedoch auch nicht werden – sonst verlieren sich die Nutzer schnell in den Untermenüs.

Variante 5: Seitenwechsel und neue Menüs für weitere Ebenen


Abb. 9: Die Seite des Boston Globe teilt die Navigation auf mehrere Menüs auf

Abb. 9: Die Seite des Boston Globe teilt die Navigation auf mehrere Menüs auf


Anstatt die Navigation über mehrere Ebenen in einem einzigen Menü zu vereinen, können die verschiedenen Ebenen auch aufgeteilt werden. Ein Beispiel dafür ist die Seite des Boston Globe, bekannt als Klassiker des Responsive Designs (siehe Abb. 9). Das erste Menü „Sections“ bietet die erste Ebene an und wechselt bei Klick direkt auf die entsprechende Kategorieseite. Auf dieser lässt sich dann ein weiteres Dropdown öffnen, welches die Unterkategorien anbietet. Diese schrittweise Navigation vermeidet zwar, dass die Nutzer sich verirren, dauert jedoch auch recht lange und erzeugt zusätzliche Seitenaufrufe, die gerade bei mobilen Verbindungen stören. Zudem ist das Menü für die Unterkategorien hier oberhalb des Hauptmenüs angeordnet – konzeptionell unlogisch und potenziell verwirrend für die Nutzer.


Abb. 10: The Guardian bietet die Unternavigation in einem weiteren Dropdown an

Abb. 10: The Guardian bietet die Unternavigation in einem weiteren Dropdown an


The Guardian teilt die Navigation ebenfalls auf zwei Menüs auf (siehe Abb. 10), wobei die visuelle Hierarchie hier besser umgesetzt ist. Die Oberkategorien sind über ein klassisches Dropdown im Seitenkopf verfügbar. Durch die weiteren Ebenen kann über ein neues Dropdown, welches unter dem Seitenkopf erscheint, navigiert werden. Das Dropdown zeigt immer die aktuelle Seite und alle Unterseiten, erlaubt also nur die Navigation nach unten, nicht zurück nach oben in der Struktur.

Generell empfiehlt sich das Aufsplitten des Menüs, wenn die zu zeigende Seitenstruktur sehr komplex ist und nicht sinnvoll mit einer anderen Variante gelöst werden kann.

Fazit: Jeweils die passende Variante wählen

Bei der Konzeption der Menü-Navigation, gerade der mobilen Darstellung, sollte immer von den Nutzeranforderungen ausgegangen werden:

  • Wie navigieren die Nutzer? Über die Seitenstruktur oder eher kontextuell?
  • Wie wollen sie einsteigen? In Oberkategorien oder tiefer?
  • Wie sehr wechseln sie zwischen Kategorien? Ist hauptsächlich die Navigation nach unten relevant oder auch die rückwärtsgewandte nach oben?

Die geeignete Darstellung der Navigation kommt dann stark auf die Komplexität der Informationsarchitektur an. In Reihenfolge steigender Komplexität gibt es folgende Lösungen:

  1. Alle Möglichkeiten sofort zeigen
  2. Auf Abruf die komplette zweite Ebene einblenden
  3. Weitere Ebenen einzeln für jeden Hauptpunkt einblenden
  4. Drilldown in einzelne Bereiche
  5. Seitenwechsel und neue Menüs für weitere Ebenen

Welche Navigations-Variante finden Sie persönlich am besten? Oder kennen Sie noch weitere? Ich freue mich über Ihre Kommentare.

Haben Sie Interesse an weiteren “Good Practices”? Auch zu anderen Themen und Anwendungen? Mit den eResult Themenjournalen und Trendnewslettern bekommen Sie jeden Monat Inspiration für Ihre eigene Arbeit.

2 Gedanken zu „Multi-Level Navigation auf Smartphones – Good Practices von Nachrichtenwebsites

  1. Chili-Conversion - Heiko

    Im Portrait-Modus werden die hier vorgestellten Multi-Level-Navigationen noch einigermaßen nutzbar sein, im Landscape-Modus allerdings wird die Ux deutlich leiden. Hier insbesondere der Ansatz der Huffington Post wesentlich benutzerfreundlicher realisiert.

    Antworten
  2. Jan Pohlmann Beitragsautor

    Mit meinen Beispielen habe ich mich absichtlich auf den Portrait-Modus beschränkt, sonst wird es noch komplizierter. 🙂

    Generell hält sich die Landscape-Nutzung von Smartphones beim Browsen nach meiner Erfahrung aus Usability-Tests und dem Alltagsleben recht stark in Grenzen. Interessant dazu vielleicht auch folgender Artikel:
    http://www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php
    Zitat: „Also notable is the overwhelming use of devices in their vertical orientation, or portrait mode“

    Trotzdem sollte man natürlich Webseiten und damit auch die Navigation für Landscape-Nutzung optimieren. Die Möglichkeiten für eine Darstellung, die von der Portrait-Variante abweicht, sind durch Mediaqueries definitiv gegeben und sollten genutzt werden.

    Generell sollte man den zusätzlichen horizontalen Platz nutzen und mehrspaltig arbeiten, indem man etwa Unterpunkte rechts einblendet (siehe San Antonio Express News) statt sie auszuklappen. So wird auch der geringere vertikale Platz kompensiert. Gute Beispiele dazu würden mich interessieren – vielleicht auch ein Thema für einen weiteren Blogbeitrag. 🙂

    Antworten

Schreibe einen Kommentar

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