Mobile Navigation: Bildraster oder Textlisten?

Für die mobile Navigation sollten Bildraster für die tieferen Level der Informationsarchitektur aufgespart werden, bei denen die visuelle Unterscheidung zwischen Menüpunkten von entscheidender Bedeutung ist, weil sie die Ladezeiten verlängern, längere Seiten schaffen und mehr Scrollen erfordern.

 

by Aurora Bedford (deutsche Übersetzung) - 30.03.2014

 

Ein Teilnehmer unseres Kurses Visuelles Design für mobile Geräte: Tag 1 hat mir eine interessante Frage gestellt: Unterstützen Bilder die Navigation, im Gegensatz zu rein textbasierten Menüs? Obwohl ich Nutzer in vielen "Mobile Design"-Studien dabei beobachtet habe, wie sie durch beide Formen des Designs navigierten (Anmerkung: Mobile und Desktop), habe ich in letzter Zeit diese beiden Design-Pattern für mobile Geräte nicht direkt verglichen. Daher habe ich beschlossen, einen schnellen unmoderierten Remote-Usability-Test (engl.) durchzuführen: Die zu analysierenden Websites wurden identifiziert, die Testszenarien erstellt und 3 Tage später war die gesamte Studie abgeschlossen. Meine Antwort nach all dem? Wie bei so vielen anderen Themen im Webdesign: Es kommt darauf an.

Textmenüs sind effizienter

Mobile Nutzer haben eine begrenzte Geduld für lange Interaktionszeiten, sogar, wenn sie nur browsen, um die Zeit totzuschlagen. Menüelemente, die nur aus Text bestehen, brauchen weniger vertikalen Platz als ein Bild und erlauben gleichzeitig die Anzeige mehrerer Elemente auf dem Bildschirm. Somit können die verfügbaren Optionen mit wenig (oder keinem) Scrollen angesehen werden. Wenn hingegen Bildraster für die Navigation verwendet werden, sehen die Nutzer oftmals nur 4 Rasterelemente gleichzeitig. Das verstösst gegen gängige Menü-Design Richtlinien, die vorschlagen, alle Navigationsoptionen immer sichtbar zu haben, da Erkennen für uns einfacher ist als Erinnern.

Vergleichen Sie auf der mobilen Website von Sports Authority die Seite Men's Footwear mit der von Dick's Sporting Goods: Um alle verfügbaren Unterkategorien zu sehen, müsste ein Nutzer auf der Seite Sports Authority 4 Bildschirmlängen herunterscrollen, bei der von Dick's Sporting Goods nur 1 Bildschirmlänge. Und was noch erschwerend hinzukommt. Alle Nutzer der Studie, die soweit durchhielten, dass sie sich alle (oder die meisten) verfügbaren Unterkategorien ansahen, kamen zu dem Schluss, dass die erste Navigationsoption die wünschenswerteste Option sei. Sie scrollten deshalb zurück zum oberen Teil der Seite, um zum entsprechenden Produktkatalog zu gelangen. D.h. sie mussten aufgrund des Rasterlayouts auf der Seite von Sports Authority insgesamt 8-Scroll-Bewegungen durchführen, bevor Sie einen Produkttyp auswählten.

 

 

Das Bildraster mit Unterkategorien auf der mobilen Website von Sports Authority führt zu einer viel längeren Seite als das Textmenü auf der mobilen Website von Dick's Sporting Goods. Es stimmt zwar, dass Sports Authority eine grössere Anzahl von Optionen bietet, aber sogar nur 12 Kategorien in einem Raster anzuzeigen, für zu einem ganzen dritten vollen Bildschirm führen.

Rein textbasierte Menüs sind ausserdem flexibler als Bildraster, weil kurze Listen mit Unterkategorien in situ erweitert werden können, über ein Akkordeon unter dem Kategorielink, anstatt, dass eine komplette neue Seite geladen werden muss. Ausserdem lädt das Menü selbst schneller, weil keine Bildzugriffe das Laden der Seite verlangsamen.

Textmenüs können durch Akkordeons aufgeklappt werden, was den Nutzern erspart, eine neue Seite laden zu müssen, um die Unterpunkte zu sehen, wie man es hier auf der mobilen Website von Dick's Sporting Goods sieht.

