Die optimale mobile Navigation? Der Einstieg über Kategorien – Teil 2

Die optimale mobile Navigation? Der Einstieg über Kategorien – Teil 2

Martin Schröter in Mobile Usability
Lesezeit: 2 Minuten · 2. Juli 2014
von | 2. Juli 2014 | Mobile Usability

Im ersten Teil dieser Serie zum Thema mobile Navigation sind wir auf die verschiedenen Herausforderungen eingegangen, die sich aus der Anpassung von Navigationstypen an Smartphones und Tablets ergeben.

In den kommenden Artikeln stellen wir Ihnen daher drei verschiedene Navigationskonzepte vor, die sich für mobile Geräte eignen. Diese unterscheiden sich hinsichtlich ihrer Anwendungsfälle, ihrer Struktur und ihrem Aufbau. Als erstes präsentieren wir Ihnen den Einstieg über Kategorien, der sehr häufig in mobilen Online-Shops verwendet wird.

Ideal für mobile Shops mit großem Produktsortiment

Insbesondere große Online-Shops wie Amazon nutzen den Einstieg über Kategorien, um ihren Kunden die größtmögliche Übersicht zu bieten. Dies scheint aufgrund der breiten Produktpalette des Online-Händlers auch die sinnvollste Lösung zu sein, da die vielen Hauptkategorien und Unterkategorien (bis zu 10!) unmöglich in einem aufklappbaren Menü unterzubringen sind.


Aufbau der mobilen Navigation über Kategorien

Amazon platziert die wichtigsten Hauptkategorien auf der Startseite (siehe Screenshot). Sind die Besucher beispielsweise auf der Suche nach Digitalkameras können Sie in der Hauptkategorie “Elektronik & Foto” ein Untermenü aufklappen, das weitere Unterkategorien enthält. Bei Klick auf die Unterkategorie “Kamera & Foto” werden Sie auf eine neue Seite weitergeleitet. Dort finden Sie erneut ein Kategoriemenü auf, das wiederum Unterkategorien enthält. Erst durch das Aufrufen der entsprechenden Hauptkategorie gelangen die Besucher wieder auf die höhergelegene Ebene zurück.

 

Abb. 1: Einstieg über Kategorien auf der mobilen Amazon-Seite


Welche Vorteile hat diese mobile Navigation?

Mag dies zunächst sehr kompliziert klingen, liegt der Vorteil klar auf der Hand: Selbst eine sehr komplexe Navigationsstruktur lässt sich so gut darstellen. Die Nutzer dringen damit immer weiter in die Seitenstruktur ein, ohne aus den Augen zu verlieren, wo sie sich gerade auf der Seite befinden.


Gibt es Nachteile beim Einstieg über Kategorien?

Andererseits ist bei diesem Navigationstypen nicht das komplette Produktsortiment – sprich alle Kategorien – direkt sichtbar. Wollen Nutzer beispielsweise nach einem TV Gerät suchen, müssen sie zurück auf die Startseite gehen. Hier hilft allerdings die hervorragende Suchfunktion von Amazon, die direkt über den Kategorien platziert ist und dank einfacher Bedienung schnell zum gesuchten Produkt führt.


Grafische Darstellung der Kategorien über Teaserbilder

Es bietet sich zudem an, die Kategorien grafisch zu unterstützen: Teaserbilder machen deutlich, was sich hinter der jeweiligen Kategorie versteckt und laden so zum Stöbern ein. Ein gelungenes Beispiel ist der Online Shop von Esprit, der eine ausschließlich grafische Kategoriennavigation nutzt. Doch auch hier ist Vorsicht geboten: Zu viele Bilder lassen die Navigation schnell überladen wirken und es sollte gut überlegt werden, welche Bilder zusätzliches Verständnis schaffen und wann auf Bilder verzichtet werden sollte. Gleiches gilt übrigens auch für die Nutzung von Icons.

