Mobile Web Navigation – Navigieren und Orientieren auf dem Smartphone

#

Das mobile Web stellt viele Nutzer noch vor Herausforderungen: 52 % machten mindestens in einer Branche bei ihrem letzten Besuch negative Erfahrungen. Die wichtigsten Gründe dafür sind, dass die Websites als unübersichtlich (57,9 %) und nicht benutzerfreundlich (36,4 %) wahrgenommen werden (Quelle: BVDW 2013). Dabei ist die Navigation immer ein zentraler Faktor für die Benutzerfreundlichkeit. Für Desktop-Websites gibt es daher bereits viele Guidelines und Best Practices für die Gestaltung der Navigation und die Unterstützung der Orientierung der Nutzer.

Gerade auf Smartphones gestaltet sich die Navigation jedoch besonders schwierig – durch den begrenzten Platz können die Prinzipien und Lösungen von Desktop-Websites nicht einfach übertragen werden. Seit einiger Zeit setzen sich bestimmte Ansätze aber auch im mobilen Web immer stärker durch. Anlässlich dieser Entwicklungen wurde im März 2014 eine Grundlagenstudie durchgeführt.

Grundlagenstudie zu Navigation und Orientierung auf Smartphones

Ziel der Studie war es, Stärken und Schwächen aktuell verbreiteter Navigationslösungen für mobile Websites zu identifizieren und darauf basierend Richtlinien für die Gestaltung zu entwickeln. Unter anderen wurden folgende Aspekte betrachtet:

  • Der Aufruf der Navigation
  • Die Darstellung der Menüpunkte
  • Die Handhabung von Unterebenen
  • Zusätzliche Navigationseinstiege
  • Der Zugriff auf die Suchfunktion
  • Orientierungshilfen für die Nutzer

Die Erhebung fand im Usability-Labor der eResult GmbH in Hamburg statt. Die 13 Probanden waren zwischen 25 und 54 Jahre alt, besaßen ihr Smartphone bereits länger als ein Jahr und nutzen es zwischen 2 und 10 Stunden pro Woche für den Aufruf von Websites. Jeder Proband besuchte im Test vier unterschiedliche Websites mit dem eigenen Smartphone. Jede Website wurde zunächst frei und dann anhand konkreter Aufgaben genutzt.

#

Die vier untersuchten Websites: tagesschau.de, obi.de, huk24.de und visitengland.de

 

Die Websites wurden so ausgewählt, dass sie möglichst viele unterschiedliche Navigationsansätze abdecken. Die Wahl fiel dabei auf:

 

#

Zentrale Unterschiede der untersuchten Websites

 

Von den individuellen Stärken und Schwächen der Websites wurden insgesamt 22 Guidelines abgeleitet, die im Folgenden aufgelistet und erläutert werden.

 

Aufruf der Hauptnavigation – Guidelines

  1. Zugang im oberen Bereich der Seite positionieren:
    Damit die Hauptnavigation von den Nutzern schnell aufgefunden werden kann, sollten Sie die Schaltfläche im sofort sichtbaren, oberen Bereich der Seite platzieren.
  2. Schaltfläche visuell vom Rest der Seite abgrenzen:
    Die Schaltfläche zum Aufruf der Hauptnavigation müssen Sie mit genügend Abstand von anderen Elementen und vom Seitenrand versehen und visuell von umliegenden Elementen unterscheiden. Nur so begreifen die Nutzer sie als interaktives Element, das klickbar ist.
  3. Funktion eindeutigem Begriff erklären:
    Verlassen Sie sich nicht auf ein Symbol für das Hauptmenü, sondern verwenden Sie zumindest ergänzend Text (z. B. „Menü“), um für wirklich alle Nutzer die Funktion verständlich zu machen. Einzige Ausnahme: Sie haben eine spezielle Zielgruppe, die das Symbol sicher kennt.
  4. Schließen durch erneutes Drücken oder Wischen:
    Ermöglichen Sie den Nutzern in jedem Fall, die Navigation durch erneutes Betätigen der Schaltfläche wieder zu schließen. Bei einer Off-Canvas-Navigation erwarten sie zudem, dass das Wischen mit dem Finger nach links ebenfalls die Navigation einklappt. Dieses Verhalten sollten Sie somit auch unterstützen.