Es stellt sich aber die Frage, ob zusätzliche Seitenladezeiten und mehr Scrollen wirklich Probleme darstellen, wenn die Nutzer ihre gewünschte Option und ihren Weg durch die Informationshierarchie finden? In der Tat, denn das Problem ist, dass Nutzer möglicherweise die optimale Wahl für ihr Ziel verpassen. Wiederholtes Scrollen, um alle verfügbaren Optionen anzuzeigen, ist anstrengend, und die Leute hören oft dann auf, wenn sie ein Element sehen, das aussieht, als wäre es nahe genug an dem dran, was sie wollen. Das ist das Risiko aller flachen und breiten Hierarchien, weil lange Listen mit vielen Möglichkeiten (engl.) die Nutzer überfordern können. Bilder zu einer auch nur mittellangen Liste mit Optionen hinzuzufügen, führt schnell zu einer längeren Seite und steigert dadurch dieses Risiko.

Bei unserem Test der mobilen Website von West Elm scrollte eine Nutzerin in der Kategorieseite Möbel nur soweit runter, dass sie die zweite Zeile der verfügbaren Optionen gesehen hat, bevor Sie Ihre Auswahl traf. In diesem Fall suchte sie nach einer Couch und beendete das Scrollen bei der ersten Kategorie, die nichts mehr mit diesem Ziel zu tun zu haben schien. Hätte sie die 12 Bildschirmlängen lange Seite aber weiter durchgesehen, hätte sie noch mehrere Optionen für Sitzmöbel gefunden sowie die Unterkategorie Ausverkauf, von der sie später angab, dass sie sie gerne gesehen hätte.

Mobile Website von West Elm: Nur 4 von 42 Navigationsoptionen, die auf der Kategorieseite Möbel verfügbar sind, wurden angesehen, bevor die Nutzerin ihre Auswahl traf.

Die Probleme rund um das Scrollen und die damit verbundene Anzahl sichtbarer Optionen machen sich auf Desktops nicht so stark bemerkbar wie auf mobilen Geräten, weil die grösseren Bildschirme erlauben, mehr Optionen gleichzeitig zu zeigen, so dass die Nutzer leichter alle verfügbaren Angebote vergleichen können. Auf dem Desktop Informationen zur Kategorien nur mit Textlinks anzuzeigen, wäre eine Verschwendung des zur Verfügung stehenden Platzes, und kann auch wieder überfordernd wirken, wenn es zu viele Textlinks sind. Aus diesem Grund befürwortet unser Bericht Homepages und Kategorieseiten im E-Commerce die Verwendung von Bildern auf Produktlisten- und Kategorieseiten.

Bilder können den Nutzern bei der Unterscheidung helfen

Bilder in einem Raster im Rahmen der Kategorienavigation zu zeigen, bietet nicht nur grössere Zielflächen beim Antippen auf Touch Screens, sondern kann den Nutzern auch in den Fällen bei der Auswahl unterstützen, in denen Textbezeichnungen nicht vertraut oder die Unterschiede zwischen den Optionen nicht klar sind. Die mobile Website von West Elm zum Beispiel zeigt Bilder für die verschiedenen Unterkategorien von Bettdecken - Alle Bettdecken, Bettüberwürfe, Quilts + Tagessdecken, Laken-Sets usw. Hier ermöglichen die Bilder, die verfügbaren Produkttypen zu verstehen und eine besser informierte Entscheidung zu treffen.

Was ist der Unterschied zwischen einem "Bettüberwurf" und einer "Tagesdecke"? Wenn Sie nicht sicher sind, können Ihnen die Bilder dabei helfen, diese Navigationskategorien zu unterscheiden.

Sogar in den Fällen, in denen sich Kategorien sehr deutlich unterscheiden, ermöglichen Bildern komplett aufs Lesen zu verzichten (engl.). Und genau das werden einige Nutzer mögen. Einer von Ihnen sagte: "Ich bevorzuge Bildmenüs, weil ich dann nicht viel lesen muss, aber ich habe nichts gegen Textmenüs, wenn der Text gross, fett und leicht zu lesen ist." Wenn Sie nur wenige, visuell unterschiedliche Kategorien darstellen müssen, kann ein Raster mit antippbaren (und beschrifteten) Bildern das Design sein, das für die Leute am einfachsten und schnellsten zu benutzen ist.