Abb. 2: Einstieg über Teaser bei dem mobilen Esprit-Shop

Fazit – Wie optimal ist diese mobile Navigation?

Der Einstieg über Kategorien lohnt sich für sehr komplexe Shop-Systeme mit einer Vielzahl an Haupt- und Unterkategorien. Vor allem in Kombination mit einer guten Suchfunktion gewährleistet diese Art der Navigation ein bedienungsfreundliches und übersichtliches Nutzererlebnis. Für kleinere Shops eignen sich hingegen Top- oder Seitennavigationen, die wir Ihnen in den nächsten Teilen vorstellen werden.

Die optimale mobile Navigation? 3 Navigations-Konzepte im Vergleich – Teil 1

Die optimale mobile Navigation? 3 Navigations-Konzepte im Vergleich – Teil 1

Martin Schröter in Mobile Usability
Lesezeit: 2 Minuten · 18. Juni 2014
von | 18. Juni 2014 | Mobile Usability

Immer wieder stellen wir im Rahmen unserer RapidUsertests fest, dass die Navigation von Online-Shops nicht optimal auf die mobilen Bedürfnisse der Nutzer (Smartphone, Tablet) angepasst ist: Entweder ist sie viel zu umfangreich, schlecht positioniert oder gar nicht erst als solche zu erkennen (Zu unserem Artikel über das “Hamburger” Icon geht es hier).

Aus diesem Grunde stellen wir Ihnen in den nächsten Wochen einige Navigationskonzepte vor, die sich besonders gut für mobile Anforderungen eignen. In diesem Artikel beleuchten wir zunächst die grundsätzlichen Herausforderungen, die sich aus der Anpassung an mobile Geräte ergeben.

Herausforderungen für die mobile Navigation

Die meisten Besucher Ihres Online-Shops werden die Navigation nutzen, um auf der Seite zu stöbern oder schnellstmöglich zum gewünschten Produkt zu gelangen. Wollen Sie Ihren Online-Shop auch auf die mobile Nutzung zuschneiden, sollten Sie der Navigation daher besondere Aufmerksamkeit widmen.

Sucht ein Nutzer beispielsweise nach einem TV-Gerät, ist er es von Desktop-Seiten gewohnt, dass die Navigation optisch anspruchsvoll ausklappt, sobald er darüber fährt. Dieser als “Mouseover” bekannte Effekt ist bei der mobilen Darstellung nicht einsetzbar, da die Bedienung mit den Fingern – anders als bei der Bedienung durch die Maus – keinen Mouseover simulieren kann. Ein solches Overlay wird auf Smartphones zudem als überladen und störend empfunden, da es aufgrund des kleineren Displays viel zu viel Platz einnimmt.

Eine horizontale Anordnung der Navigation ist aufgrund des kleineren Displays ebenfalls wenig empfehlenswert, weil nur sehr wenige Kategorien nebeneinander platziert werden können.

Die richtige Navigationsstruktur finden

Wie an den Beispielen deutlich wird: Für die mobile Navigation müssen andere Lösungen her. Nehmen Sie die mobile Anpassung auch als Chance wahr, Ihr Navigationskonzept generell zu überprüfen, denn:

  1. Ihre Navigationsstruktur sollte ausbalanciert sein. Das heißt: Verwenden Sie maximal drei Hierarchieebenen, bestehend aus Haupt- und Unterkategorien.
  2. Verwenden Sie höchstens sechs Hauptkategorien, um Übersichtlichkeit zu bewahren und um den Nutzer schnell zum Ziel zu führen.
  3. Verwenden Sie ein- und ausklappbare Kategorien. Bei einer Navigation mit mehreren Hierarchieebenen sollte berücksichtigt werden, dass Mouseover-Effekte mobil nicht darstellbar sind.
  4. Achten Sie darauf, dass die Navigation nicht zu lang wird. Aufgrund der geringen Displaygröße von Smartphones und Tablets ist eine vertikal angeordnete Navigation der Kategorien unabdingbar. Aber auch hier ist Vorsicht geboten: Viele Nutzer haben keine Lust auf mobilen Webseiten zu scrollen.
  5. Verwenden Sie großzügige Buttons und Formularfelder (mindestens 1x1cm), da die Bedienung per Finger auf den kleinen Displays nicht so genau ist wie mit dem Mauszeiger.