Funktionsweise der Hauptnavigation – Guidelines

  1. Unterebenen als aufklappende Untermenüs oder Drilldown anbieten:
    Der direkte Zugriff auf Unterseiten ist den Nutzern sehr wichtig, damit sie schnell und ohne den Aufruf von Zwischenseiten zum Ziel gelangen können – bieten Sie diese Möglichkeit also an. Sowohl die Umsetzung als aufklappende Untermenüs als auch als Drilldown werden dabei problemlos von den Nutzern verstanden. Treffen Sie die Entscheidung für eine der beiden Varianten deshalb basierend auf Ihrer Seitenstruktur.
    Für relativ einfache Websites mit einer begrenzten Anzahl von Menüpunkten und Navigationsebenen eignen sich meist aufklappende Untermenüs. Der große Vorteil dabei ist die Wahrung des Kontexts – auch umliegende Seiten der höheren Ebenen bleiben immer sichtbar und ein Wechsel in diese Bereiche ist immer einfach und schnell möglich.
    Das Prinzip der Drilldown-Navigation eignet sich dagegen bei komplexeren Seitenstrukturen. Auch bei steigender Anzahl von Menüpunkten und Navigationsebenen wird diese nicht zu unübersichtlich, da die Oberpunkte ausgeblendet werden.
  2. Im Drilldown Zurück-Button einbinden und Browser-Back ermöglichen:
    Der Wechsel zurück zur vorherigen Navigationsebene muss im Drilldown-Menü über eine Schaltfläche möglich sein, die mit „Zurück“, bestenfalls sogar mit „Zurück zu <oberkategorie>“ beschriftet ist. Auch die Browser-Back-Funktion und damit die entsprechende Hardwaretaste einiger Smartphones muss im Drilldown zur vorherigen Ebene wechseln, anstatt von der aktuellen Seite wegzuführen. Die Nutzer verstehen den Wechsel im Drilldown als Navigationsschritt, den sie per Browser-Back rückgängig machen können. Nur indem Sie dieses Verhalten unterstützen, können Sie vermeiden, dass die Nutzer versehentlich Ihre Seite verlassen.</oberkategorie>
  3. Direkteinstieg in Oberkategorie als eigenen Link anbieten:
    Wenn auch die Seiten der Oberkategorien im Hauptmenü direkt anwählbar sein sollen, dann müssen Sie diese im Untermenü als eigenen Link anbieten. Die Bezeichnung dieses Links wählen Sie kontextuell, etwa „Startseite <bereich>“, „Übersicht“ oder „Alle anzeigen“. So ist diese Funktion für die Nutzer klar verständlich. Unbedingt vermeiden müssen Sie, einen Menüpunkt mit mehreren Funktionen, je nach genauem Klickziel, zu versehen, oder nur eine Überschrift im Drilldown-Menü zu verlinken.</bereich>
  4. Automatisch zu geöffneten Untermenüs scrollen:
    Wenn ein neues Untermenü geöffnet wird, ob aufklappend oder als Drilldown, muss die Ansicht automatisch zu diesem Untermenü scrollen. Nur so können Sie vermeiden, dass die Nutzer durch eine Verschiebung des Menüs das gewünschte Untermenü nicht direkt sehen und verwirrt sind.

