• Facebook
  • Google+
  • Twitter
  • XING
15.11.2015

Grundlegende Muster für die mobile Navigation: eine Einführung

Die mobile Navigation muss auffindbar und erreichbar sein und sollte wenig Platz am Bildschirm beanspruchen. Die Navigation anzuzeigen oder sie in einem Hamburger-Menü zu verbergen, hat Vor- und Nachteile und verschiedene Arten von Websites haben unterschiedliche Lösungen für das Dilemma der mobilen Navigation gefunden.

© Antonioguillem

 

by Raluda Rubiu (deutsche Übersetzung) - 15.11.2015

 

Die Navigation ergänzt die Suche aus mehreren Gründen:

  • Manchmal wissen Nutzer nicht, wonach sie suchen sollen, und benötigen Hilfe, um die Einteilung des Suchraums zu verstehen.
  • Die Formulierung einer guten Suchanfrage und ihre Eingabe setzen eine grössere mentale Anstrengung und höhere Interaktionskosten voraus, als einen Link in der Navigation zu erkennen und darauf zu tippen (ausserdem sind Nutzer bekanntermassen schlecht darin, gute Suchanfragen zu formulieren).
  • Die Suche der Website funktioniert oft wesentlich schlechter, als es sich Suchmaschinen-Nutzer erwarten.

Auf mobilen Geräten haben allerdings sowohl die Navigation als auch die Suche ihren Preis: sie beanspruchen Platz am Bildschirm und lenken die Aufmerksamkeit des Nutzers auf sich – beide Faktoren haben auf mobilen Geräten gravierendere Auswirkungen als am Desktop. Falls der Platz am Bildschirm sehr knapp ist, kann ein Suchfeld oder ein Navigationslink im oberen Bereich der Website den Nutzer daran hindern, schnell neue Informationen zu finden. Ausserdem könnte es sein, dass der Nutzer dadurch mehr Leistung erbringen muss.

Achten Sie auf Navigation und Suche, machen Sie sie erreichbar und auffindbar, vergessen Sie aber nicht eine der Grundlagen der mobilen Usability: Inhalte sollten mit einer höheren Priorität versehen werden, als der Chrome. Das ist eine der grössten Herausforderungen der Implementierung der Navigation auf mobilen Geräten: wie verleiht man dem Inhalt höchste Priorität, während die Navigation erreichbar und auffindbar bleibt? Verschiedene Vorgehensweisen opfern entweder die Priorisierung von Inhalten oder die Erreichbarkeit der Navigation.

Die Navigationsleiste und die Tableiste

Obere Navigationsleiste

Die obere Navigationsleiste wurde im Prinzip aus dem Desktop-Design übernommen. Es handelt sich einfach um eine Leiste im oberen Bereich des Bildschirms, die die wichtigsten Navigationsoptionen enthält. Sie ist relativ effizient, hat allerdings zwei Nachteile: (1) sie funktioniert nur dann gut, wenn es relativ wenige Navigationsoptionen gibt, (2) sie nimmt wertvollen Platz über dem Falz in Anspruch.

Die Websites von BBC (links) und Google Play für Android (rechts) verwenden eine obere Navigationsleiste als Hauptnavigation. Google Play inkludiert mehr Objekte in die Navigation, indem es ein Karussell verwendet.

Die Tableiste

Die Tableiste ist ein enger Verwandter der oberen Navigationsleiste, der nur in Apps verwendet wird. Sie kann oben (vor allem Android) oder unten (vor allem iOS) auf der Webseite erscheinen. Normalerweise ist die Tableiste auf den meisten Unterseiten der App vorhanden und weist dieselben Nachteile auf, wie die Navigationsleiste. Ein wichtiger Unterschied zwischen Tableisten und Navigationsleisten ist, dass Tableisten permanent angezeigt werden, was bedeutet, dass sie immer am Bildschirm zu sehen sind – egal, ob der Nutzer nach unten scrollt oder nicht. Navigationsleisten sind normalerweise nur im oberen Bereich der Seite zu sehen und verschwinden, sobald der Nutzer nach unten scrollt. (Eine Sticky-Version der Navigationsleiste wird im oberen Bereich des Bildschirms fixiert oder erscheint – falls der Nutzer nach oben scrollt – immer ganz oben auf der Seite.)

Facebook für iPhone (links) und Android (rechts) verwenden eine Tableiste für die wichtigsten Navigationsoptionen. Die Tabs wurde in Übereinstimmung mit den offiziellen Richtlinien für Betriebssysteme positioniert: im unteren Bereich des iPhones und im oberen Bereich der Seite in Android. Beachten Sie, dass die Symbole im linken Screenshot beschriftet sind, was in den meisten Fällen eine empfohlene Vorgehensweise ist.