Neben diesen grundsätzlichen Eigenschaften mobiler Navigationen gibt es viele verschiedene Konzepte für attraktive Navigationen, die sich vor allem hinsichtlich Positionierung und Struktur unterscheiden. Je nach Komplexität der Website passt die eine oder andere Variante besser. Grundsätzlich sollten jedoch Aspekte wie die Übersichtlichkeit und die Bedienbarkeit immer eine wesentliche Rolle spielen.

Welche unterschiedlichen Navigationstypen es gibt und welche eine optimale Variante für Ihre individuellen Bedürfnisse sein kann, verraten wir Ihnen in den nächsten Ausgaben.

Wie halten User eigentlich Ihr Smartphone?

Wie halten User eigentlich Ihr Smartphone?

Userlutions Team in Mobile Usability
Lesezeit: 1 Minute · 11. Juni 2014
von | 11. Juni 2014 | Mobile Usability

Haben Sie schon einmal an sich selbst beobachtet, wie Sie Ihr Smartphone halten? Wie oft wechseln Sie bei der Bedienung einer Webseite oder App unwissentlich die Position ihrer Hände?

Ein wenig Hintergrundwissen zur Halteposition von mobilen Geräten hilft bei der Gestaltung von mobilen Webseiten und Apps. Somit stellen Sie sicher, dass alle Buttons bequem erreicht werden können und vermeiden unangemessen häufige Wechsel der Handposition.

49%

halten das Smartphone
in einer Hand

36%

der Nutzer halten das
Telefon wie ein kleines
Baby mit 2 Händern

15%

halten ihr Smartphone
mit 2 Händen wie den
Controller einer Spielkonsole

Feldbeobachtung zur Smartphone-Haltung

Daten einer Beobachtung in den Straßen einer amerikanischen Großstadt geben einen Hinweis auf die unterschiedlichen Halteposition von Smartphone-Nutzern.

Hierbei wird die Haltung der Hände je nach Anforderung auch innerhalb einer Anwendung schnell und normalerweise ohne Probleme gewechselt.

Haltungswechsel hängen auch vom mobilen Gerät ab

Die Handposition bei der Bedienung von mobilen Geräten hängt auch von der Größe des Gerätes bzw. vom Gerätetyp ab. So lassen sich Tablet-PCs kaum bequem in einer Hand halten und werden daher in den Schoß oder auf den Tisch gelegt. Aufgrund der geringeren Maße werden Smartphones, im Gegensatz zum Phablets oder Tablets, auch viel näher am Körper gehalten. Dementsprechend müssen Text- und Buttongrößen an das Gerät angepasst werden.

Fazit

Nutzern sollte es jederzeit möglich sein die relevanten Informationen zu sehen ohne dass diese durch ihre eigenen Hände verdeckt werden.

Achten Sie deshalb bei der Gestaltung von mobilen Webseiten und Apps darauf, dass wichtige Informationen nicht durch die Finger des Nutzers verdeckt werden. Überprüfen Sie insbesondere Buttons, die Zusatzinformationen erst bei Klick erscheinen lassen!

Haben Sie Fragen oder Anmerkungen? Kontaktieren Sie uns!

Verstehen Ihre mobilen Nutzer das Icon des Hauptmenüs?

Verstehen Ihre mobilen Nutzer das Icon des Hauptmenüs?

Userlutions Team in Mobile Usability
Lesezeit: 1 Minute · 21. Mai 2014
von | 21. Mai 2014 | Mobile Usability