Darstellung der Hauptnavigation – Guidelines

  1. Als Off-Canvas oder Dropdown-Menü einblenden:
    Die Einblendung der Hauptnavigation kann entweder als Dropdown oder als Off-Canvas erfolgen, da die Nutzer beide Varianten verstehen. Achten Sie dabei nur darauf, dass ein visueller Zusammenhang zwischen Schaltfläche und Menü besteht – ein Button auf der rechten Seite, der ein Menü links ausfahren lässt, ist nicht erwartungskonform.
  2. Direktlinks durch Symbole von Untermenüs unterscheiden:
    Die Nutzer müssen erkennen können, ob ein Link direkt auf eine neue Seite führt oder sich zunächst ein Untermenü öffnet. Zu diesem Zweck sollten Sie Untermenüs durch ein konsistent über die Seite verwendetes Symbol markieren. Es eignen sich dazu Plus-Zeichen, Pfeile nach rechts oder Pfeile nach unten. Bei einem Drilldown-Menü sollten Sie einen Pfeil nach rechts einsetzen, da dieser auch von vielen Apps für diese Funktionalität verwendet wird.
  3. Aufgeklappte Navigationsebenen deutlich visualisieren:
    Grenzen Sie die verschiedenen Ebenen der Hauptnavigation durch deutliche Farbunterschiede, Einrückungen und typografische Mittel klar voneinander ab. Auch aktuell aufgeklappte Oberpunkte sollten erkennbar sein. Ändern Sie für diese das Symbol entsprechend des vorherigen Zustandes: Plus wird zu Minus, Pfeil nach unten zu Pfeil nach oben etc.
  4. Menüpunkte groß und abgegrenzt darstellen:
    Die Nutzer müssen leicht den richtigen Menüpunkt treffen können und immer wissen, welcher Bereich welchen Link aktiviert. Grenzen Sie deshalb die Menüpunkte deutlich voneinander ab und geben Sie jedem Punkt genug Platz. Beachten Sie dafür die Interface Guidelines der Smartphone-Betriebssysteme, etwa für iPhone, Android und Windows Phone. Im Allgemeinen empfehlen diese mindestens 7x7 mm, besser 9x9 mm, für klickbare Elemente. In Pixelgrößen empfiehlt Apple 44x44 Pixel.
  5. Landscape-Modus berücksichtigen:
    Legen Sie auch auf eine passende Darstellung der Navigation im Landscape-Modus Wert. Die einzelnen Menüpunkte sollten dann nicht zu groß dargestellt werden, damit die Nutzer weiterhin den Überblick behalten können.

Alternative Navigation – Guidelines

  1. Zusätzliche Einstiege gezielt und mit Bedacht anbieten:
    Direkteinstiege auf der Startseite können eine sinnvolle Ergänzung zur Hauptnavigation darstellen. Wählen Sie jedoch sorgfältig aus: Korrekt platziert nehmen Direkteinstiege kostbaren Bildschirmplatz im oberen Bereich der Seite ein – an dieser prominenten Stelle sollten die Nutzer genau die Themen finden, nach denen sie häufig suchen. Dabei gilt: Weniger ist mehr!
  2. Konkurrenz zur Hauptnavigation vermeiden:
    Um Bedienfehler zu vermeiden, sollten Sie bei Gestaltung und Positionierung von Navigationselementen, die sich nicht unmittelbar auf die Inhalte der angezeigten Website beziehen, darauf achten, dass diese nicht in Konflikt mit der Hauptnavigation stehen. Letztere sollte immer das aufmerksamkeitsstärkste Navigationselement darstellen. Es sollte sorgfältig geprüft werden, ob an prominenten Positionen auf solche Elemente zum Zugriff auf externe Inhalte verzichtet werden kann.
  3. Auf Konsistenz mit der Hauptnavigation achten:
    Unterschiedliche Elemente, die zur selben Seite verlinken, sollten Sie auch gleich benennen. Auch auf der Zielseite sollte sich die Überschrift nicht wesentlich von dieser Bezeichnung unterscheiden, damit eine gute Orientierung der Benutzer gewährleistet ist.
  4. Nicht zu viele Alternativen zur Hauptnavigation anbieten:
    Um Navigation und Orientierung übersichtlich und verständlich zu halten, sollten Sie auf den übermäßigen Einsatz unterschiedlicher Navigationselemente verzichten. Dies gilt besonders dann, wenn sich zwei Elemente nur in Details voneinander unterscheiden – in solchen Fällen besteht die Gefahr, dass Nutzer die Unterschiede zwischen den Einstiegen nicht verstehen und dadurch Verunsicherung entsteht.