Tableisten und Navigationsleisten eignen sich gut für Websites mit relativ wenigen Navigationsoptionen. Falls Ihre Website über mehr als 5 Optionen verfügt, ist es schwierig, sie in einer Tab- oder Navigationsleiste unterzubringen und dabei die optimale Grösse der Touch-Ziele beizubehalten. Lösungen, wie die Verwendung einer Karussell-Navigationsleiste oder Tableiste, wie im Google Play Beispiel am Anfang dieses Artikels, können zwar funktionieren, sind allerdings nicht immer angemessen. Aus dem Auge aus dem Sinn – und falls die Kategorien sehr unterschiedlich sind (wie im Falle einer älteren Version der Weather Channel App, die unten zu sehen ist), denken Nutzer wahrscheinlich gar nicht daran, zu scrollen, um weitere Optionen zu sehen. Grund dafür ist der schwache Information Scent der sichtbaren Kategorien, wodurch die Nutzer nicht erraten, welche Symbole verborgen sein könnten.

Eine ältere Version von Weather Channel für Android verfügte über eine Karussell-Tableiste im unteren Bereich des Bildschirms. Die Kategorien im Karussell waren weder ähnlich noch vorhersehbar, weshalb jene, die nicht zu sehen waren, eine schlechte Auffindbarkeit aufwiesen.

Falls Sie sich dafür entscheiden, eine Navigations- oder Tableiste zu verwenden, sollte sich diese im Haupt-Chromebereich des Bildschirms befinden. Ausserdem sollte nur wenig Platz in andere Utility-Navigationsoptionen oder ein Suchfeld investiert werden. Falls die Seite über 4-5 Hauptnavigationsoptionen verfügt, macht es Sinn, sie immer alle am Bildschirm anzuzeigen – vor allem wenn diese Optionen mit grosser Wahrscheinlichkeit benötigt werden. Bedenken Sie allerdings, dass die Navigation im Kontext des gesamten Chrome auf einer Seite beurteilt werden muss: auch wenn eine Seite über wenige hochrangige Kategorien verfügt, kann das Chrome zu viel Platz verschwenden, falls andere Utility-Navigationslinks (z.B. Warenkorb, Kontoinformationen) und eine Suche inkludiert werden müssen.

Autozone.com: Obwohl die Seite nur über 4 Hauptnavigationskategorien verfügt (Shop, Repair Help, Deals und Find Store) gibt es viele weitere Chrome-Elemente (Logo, Warenkorb, My Zone Link, Suchfeld), die zu viel Platz in Anspruch nehmen.

Das Hamburger-Menü (und Varianten)

Das Navigationsmenü ist ein Menü, das die Detailinformationen der Hauptnavigationsoptionen verbirgt, sie aber auf Anfrage sichtbar macht. Obwohl das Hamburger-Icon wahrscheinlich der meistdiskutierte Signifier des Navigationsmenüs ist, können für die Navigation auch andere Bezeichnungen und/oder Symbole verwendet werden. (Forschung von Dritten scheint sogar darauf hinzudeuten, dass das Wort Menü bei Benutzern etwas beliebter als das Hamburger-Symbol ist.) Der Hauptvorteil des Navigationsmenüs ist, dass auf kleinstem Raum Platz für eine relativ grosse Anzahl von Navigationsoptionen zur Verfügung steht. Ausserdem werden, falls nötig, auch Untermenüs unterstützt. Der Nachteil ist, dass es weniger gut auffindbar ist, da das alte Sprichwort „aus dem Auge aus dem Sinn“ gilt.

Ein Hamburger-Menü wird für die globalen Navigationsoptionen auf USAToday.com verwendet.

Eine Version des Navigationsmenüs verwendet gar keinen Signifier für das Menü – es wird stattdessen mit Hilfe einer Geste aufgerufen. In der Sephora App kann das Menü auf untergeordneten Seiten geöffnet werden, indem horizontal zum linken Rand gewischt wird (eine Geste, die in iOS problematisch ist, da Apple das horizontale Wischen seit iOS 7 als Zurück-Funktion verwendet).

Sephora für iPhone: Es gibt keinen sichtbaren Menü-Button. Das Menü wird durch ein horizontales Wischen zum linken Rand geöffnet. Die meisten Nutzer entdecken diese Funktion nie und beschränken sich darauf, die sichtbaren Optionen zu verwenden.

Das Navigationsmenü macht die Navigationsoptionen am schwierigsten auffindbar und eignet sich daher am besten für inhaltskonzentrierte Websites und Apps, in denen gestöbert wird.

Falls sich Nutzer nur selten Gedanken darüber machen, wie sie zu bestimmten Abschnitten der Webseite gelangen können, und sich damit zufriedengeben, die präsentierten Informationen zu lesen (was häufig auf NachrichtenWebsites der Fall ist), ist ein Navigationsmenü angemessen. Das Navigationsmenü hat auch den Vorteil, dass es dem Inhalt – dem Star der meisten Webseiten, auf denen gestöbert wird – nur sehr wenig Platz nimmt.