Jeder, der eine mobile Webseite hat oder plant, steht vor der Herausforderung den beschränkten Platz gut zu nutzen. Oftmals wird deshalb nur ein Icon ohne beschreibenden Text für das Hauptmenü verwendet.

Das sogenannte “Hamburger-Icon” ist auf mobilen Webseiten, vor allem bei Smartphones weit verbreitet. Die Annahme ist, dass der geringe Platz im Header sinnvoll genutzt wird.

Nicht alle Nutzer verstehen das Hamburger-Icon

Bei der Auswertung mehrerer mobiler RapidUsertests konnten wir wiederholt feststellen, dass dieses häufig verwendete Menü-Icon oftmals gar nicht als Zugang zur Hauptnavigation erkannt wird — und wie diese Diskussion auf twitter zeigt, sind wir nicht die Einzigen die darüber stolpern.

Vor allem Personen ab 35 Jahren scheinen immer wieder Probleme zu haben, dem Icon eine eindeutige Funktion zuzuschreiben. Dementsprechend finden sie oftmals nicht das Hauptmenü und können nicht das gesamte Angebot des Shops erkunden.

Sichern Sie den Zugang zum Hauptmenü

Können Sie es sich leisten, Ihren Nutzern das Gesamtangebot Ihres Online-Shops vorzuenthalten?

Die Lösung des Problems ist simpel:

  • Schreiben Sie “Menü” unter bzw. neben das Icon oder
  • Ersetzen Sie das Hamburger-Icon durch einen eindeutige Button mit der Aufschrift “Menü”.
  • Achten Sie dabei auf gute Lesbarkeit auf Smartphones

A/B-Tests zeigen eine deutliche Verbesserung der Klick-Rate auf das entsprechend geänderte Hauptmenü. Somit sichern Sie die Orientierung Ihrer Nutzer in der gesamten Angebotspalette Ihres Shops.

Fazit

Selbst weit verbreitete Icons werden nicht immer korrekt erkannt.
Die Lösung ist einfach: Verwenden Sie seltene Icons nur mit eindeutiger Beschriftung. Hierbei helfen regelmäßige Nutzertests mit der relevanten Zielgruppe.

Wie Walmart seine mobile Conversion durch Usability Tests um 20% steigern konnte

Wie Walmart seine mobile Conversion durch Usability Tests um 20% steigern konnte

Userlutions Team in Mobile Usability
Lesezeit: 0 Minute · 20. Mai 2014
von | 20. Mai 2014 | Mobile Usability

Der kanadische Ableger des Supermarktriesen Walmart konnte bei der Umstellung auf Responsive Web Design einen Anstieg der Conversion-Rate von 20% verzeichnen. Ein Artikel des Ecommerce-Blogs GetElastic beschreibt neben den technischen und organisatorischen Herausforderungen den Umgang mit Nutzertests.

Wie konnte dieser Erfolg erreicht werden?

Walmart führte während des gesamten Entwicklungszeitraumes von fast einem Jahr immer wieder Nutzertests durch.

Das Team testete dabei mit Nutzern aus ganz Kanada:

  • erste Papierprototypen,
  • fertig programmierte Einzelseiten,
  • sowie abschließend die finale Webseite mit A/B-Tests.

Die hierdurch gewonnen Erkenntnisse und Probleme konnten schnell in die Entwicklung einfließen, wodurch die Nutzertests direkt den Erfolg des Relaunchs sicherten und immer wieder wertvolles Feedback lieferten.

Mobile Usability kontinuierlich testen

Das Beispiel von Walmart zeigt – Kontinuierliche Nutzertests schon während der Entwicklung von Webseiten lohnen sich! Lesen Sie hier die Erfolgsgeschichte von Walmart.ca.

Nutzertests – vom ersten Prototypen bis zum fertigen Produkt – können Sie einfach mit unseren RapidUsertests durchführen.

Erfahren Sie hier mehr über unseren mobilen RapidUsertest.

Seite 2 von 3123