Natürlich müssen diese Bilder hilfreiche Details enthalten und in einer ausreichenden Grösse präsentiert werden, um erkennbar zu sein. Deswegen funktionieren in einem Raster mit 2 Spalten auf mobilen Geräten gut, während Bilder, die als winzige Thumbnails in einem Listenlayout dargestellt werden, nicht funktionieren.

Mobile Website von Lowes: Die Bilder, die auf der Liste der Kategorien Geräte verwendet werden, sind zu klein, um für die Nutzer hilfreich sein, und werden wahrscheinlich völlig ausser acht gelassen. In dieser Grösse sorgen sie einfach nur für schwere Seiten, eine Verlangsamung der Ladezeit und erfordern mehr Speicherplatz. Die meisten Leute kennen den Unterschied zwischen einem Geschirrspüler und einem Kühlschrank (Bilder sind also ohnehin nicht allzu hilfreich), aber wenn man es nicht weiss, helfen diese Fotos sicher nicht.

Für mehr Bilder per Scrollen optimieren

Für die Auflistung individueller Produkte sind grosse Bilder fast immer notwendig. In dieser Phase des Prozesses interessieren sich die Nutzer für die visuelle Unterscheidung zwischen Elementen, und werden eher eine einzelne lange Seite durchscrollen als wiederholt zwischen der Listenseite und den detaillierten Produktseiten hin- und herzuschalten. Wenn man diese Layouts gestaltet, wählen Sie die richtige Bildgrösse aus, damit sie gross genug sind, um erkennbar zu sein, aber zugleich noch klein genug, um die Anzeige mehrerer Produkte gleichzeitig zu erlauben.

In unserer Studie hat ein Nutzer ein Icon oben auf der Produktlistenseite bemerkt, für Campingzelte, auf der mobilen Website von Sports Authority. Weil er neugierig war, was das Icon bedeutete, hat er darauf getippt, und die Möglichkeit entdeckt, zwischen einer Listenansicht und der Anzeige eines Produktrasters. Nachdem er die Ansicht einige Male gewechselt hat, ist er schliesslich bei der Standard-Ansicht des Rasters geblieben. Obwohl dieser Nutzer keinen Grund dafür angegeben hat, warum er eine Ansicht der anderen gegenüber bevorzugt hat (ein Nachteil einer unmoderierten Studie (engl.) ist die mangelnde Möglichkeit, mehr Informationen zu erhalten), hatte die Rasteransicht einen klaren Vorteil: Sie ermöglichte die Ansicht mehrerer Produkte gleichzeitig - zwei kleinere Bilder pro Reihe, im Gegensatz zu einem Bild und einem Titel für ein einzelnes Produkt in der Listenansicht.

Mobile Website von Sports Authority: Ein Bild innerhalb einen Listenansicht führt dazu, dass jedes Produkt mehr realen Bildschirmraum verbraucht, ein kostbares Gut auf kleinen Telefondisplays.

Also, Textmenüs oder Bilder?

Wenn Sie darüber diskutieren, ob Sie rein textbasierte Listenmenüs oder ein bildbasiertes Raster für die mobile Navigation verwenden sollten, müssen Sie wissen, dass sie beide gut sind auf verschiedenen Ebenen in der Informationsarchitektur.

• In den umfassendsten und vielfältigsten Kategorieebenen erlaubt ein Textmenü den Nutzern eine schnelle Navigation durch den Inhalt, an dem sie interessiert sind.
• Sobald die Unterschiede zwischen den Option nuancierter werden, ist es ein Raster mit Bildern, das den Nutzern dabei hilft, verschiedene Angebote zu unterscheiden und eine besser informierte Entscheidung zu treffen.

Für die meisten Seiten tritt dieser Wechsel von Textmenüs zu einem bildbasierten Design auf der Produktlistenseite oder, maximal, eine Ebene höher in der Informationsarchitektur ein. (Viel mehr über die Verteilung von Elementen auf mehrere Ebenen erfahren Sie in unserem Schulungskurs: Informationen organisiert und strukturiert, um ihre Auffindbarkeit zu verbessern.)

 

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