Falls die Navigation hinter einem Menü verborgen wird, sollten Sie bedenken, dass Nutzer – selbst wenn das Menü auffällig genug ist – die Entscheidung treffen müssen, es zu öffnen und zu kontrollieren, ob die Navigationsoptionen relevant sind. Obwohl das Navigationsmenü zum Standard wurde und es viele mobile Nutzer kennen, denken Menschen häufig einfach nicht daran, es zu öffnen. Sogar Benutzer, die das Navigationsmenü bereits während einer Sitzung ausprobiert hatten, könnten später nicht mehr daran denken.

Falls Sie sich dafür entscheiden, ein Navigationsmenü zu verwenden, sollten Sie ernsthaft darüber nachdenken, die Navigation auf andere Weise zu unterstützen und die Struktur der Informationsarchitektur Ihrer Webseite leicht erkennbar zu machen, indem die Anzahl der Links zwischen den verschiedenen Bereichen erhöht wird.

Der Navigationshub

Der Navigationshub ist eine Seite (normalerweise die Startseite), die alle Navigationsoptionen enthält. Um an einen neuen Ort zu gelangen, müssen Nutzer zuerst zum Hub zurückkehren und dann eine der gelisteten Optionen anklicken. Bei diesem Navigationszugang wird die Startseite normalerweise ausschliesslich der Navigation gewidmet (auf Kosten des Inhalts), ausserdem wird bei jeder Nutzung der Navigation ein zusätzlicher Schritt (die Rückkehr zum Hub) vorausgesetzt. Er kann für aufgabenbasierte Websites und Apps gut funktionieren, vor allem, wenn Nutzer während einer Sitzung normalerweise nur einen Zweig der Navigationshierarchie verwenden.

Mit der Startseite als Navigationshub, wird wichtiger Platz für Chrome verschwendet und die gesamte Navigation findet über die Startseite statt. Obwohl diese beiden Argumente gravierende Nachteile zu sein scheinen (und das sind sie für die meisten Websites oder Apps auch), können sie auf Websites und Apps, die nicht zum Surfen bzw. dem Konsum von Inhalten, sondern zur Erledigung einer sehr spezifischen Aufgabe (zum Beispiel den Check-in für einen Flug oder die Änderung der Einstellungen des Smartphones) verwendet werden, weniger problematisch sein. Solche Websites und Apps können das Startseite-als-Navigationshub Muster verwenden – vor allem, wenn Nutzer während einer einzelnen Sitzung normalerweise nur eine Aufgabe erledigen und daher die Navigation selten verwenden (eine Handlung, die relativ schwierig und nervtötend ist, da die gesamte Navigation über die Startseite stattfinden muss).

United verwendet die Startseite als Navigationshub. Auf Unterseiten müssen Nutzer den vorhandenen Home Button verwenden, um zur Startseite zurückzukehren, falls Sie eine andere Navigationsoption auswählen möchten.

Im oben stehenden United-Beispiel, möchten Sie wahrscheinlich entweder ein Flugticket kaufen oder für einen Flug einchecken – aber nicht beides gleichzeitig. Daher müssen die meisten Nutzer in diesem Beispiel nicht zum Hub zurückkehren, was bedeutet, dass er ein effizienter Verteilungspunkt ist.

Schlussfolgerung

Die Navigation auffallen zu lassen und erreichbar zu machen, ist auf mobilen Geräten eine Herausforderung. Das liegt einerseits am kleinen Bildschirm und andererseits an der Notwendigkeit, Inhalte mit einer höheren Priorität zu versehen, als Elemente der Benutzeroberfläche. Verschiedene grundlegende Navigationsmuster versuchen diese Herausforderung auf unterschiedliche Weise zu lösen, wobei bei allen eine Vielzahl von Usability-Problemen auftreten. Der Schlüssel ist es daher, eine Art der mobilen Navigation zu wählen, deren (unvermeidbare) Nachteile Ihren Benutzern bei den Aufgaben, die sie mit grösster Wahrscheinlichkeit auf Ihrer Seite durchführen, am wenigsten schaden:

  • Hamburger-Menüs bieten Platz für eine grosse Anzahl von Optionen, diese Optionen sind aber weniger leicht auffindbar. Sie eignen sich besonders gut für Seiten, auf denen gestöbert wird.
  • Navigationsleisten und Tableisten nehmen Platz auf der Seite in Anspruch und funktionieren gut, wenn die Anzahl der Navigationsoptionen gering ist.
  • Seiten, die hauptsächlich aufgabenorientiert sind, können ein Startseite-als-Navigationshub Muster verwenden.

© Deutsche Version. Institut für Software-Ergonomie und Usability AG. Alle Rechte vorbehalten.

Kommentare auf diesen Beitrag

    Keine Kommentare

Kommentar hinzufügen

Die mit * gekenzeichneten Felder sind zwingend auszufüllen