Orientierungshilfen – Guidelines

  1. Aktuellen Menüpunkt in der Navigation hervorheben:
    Kennzeichnen Sie den aktuellen Standort durch Hervorhebung in der Hauptnavigation, um den Nutzern die Orientierung zu erleichtern. Auf Desktop-Websites gehört dies längst zum Standard und sollte auch in der Smartphone-Ansicht umgesetzt werden.
  2. Klar erkennbare Seitenüberschriften anbieten:
    Der Inhalt der aktuellen Seite muss für die Nutzer direkt erkennbar sein, da sie in wenigen Sekunden entscheiden, ob die Seite relevant ist oder nicht. Aus diesem Grund sollten Sie immer eine deutliche Überschrift über den Seiteninhalten platzieren.
  3. Bei höherer Komplexität Breadcrumb hinzufügen:
    Falls Ihre Seite eine komplexe Struktur mit vielen Ebenen und Unterseiten besitzt, sollten Sie den Nutzern zusätzlich eine Breadcrumb anbieten. Sie kommuniziert eindeutig den aktuellen Standort und ermöglicht den Nutzern so eine problemlose Orientierung. Zusätzlich kann sie auch zur Navigation auf höher gelegenen Ebenen genutzt werden.

Suchfunktion – Guidelines

  1. Suche im direkt sichtbaren Bereich positionieren:
    Die Suchfunktion sollte direkt sichtbar und ohne Scrollen auf der Startseite verfügbar sein, damit sie von Benutzern entsprechend ihren Erwartungen problemlos gefunden werden kann.
  2. Ausklappbare Suchfunktion mit Lupensymbol anzeigen:
    Ein direkt sichtbares Eingabefeld oben auf der Startseite entspricht den Erwartungen der Nutzer am besten. Um etwas Platz zu sparen, können Sie das Eingabefeld aber auch als aufklappbare Variante umsetzen. Damit die Suchfunktion trotzdem zuverlässig aufgefunden wird, ist es wichtig, dass Sie die Schaltfläche deutlich als Suche kennzeichnen – ein einfaches Lupensymbol genügt. Dieses verstehen die Nutzer sofort und sie können die Funktion problemlos finden. Innerhalb des normalen Hauptmenüs sollten Sie das Suchfeld dagegen nicht platzieren.

Der komplette Studienband zum kostenlosen Download

Die vollständige Studie ist kostenlos im Downloadbereich auf eresult.de erhältlich. Sie enthält weitere Informationen zur Methodik und alle Stärken und Schwächen der vier untersuchten Seiten im Detail.

Individuelle Beratung von eResult zum Sonderpreis

Die Ergebnisse dieser Grundlagenstudie geben Ihnen erste Ansatzpunkte zur Verbesserung der mobilen Navigation auf Ihrer Website. Allgemeine Guidelines können jedoch nicht die individuellen Besonderheiten Ihrer Website und Ihrer Nutzer berücksichtigen.

Aus diesem Grund bietet eResult exklusiv zu dieser Studie ein individuelles Beratungsangebot:

  • Ein erfahrener UX Consultant analysiert 2 Stunden lang die Navigation und Orientierung auf Ihrer mobilen Website
  • Im Anschluss wird in einer Videokonferenz über die Ergebnisse berichtet
  • Es werden maßgeschneiderte, konkrete Empfehlungen zur Verbesserung

zum Sonderpreis von nur 390 €

Jetzt Beratung anfordern:

 

 

Sie wollen den Forschungsbeitrag zitieren? Gerne können Sie folgende Quellenangabe nutzen:

Pohlmann, Jan (2014): Mobile Web Navigation – Navigieren und Orientieren auf dem Smartphone, In: Forschungsbeiträge der eResult GmbH, URL: www.eresult.de/ux-wissen/forschungsbeitraege/einzelansicht/news/mobile-web-navigation-navigieren-und-orientieren-auf-dem-smartphone/

 

Sind Sie anderer Meinung?

 

Ihre Rückmeldung zu diesen Überlegungen und Thesen interessiert uns sehr.
Schreiben Sie uns!