studienband: shoppen mit dem smartphone - erkenntnisse, guidelines und good practices für mobile...

Studienband

Mobile Shopping Erkenntnisse, Good Practices und Guidelines

Frühjahr 2014

© eResult GmbH – Results for Your E-Business

(www.eresult.de)

Nächstes Kapitel Nächstes Kapitel

Seite Mobile Shopping

Inhaltsverzeichnis

2


Die Inhalte im Überblick

Bedeutung & Ziele der Studie 04

Studiensteckbrief 08

Management Summary 13

Für Eilige: Alle identifizierten Guidelines auf einen Blick 17

Ergebnisse 24

Erwartungen & Anforderungen 26

Startseite 28

Navigation 39

Produktübersichtsseite 45

Produktdetailseite 53

Warenkorb 61

Bestellprozess 68

Kontakt 75

Kurzvorstellung eResult GmbH 77

Inhaltsverzeichnis

3



Bedeutung & Ziele der Studie

4


Immer mehr Deutsche kaufen mit dem Smartphone ein

● In einer Vorbefragung der eResult GmbH zu der vorliegenden Studie

gaben 58,2 % der deutschen Smartphone-Besitzer an, in den letzten 12

Monaten mit Ihrem Smartphone auf Einkaufstour gegangen zu sein.

● In einer zweiten Vorbefragung schätzten die Smartphone-Shopper, dass

sie durchschnittlich 27,7 % ihrer Onlineeinkäufe per Smartphone

erledigen.

● Als die 3 wichtigsten Gründe für das mobile Shoppen wurden genannt:

– Spontanität

„…weil ich etwas direkt und schnell kaufen wollte, sobald es mir in den Sinn kam.“

– Abwesenheit einer Alternative

„…weil ich gerade nichts besseres zur Hand hatte (PC, Laptop,…)

– Allgegenwärtigkeit

„…weil ich so jederzeit und überall etwas kaufen kann.“


5 5


Optimierungsbedarf bei mobilen Onlineshops

● Häufigster Kritikpunkt in den freien Antworten: „Die Websites sollten

besser für mobile Endgeräte optimiert werden.“

● Hier zeigt sich das enorme Zukunftspotential für mobile Onlineshops, die

ihre User Experience und Usability verbessern: 61,2 % der Smartphone-

Shopper gaben an, in Zukunft häufiger mit dem Smartphone einkaufen

zu wollen, wenn ein Shop ihre genannten Verbesserungsvorschläge gut

umsetzen würde.

● Grund genug für uns, mit dieser Grundlagenstudie die User Experience

mobiler Onlineshops genauer unter die Lupe zu nehmen.


6 6


User Experience erhöhen

● Ziel dieser Studie ist es daher, möglichst allgemein gültige Erkenntnisse

und Good Practices für mobile Onlineshops zu identifizieren, um die

User Experience in Zukunft stärker am Nutzer ausrichten zu können.

● Darüber hinaus möchten wir aus den gewonnenen Erkenntnissen

Guidelines ableiten, die als direkt anwendbare

Gestaltungsempfehlungen für mobile Onlineshops konzipiert sind.

● Und nun: Viel Spaß beim Lesen!


7 7



Studiensteckbrief

8 8


Fokus der Untersuchung

Studiensteckbrief

9

• Was sind die Erwartungen und Anforderungen der Nutzer an mobile

Onlineshops und das Shoppen per Smartphone im Allgemeinen?

• In welchen Situationen wird das Smartphone zum Shoppen verwendet?

• Wie gehen die Nutzer vor, wenn sie mit dem Smartphone einen

Onlineshop aufrufen?

• Welche Probleme treten bei der Nutzung der mobilen Shops auf?

• Was begeistert die Nutzer, wenn sie einen mobilen Shop besuchen?

• Welche Elemente sind besonders wichtig für die einzelnen Seitentypen?

(Startseite, Produktdetailseite, Warenkorb etc.)

• Was sind Good Practice-Beispiele für die verschiedenen Seitentypen?

• Welche verallgemeinerbaren, branchenübergreifenden Guidelines

können aus dem Nutzerverhalten abgeleitet werden?


Methodisches Vorgehen

Studiensteckbrief

10

Quantitative Vorbefragung In 2 Vorbefragungen wurde zunächst das allgemeine Nutzungs-

verhalten von deutschen Smartphone-Besitzern erfragt. Darauf auf-

bauend wurden beliebte mobile Onlineshops aus unterschiedlichen

Branchen ausgewählt sowie das Studienkonzept entwickelt.

Usability- und User Experience-Test Es wurden 10 Interviews à 60 Minuten geführt: Mit einem Fokus auf

dem Nutzungsverhalten im mobilen Kontext, der Beobachtung des

gewöhnlichen Einkaufs per Smartphone (inkl. Eyetracking) und der

Erfassung von Erwartungen und Anforderungen.

Workshop: Guidelines für mobile Onlineshops Analyse des Verhaltens und der Kommentare der Testpersonen mit dem

Hauptaugenmerk auf der Generierung von verallgemeinerbaren,

branchenübergreifenden Gestaltungsempfehlungen.


Mehrstufiges Untersuchungs-Design

11

Studiensteckbrief

• Für die quantitative Vorbefragung wurden über das Bonopolis Onlinepanel

600 Internetnutzer zu ihren Erfahrungen und ihrem Verhalten bezüglich

mobilen Onlineshops befragt und die Ergebnisse ausgewertet.

• Anhand der Vorbefragung wurden beliebte mobile Onlineshops ausgewählt

und um weitere Branchen ergänzt, die dann beim Usability- und User

Experience-Test untersucht wurden.

• In den Tests sollten die Testpersonen (n=10) zunächst von ihren

Erfahrungen, Erwartungen und Anforderungen hinsichtlich mobiler

Onlineshops erzählen.

• Danach wurde in einem freien Nutzungsszenario beobachtet, wie die

Testpersonen beim Aufrufen eines mobilen Shops vorgehen.

• Zusätzlich wurden zuvor entwickelte Use-Cases durchgespielt, um typische

Nutzungsszenarien abzubilden und zu analysieren.

• Abschließend wurden die Ergebnisse in einem Workshop ausgewertet und

allgemeine Gestaltungsempfehlungen (Guidelines) abgeleitet.

11


Untersuchte mobile Shops

12

Studiensteckbrief

12



Management Summary

13 13


Gleicher Anspruch wie an die Desktop-Version

Management Summary

14

• Die Nutzer erwarten keine inhaltlich oder funktional „abgespeckte“

Version, sondern haben dieselben (hohen) Anforderungen wie an eine

Desktop-Version.

• Es wird eine speziell für das Smartphone optimierte Version erwartet,

die die Besonderheiten und Einschränkungen der kleinen Geräte

berücksichtigt und trotzdem die volle User Experience bietet (um eine

optimale User Experience auf allen Geräten zu gewährleisten, empfiehlt

sich die Verwendung eines responsiven Designs).

• Es zeigt sich, dass bereits die Startseite enorm wichtig ist, um die Nutzer

zu begeistern und zu überzeugen. Zentral sind hierfür eine gute Bühne

und ein guter Einstieg in das Sortiment.

• Bei der Navigation ist auf eine erwartungskonforme Platzierung und

große Bedienflächen zu achten.


Gute Übersicht und Transparenz enorm wichtig

Management Summary

15

• Auf der Produktübersichtsseite sollte speziell auf den Einsatz von

Werbehinweisen verzichtet werden und stattdessen der Platz für eine

übersichtliche und ansprechende Darstellung der wichtigsten

Produktmerkmale genutzt werden. Filter- und Sortierungsfunktionen

sind auf dem Smartphone ebenso wertvoll wie auf dem PC/Laptop.

• Auch auf der Produktdetailseite sollten die Produktinformationen

möglichst übersichtlich dargestellt werden und denselben Umfang wie

die Desktop-Version aufweisen. Aufgrund des geringen Platzes ist es

notwendig, die wichtigsten Informationen im oberen Bereich zu

platzieren.

• Der Warenkorb sollte eine gute Transparenz hinsichtlich der

hinzugefügten Artikel und den anfallenden Kosten haben.


Von der Startseite bis zum Check-out: Je schneller, desto besser!

Management Summary

16

• Für den Bestellprozess gilt: Je schneller, einfacher und

unkomplizierter, desto besser! Dabei zählt die Zeit vom Aufrufen der

Startseite bis zum Check-out. Gerade mobile Nutzer haben nur begrenzt

Zeit, sich mit einer umständlichen Suche nach einem Artikel oder der

Eingabe von persönlichen Daten zu beschäftigen. Payment-Provider

bieten eine gute Möglichkeit, den Bestellprozess weiter zu beschleunigen.

• Promoten Sie Ihre App auf der Startseite nicht zu stark, damit sie die

Nutzer nicht stört. In der Regel haben die Nutzer keine Probleme damit,

sie zu einem späteren Zeitpunkt selbst herunterzuladen.



Für Eilige: Alle identifizierten Guidelines auf einen Blick

17


Guidelines für die Startseite

Alle Guidelines auf einen Blick

18

Im sofort sichtbaren Bereich sollte max. 1 Banner (Werbung, Angebot,

Produktempfehlung) platziert werden.

Die Startseite sollte mit attraktiven Inhalten gefüllt sein und zum sofortigen

Erkunden des Sortiments einladen. Entscheidend hierfür sind eine gute

Bühne und ein einfacher und ansprechender Sortimentseinstieg.

Je nach eigener Nutzergruppe und Produktsortiment sollte entweder der

Einstieg über eine Kategorienauswahl oder eine Suchfunktion priorisiert

werden.

No. 01

No. 02

No. 03


Guidelines für die Navigation


19

Das Logo sollte groß und eindeutig identifizierbar sein sowie als Link zur

Startseite fungieren (oder als Menü, gekennzeichnet durch einen Pfeil).

Wichtige Funktionen müssen über die Hauptnavigation schnell erreichbar

sein (Startseite, Suchfunktion, Kategorienauswahl, Warenkorb, Merkzettel,

Login).

Die Hauptnavigation sollte oben und nicht unten angezeigt werden. Das

Hauptmenü sollte entweder über ein Symbol mit 3 horizontalen Strichen

oder über das Logo erreichbar sein. Sofern der Platz es zulässt, erhöht eine

permanente Hauptnavigation die Usability.

No. 04

No. 05

No. 06


Guidelines für die Produktübersichtsseite


20

Sowohl in der Kategorienauswahl als auch in der Produktübersicht sollten

keine Werbehinweise (z. B. „Unsere Empfehlung“, „Topseller“) angezeigt

werden.

Eine Filter- und Sortierungsfunktion ist auf dem Smartphone ebenso

wichtig wie auf dem Desktop.

Es sollten nur die wesentlichsten Artikelmerkmale dargestellt werden,

die nötig sind, um die Artikel differenzieren und sich für eines entscheiden

zu können. Generell wichtige Artikelmerkmale sind: Preis(!),

Produktabbildung, Artikelname, Verfügbarkeit, Bewertungen und sonstige

wichtige Unterscheidungsmerkmale.

No. 07

No. 08

No. 09


Guidelines für die Produktdetailseite


21

Im sofort sichtbaren Bereich sollten die wichtigsten

Artikelinformationen dargestellt werden. Diese können je nach Produkt

schwanken. Generell wichtige Artikelmerkmale sind: Preis(!),

Produktabbildung, Artikelname, Verfügbarkeit, Versandkosten,

Bewertungen und sonstige wichtige Unterscheidungsmerkmale.

Bei Vollbild-Darstellungen (z. B. Zoom-Funktion) immer deutlich machen,

wie der Nutzer wieder zurückgelangen kann.

Der Bestellbutton sollte möglichst weit oben platziert werden,

idealerweise in der Nähe des Preises und den Versandinformationen. In

jedem Fall sollte er nach kurzem Scrollen sofort sichtbar sein.

No. 10

No. 11

No. 12


Guidelines für den Warenkorb


22

Der Warenkorb darf auf keinen Fall bei Vorgängen wie Login,

Registrierung, Auswahl weiterer Artikel etc. gelöscht werden. Außerdem

sollten Merkzettel und Warenkorb persistent über mehrere Geräte sein.

Gesamtsumme, Versandkosten und Bestellbutton sollten immer gut sichtbar

sein.

Der Nutzer sollte immer eine deutliche Rückmeldung erhalten, wenn ein

Artikel dem Warenkorb hinzugefügt wurde.

No. 13

No. 14

No. 15


Guidelines für den Bestellprozess


23

Je schneller, einfacher und unkomplizierter der Bestellprozess, desto

besser!

Payment-Provider bieten eine gute Möglichkeit, den Bestellprozess zu

beschleunigen.

Eine Anzeige der Bestellschritte wirkt ermutigend und unterstützt die

Nutzer.

No. 16

No. 17

No. 18



Ergebnisse

24

Seite

Hinweise zum Aufbau des Studienbandes

• Im Folgenden stellen wir die identifizierten Probleme dar und

zeigen Beispiele für eine gute Lösung. Im Sinne der Zielsetzung

des Projektes liegt der Fokus auf der Darstellung positiver

Beispiele und nicht auf der Benennung (geringfügiger) Probleme.

Am Ende jedes Kapitels fassen wir die wichtigsten Erkenntnisse

in Guidelines zusammen.

Dabei gilt:

• Symbolik für positive Aspekte:

• Symbolik für identifizierte Probleme:

• Anregungen werden mit folgendem Zeichen gekennzeichnet:

• Verwendete Abkürzungen: TP = Testperson

Ergebnisse

25 Mobile Shopping



Erwartungen & Anforderungen

26


Erwartungen & Anforderungen an einen mobilen Onlineshop

Ergebnisse

27

Mobiler Onlineshop

Gleicher Anspruch wie an die Desktop-Version: Die Nutzer haben dieselben Ansprüche an die User Experience wie bei

der Desktop-Variante: Sie erwarten keine abgespeckte Version mit

weniger Funktionen und geringerem Informationsgehalt, sondern eine

für das Smartphone optimierte Version mit vollem Funktions- und

Informationsumfang.

Bequemes stöbern: Mobile Onlineshops werden häufig

genutzt, um zu stöbern. Dies kann

unterwegs sein (z. B. in der Bahn),

aber auch zu Hause (z. B. auf dem

Sofa oder im Bett).

Erste Info-Quelle: Nicht immer wird ein Artikel

auch tatsächlich über das

Smartphone gekauft. Gerne

werden mobile Shops dazu

verwendet, um sich vorab

zu informieren und das

Smartphone als erste Info-

Quelle benutzt.

Insbesondere bei teureren

Produkten gibt es Bedenken

vor Fehlbestellungen per

Smartphone. Der Einkauf

wird dann ggf. später an

einem anderen Gerät

abgeschlossen. Transparenz: Auf einem kleinen Display ist den Nutzern Transparenz

besonders wichtig: Sie fürchten, dass sie bei unübersichtlichen

Shops den Überblick verlieren und evtl. Fehlkäufe tätigen.



Startseite

28


Die Startseite: Entscheidend für den Ersteindruck

Ergebnisse

29

• Die Startseite ist für jeden Onlineshop eine Art Aushängeschild

und entscheidend für den ersten Eindruck bei den Nutzern. Häufig

entwickeln die Nutzer bereits nach wenigen Sekunden eine Meinung,

ob ihnen ein Shop gefällt oder nicht.

• Dies trifft in gleichem Maße für die Desktop-Version eines Shops wie

für die mobile Version zu. Die Ansprüche der Nutzer sind ähnlich

hoch.

• Da für die mobile Version jedoch sehr viel weniger

Bildschirmfläche zur Verfügung steht, als bei der Desktop-Version,

ist es umso wichtiger, dass dieser Platz sinnvoll genutzt wird, um die

Nutzer optimal abzuholen und zu überzeugen.


Zu viele Banner verhindern Einstieg in das Sortiment

Ergebnisse

30

Zu viele Banner:

Der größte Teil des sofort sichtbaren

Bereichs wird durch die Bühne (welche

konkrete Produkte zeigt) und den Hinweis

auf den Werbespot belegt. Der übrige Platz

wird primär durch die statische Navigation

oben und unten eingenommen. Ein echter

Einstieg in die Produkte ist nur über die

schwer erkennbare Suchfunktion in der Mitte

möglich.

Kein Sortimentseinstieg:

Der sofort sichtbare Bereich ist vollständig

mit Werbung und Angeboten ausgefüllt.

Außer der Suchfunktion gibt es keinen

Einstieg in das Sortiment. Dies erschwert die

Navigation erheblich und bietet keinerlei

Führung beim Einstieg in die

Produktauswahl.

TP: „Ich will keine Werbung, sondern einen

Duft auswählen.“


Ansprechende Bühne auch auf dem Smartphone wichtig

Ergebnisse

31

Schnell verständlicher Teaser: Das Anteasern von Angeboten (z. B. Prozente/Sale) ist auch auf dem

Smartphone wirksam - die Nutzer erwarten sogar, dass sie auf besondere

Angebote aufmerksam gemacht werden. Wichtig ist hierbei, dass die Teaser

trotz des geringen Platzes möglichst schnell und intuitiv verständlich ihre

Botschaft kommunizieren (wie z. B. mit einem großen %-Zeichen).

Wischbarer Teaser: Nervöse Teaser, die schnell durch mehrere Angebote wechseln, kommen bei

den Nutzern nicht so gut an. Teaser sollten nur langsam ihren Inhalt

wechseln (Richtwert: alle 5s). Wischbare Teaser bieten dazu noch eine tolle

User Experience.


Good Practice: Bühne & Sortimentseinstieg H&M

Ergebnisse

32

Gute Startseite: Der verfügbare Platz wird sinnvoll zwischen Bühne und

Sortimentseinstieg aufgeteilt: Der Nutzer wird über die 10%-Aktion

informiert und erhält direkt darunter die Möglichkeit, schnell in das

Sortiment einzusteigen.

Attraktive Darstellung: Die Aufteilung in die 3 Hauptkategorien (Damen, Herren, Kinder) ist

aufmerksamkeitsstark gestaltet und leitet den Nutzer optimal bei

der Bedienung des Shops an.

Die Kategorien werden durch attraktive Bilder angeteasert und

wecken in den Nutzern Lust, dass Angebot zu entdecken.

TP: „Die Startseite gefällt mir gut, weil die Kategorien auch durch

Bilder selbsterklärend sind.“


Was ist wichtiger: Suchfunktion oder Kategorienauswahl? (1/2)

Ergebnisse

33

• Die Nutzer wollen sowohl stöbern als auch gezielt nach einem

Produkt suchen können. Aufgrund des mobilen Einsatzes von

Smartphones und der geringen Displaygröße ist es umso wichtiger,

die Nutzer direkt zu den Produkten zu führen und sie dabei „an die

Hand zu nehmen“.

• Der Sortimentseinstieg ist entweder über eine Kategorienauswahl

oder eine Produktsuche möglich. Je nachdem, was für den eigenen

Shop sinnvoller und zielführender ist, sollte einer der beiden Einstiege

besonders prominent dargestellt werden, insbesondere, wenn nicht

genug Platz für beides da ist (z. B. weil Hauptnavigation und Werbung

den Rest des Platzes einnehmen).

• Dies ist am besten über eine Nutzeranalyse überprüfbar (Stöbern

meine Kunden häufig oder suchen sie gezielt nach einem bestimmten

Produkt?).


Was ist wichtiger: Suchfunktion oder Kategorienauswahl? (2/2)

Ergebnisse

34

• Als Faustregel gilt: Je breiter das Produktsortiment, desto wichtiger

ist eine gut funktionierende Suchfunktion. Umgekehrt kann bei einem

engen Produktsortiment die Fokussierung auf eine Kategorienauswahl

zweckmäßiger sein.


Good Practice: Sortimentseinstieg über Kategorienauswahl Tchibo, H&M

Ergebnisse

35

Themenwelten: Die Nutzer kennen Tchibos „Themenwelten“

und stöbern gerne in diesen. Optional kann

eine Suchfunktion über die Hauptnavigation

eingeblendet werden, diese ist jedoch

standardmäßig nicht geöffnet. Dadurch wird

der Blick auf die Themenwelten gelenkt,

welche zu ausgiebigem Stöbern animieren.

Kunden wollen stöbern: Wer eine Jeans kaufen möchte, weiß in den

seltensten Fällen ein exaktes Modell, dass

sie/ihn interessiert. Stattdessen wird das

Angebot an Jeans durchstöbert und ggf.

gefiltert. Auf eine Suchfunktion kann in

diesem Fall verzichtet werden.


Good Practice: Sortimentseinstieg über Suchfunktion Amazon, Otto

Ergebnisse

36

Vollsortimentler: Im oberen Bereich wird nach der

Hauptnavigation sofort die Suchfunktion

angezeigt. Erst darunter erscheinen

Angebote. Als Vollsortimentler konzentrieren

sich Amazon und Otto bei der mobilen

Version ihres Shops ganz auf die

Suchfunktion, die zudem hervorragend

funktioniert. Der Sortimentseinstieg über

eine Kategorienauswahl ist möglich, erfolgt

jedoch weiter unten im nicht sofort

sichtbaren Bereich.


App oder mobile Website?

Ergebnisse

37

Anhänger für beides: In unserem Test hatten die Nutzer unterschiedliche

Präferenzen. Einige bevorzugten eine App, andere die

mobile Website.

TP: „Eine App ist schön schnell und praktisch.“

TP: „Eine Website verbraucht keinen Speicher, mein

Handy wäre sonst ruck-zuck voll.“

Ist ein prominenter Hinweis sinnvoll?: Ein Hinweis auf dem Startbildschirm macht zwar auf die

App aufmerksam, lenkt jedoch auch ab. In jedem Fall ist

es wichtig, dass der Hinweis schnell weggeklickt werden

kann, da eine App nicht für alle Nutzer interessant ist

und viele eine App nicht unterwegs herunterladen

möchten, sondern in Ruhe zu Hause über den App-

Store.


Guidelines für die Startseite

Ergebnisse

38

Im sofort sichtbaren Bereich sollte max. 1 Banner (Werbung, Angebot,

Produktempfehlung) platziert werden.

Die Startseite sollte mit attraktiven Inhalten gefüllt sein und zum sofortigen

Erkunden des Sortiments einladen. Entscheidend hierfür sind eine gute

Bühne und ein einfacher und ansprechender Sortimentseinstieg.

Je nach eigener Nutzergruppe und Produktsortiment sollte entweder der

Einstieg über eine Kategorienauswahl oder eine Suchfunktion priorisiert

werden.

No. 01

No. 02

No. 03



Navigation

39


Die Navigation: Wichtig für eine gute User Experience

Ergebnisse

40

• Die Navigation ist entscheidend dafür, wie schnell und mühelos sich

die Nutzer in einem Shop zurechtfinden.

• Für die mobile Version muss das Navigationskonzept jedoch

unbedingt angepasst werden: Aufgrund der geringen

Bildschirmfläche können bereits minimale Änderungen eine

entscheidende Verbesserung (oder Verschlechterung) der Usability

bedeuten.

• Erwartungskonforme Platzierung, große Bedienflächen und

volle Funktionalität sind dabei die wesentlichen Stellschrauben.


Navigation auf engstem Raum: Keine Kompromisse bei der Usability

Ergebnisse

41

Logo nicht eindeutig:

Neben der Navigation ist das Logo zentral für die Identität des

Onlineshops. Das Logo sollte deshalb auf den ersten Blick als solches

erkennbar sein und einer Firma zugeordnet werden können. Bei

diesem Logo (Deichmann) hatten die Nutzer Probleme damit. Zudem

gibt es im Header keine Funktion, sich direkt im Shop einzuloggen.

Logo zu klein:

Die Nutzer sehen das Logo als einen zentralen Navigationspunkt an

(als Link zur Startseite oder als Navigationsmenü). Es sollte deshalb

groß genug sein, um es bequem anklicken zu können.

Hauptnavigation unten: Die Hauptnavigation ist nicht

erwartungskonform platziert: Die Nutzer

erwarten sie oben und nicht unten. Zudem ist

eine selbsteinklappende Hauptnavigation nicht

empfehlenswert, da sie schnell übersehen

wird und schwer anklickbar ist.


Erwartungskonforme Usability

Ergebnisse

42

Suchfunktion im Header: Für Amazon-Kunden ist die Suchfunktion

zentraler Navigationspunkt. Auf jeder Seite ist

die Suchfunktion in den Header integriert, so

dass keine zusätzlichen Klicks nötig sind, um

sofort nach einem anderen Artikel suchen zu

können. Die Suchfunktion bietet denselben

Funktionsumfang wie die Desktop-Version, inkl.

Vorschlagsfunktion, was bei den Nutzern sehr

gut ankommt.

Große Menüpunkte: Die Hauptnavigation befindet sich erwartungskonform ganz oben auf

der Seite. Das Logo ist schnell und eindeutig identifiziert. Die

Menüpunkte sind groß genug, um sie bequem zu klicken und somit

auch für etwas dickere Finger geeignet.

3 Striche als Symbol für das Menü: Die Nutzer kennen das Symbol mit den 3 horizontalen Strichen

mittlerweile gut und verbinden hiermit ein Navigationsmenü. Die

Auswahl, z. B. einer bestimmten Kategorie, ist somit gut verständlich.


Good Practice: Gute Hauptnavigation H&M

Ergebnisse

43

Permanente Hauptnavigation: Die Hauptnavigation von H&M bleibt auch beim Scrollen stehen, so dass

die Nutzer nicht erst nach oben scrollen müssen, wenn sie

beispielsweise zum Hauptmenü oder zum Warenkorb gelangen wollen.

Sofern die Hauptnavigation nicht zu groß ist (und somit zu viel Platz

von den Inhalten wegnimmt), bietet die permanente Navigation eine

tolle Usability. Besonders auf sehr langen Seiten kann dadurch Frust

vermindert werden.

Logo als Hauptmenü: Das Logo dient bei H&M nicht als direkter Link zur Startseite, sondern

als aufklappbares Hauptmenü. Diese platzsparende Darstellung wurde

von den Nutzern auf Anhieb verstanden. Enorm wichtig ist hierbei, dass

dem Nutzer dies durch einen Navigationspfeil signalisiert wird und dass

der erste Eintrag im aufgeklappten Menü die Startseite ist.

Funktion zum Einloggen: Die Nutzer erwarten, dass sie sich über die Hauptnavigation im Shop

anmelden können, um bei einer Bestellung die eigenen Daten nicht

erneut eingeben zu müssen, oder um auf den persönlichen Merkzettel

bzw. eine aktuelle Bestellung zugreifen zu können.


Guidelines für die Navigation

Ergebnisse

44

Das Logo sollte groß und eindeutig identifizierbar sein sowie als Link zur

Startseite fungieren (oder als Menü, gekennzeichnet durch einen Pfeil).

Wichtige Funktionen müssen über die Hauptnavigation schnell erreichbar

sein (Startseite, Suchfunktion, Kategorienauswahl, Warenkorb, Merkzettel,

Login).

Die Hauptnavigation sollte oben und nicht unten angezeigt werden. Das

Hauptmenü sollte entweder über ein Symbol mit 3 horizontalen Strichen

oder über das Logo erreichbar sein. Sofern der Platz es zulässt, erhöht eine

permanente Hauptnavigation die Usability.

No. 04

No. 05

No. 06



Produktübersichtsseite

45


Die Produktübersichtsseite: Auswahl eines Artikels

Ergebnisse

46

• Auf der Produktübersichtsseite und der Kategorienauswahl

entscheiden sich die Nutzer für ein Produkt, dass sie genauer

betrachten möchten. Hier ist es besonders wichtig, die Nutzer nicht

abzulenken und sie bei der Auswahl optimal zu unterstützen.

• Grundsätzlich erwarten die Nutzer denselben Informationsumfang wie

auf dem Desktop.

• Eine übersichtliche und transparente Darstellung der Produkte

sowie eine gute Vergleichbarkeit stellen dabei hohe Anforderungen

an Layout und Informationsdarstellung.


Störende Werbehinweise & überflüssige Produktdetails

Ergebnisse

47

Kategorienauswahl schlecht

zu erkennen: Über die Kategorienauswahl wollen die

Nutzer direkt zu den für sie interessanten

Produkten gelangen. Ablenkende

Werbehinweise und Teaser wie „Topseller“

oder „Unsere Empfehlung“ stören hier. In

diesem Beispiel geht die eigentliche

Kategorienauswahl völlig unter und ist nur

mühsam zu erkennen (in der Mitte:

Damendüfte/Herrendüfte).

Überladene Produktübersicht: Die Produktübersicht ist mit vielen Zahlen

und technischen Details überfüllt. Die

gezeigten Informationen und Abbildungen

helfen nur wenig bei der Auswahl eines

geeigneten Geräts. Abgesehen vom Preis

und der Marke sind die Informationen nicht

miteinander vergleichbar.


Kategorienauswahl & Produktübersicht

Ergebnisse

48

Fokussierte Darstellung: Die wesentlichen Produktmerkmale sind übersichtlich dargestellt und auf

einen Blick zu erkennen. Preis, Abbildung, Artikelname, Bewertungen und

das wichtigste technische Unterscheidungsmerkmal (in diesem Fall der

Prozessor) sind direkt miteinander vergleichbar. Trotzdem wirkt die

Auflistung aufgeräumt und es passen viele Produkte auf die Übersichtsseite.

Klare Kategorienauswahl: Die Kategorienauswahl bei Saturn und H&M sind klar

strukturiert und leicht zu lesen. Saturn zeigt zusätzlich die

Anzahl der Artikel pro Kategorie, H&M teasert jede

Kategorie mit einem kleinen Bildchen an.


Good Practice: Gute Produktübersicht Tchibo, H&M

Ergebnisse

49

Verlockende Darstellung: Die Produktübersicht in den Themenwelten

von Tchibo ist animierend und edel. Die

Produkte sind sehr gut präsentiert und in

Szene gesetzt. Die Darstellung passt perfekt

zu den thematisch abgesteckten

Themenwelten, die das Stöbern in diesem

mobilen Shop zu einem Genuss machen.

Reduzierung aufs Wesentliche: Die Produktübersicht besteht aus einer sehr

guten Abbildung und dem Preis. Wie uns die

Nutzer bestätigten, sind weitere Angaben

für die Auswahl eines Kleidungsstücks

zunächst irrelevant und werden erst auf der

Produktdetailseite erwartet. Die Darstellung

unterstützt das Stöbern der Nutzer optimal.


Filter- und Sortierungsfunktion

Ergebnisse

50

Keine Filter- und

Sortierungsfunktionen: Für das Suchergebnis werden weder Filter-

noch Sortierungsfunktionen angeboten. Die

Nutzer müssen sich u. U. durch mehrere

Seiten klicken, bis sie zu dem gewünschten

Produkt kommen.

TP: „Wonach ist denn das jetzt sortiert? Muss

ich mich jetzt durch alle Seiten klicken?“

Filter- und Sortierungsfunktion: Filter- und Sortierungsfunktionen sind in der

mobilen Version eines Shops ebenso wichtig

wie in der Desktop-Version.

Verfügbarkeit: Die Anzeige der Verfügbarkeit wird von den

Nutzern positiv bewertet.


Good Practice: Filter- und Sortierungsfunktion eBay

Ergebnisse

51

Gut sichtbar: Die Filter- und

Sortierungsfunktionen

sind gut sichtbar und

sofort zu erkennen.

Weiterhin gibt es eine

Reiterauswahl für die

verschiedenen

Auktionsformate.

Schnellzugriff: Die Sortierungsfunktion

ist per aufklappbarem

Schnellauswahl-Menü

einfach und bequem

anzuwenden.

Statusanzeige: Das System zeigt dem

Nutzer an, dass der

ausgewählte Filter

angewendet wird.

Gefiltert (1): Der Nutzer sieht sofort,

dass der Filter aktiv ist.

Über dieselbe

Schaltfläche lassen sich

andere Filter hinzu-

oder abwählen.


Guidelines für die Produktübersichtsseite

Ergebnisse

52

Sowohl in der Kategorienauswahl als auch in der Produktübersicht sollten

keine Werbehinweise (z. B. „Unsere Empfehlung“, „Topseller“) angezeigt

werden.

Eine Filter- und Sortierungsfunktion ist auf dem Smartphone ebenso

wichtig wie auf dem Desktop.

Es sollten nur die wesentlichsten Artikelmerkmale dargestellt werden,

die nötig sind, um die Artikel differenzieren und sich für eines entscheiden

zu können. Generell wichtige Artikelmerkmale sind: Preis(!),

Produktabbildung, Artikelname, Verfügbarkeit, Bewertungen und sonstige

wichtige Unterscheidungsmerkmale.

No. 07

No. 08

No. 09



Produktdetailseite

53


Die Produktdetailseite: Entscheidend für Kaufabsicht

Ergebnisse

54

• Auf der Produktdetailseite wollen die Nutzer möglichst detaillierte

Informationen zu den Produkten erhalten, um sich ein genaues Bild

von dem Artikel und den Lieferbedingungen machen zu können.

• Genau wie bei einem nicht-mobilen Onlineshop ist eine gute

Produktdarstellung entscheidend für die Conversion Rate.

• Je mehr Informationen dabei transparent und übersichtlich auf den

ersten Blick sichtbar sind, desto besser.


Fehlende oder falsch platzierte Informationen in den Produktdetails (1/2)

Ergebnisse

55

Bestellbutton zu weit unten: Der Bestellbutton befindet sich sehr weit unten und

außerhalb des sofort sichtbaren Bereichs. Je nach

Bildschirmgröße muss 1-2 Bildschirmlängen gescrollt

werden, um zum Bestellbutton zu gelangen. Darüber

hinaus sind Preis und Bestellbutton räumlich voneinander

getrennt.

TP: „Ich habe erst gar nicht gesehen, wo ich hier

bestellen kann.“


Fehlende oder falsch platzierte Informationen in den Produktdetails (2/2)

Ergebnisse

56

Fehlende Versandinformationen: Den Nutzern fehlt die Anzeige der

Versandkosten. Die Versandinformationen sind

weiter unten zwar verfügbar, jedoch nicht

dort, wo sie es erwarten: In der Nähe des

Preises und des Bestellbuttons. Zumindest ein

Link zu den Versandkosten wird hier erwartet.

Nicht erwartungskonform:

Die Versandkosten sind zwar in der Nähe des

Preises platziert, allerdings ist der Schriftzug

„zzgl. Versandkosten“ nicht anklickbar, wie es

die Nutzer erwarten. Stattdessen können die

Details über das „i“ rechts daneben

aufgerufen werden. Das „i“ wird jedoch als

Trennungsstrich wahrgenommen.

Kurze Artikelbeschreibung:

Auch in der mobilen Version werden

detaillierte Artikelbeschreibungen erwartet.

Die Schrift sollte außerdem gut lesbar sein.


Die wesentlichen Produktinformationen auf einen Blick

Ergebnisse

57

Alles auf einen Blick: Die wichtigsten Informationen und

Funktionen sind auf einen Blick im sofort

sichtbaren Bereich platziert:

Produktabbildung, Preis, Lieferstatus,

Artikelname und Bewertungen… nur die Info

zu den Versandkosten fehlt.

Gute Priorisierung: Manchmal ist weniger mehr: Bei Kleidung

stehen die Produktabbildungen im

Mittelpunkt. Im sofort sichtbaren Bereich

werden die großen Produktabbildungen, der

Preis sowie die verfügbaren Farben

angezeigt. Sehr löblich: Ein Link zu den

Versandkosten steht direkt beim Preis.


Bei umfangreichen Produktdetails: Aufklappbare Informationen

Ergebnisse

58

Aufklappbare Infos: Bei umfangreichen Produktinformationen

kann es sinnvoll sein, nicht alle

Informationen auf einmal anzuzeigen, um

den Nutzer nicht mit Informationen „zu

erschlagen“ und die Scrolltiefe unnötig zu

erhöhen. Gut kenntlich gemacht, stellen

aufklappbare Informationen eine gute

Lösung dar, um dem Anspruch des Nutzers

nach vollem Informationsumfang in einem

mobilen Shop gerecht zu werden.


Den Nutzer optimal leiten: Vollbild-Zoom

Ergebnisse

59

Kein „Schließen“-Button: Es ist nicht auf den ersten Blick ersichtlich,

wie das Vollbild wieder geschlossen werden

kann.

TP: „Ähm… wie komme ich da wieder zurück?“

Mit „Schließen“-Button: Das große „X“ oben rechts stört nicht und ist

sofort verständlich.


Guidelines für die Produktdetailseite

Ergebnisse

60

Im sofort sichtbaren Bereich sollten die wichtigsten

Artikelinformationen dargestellt werden. Diese können je nach Produkt

schwanken. Generell wichtige Artikelmerkmale sind: Preis(!),

Produktabbildung, Artikelname, Verfügbarkeit, Versandkosten,

Bewertungen und sonstige wichtige Unterscheidungsmerkmale.

Bei Vollbild-Darstellungen (z. B. Zoom-Funktion) immer deutlich machen,

wie der Nutzer wieder zurückgelangen kann.

Der Bestellbutton sollte möglichst weit oben platziert werden,

idealerweise in der Nähe des Preises und den Versandinformationen. In

jedem Fall sollte er nach kurzem Scrollen sofort sichtbar sein.

No. 10

No. 11

No. 12



Warenkorb

61


Der Warenkorb: Kurz vor dem Kaufentscheid

Ergebnisse

62

• Auch wenn ein Nutzer einen Artikel dem Warenkorb hinzufügt, heißt

dies noch nicht, dass dieser auch tatsächlich bestellt wird. An dieser

Stelle des Bestellvorgangs ist es ganz besonders wichtig, das

Vertrauen in den Shop zu bekräftigen.

• Die Nutzer erwarten hier größtmögliche Transparenz bezüglich der

Artikel, den Gesamtkosten und den Lieferbedingungen.


Gelöschter Warenkorb

Ergebnisse

63

Warenkorb gelöscht: Der Warenkorb darf auf keinen Fall bei

Vorgängen wie Login, Registrierung, Auswahl

weiterer Artikel usw. gelöscht werden. Solche

Fehler frustrieren die Nutzer massiv. Weiterhin

sollten Merkzettel und Warenkorb über

mehrere Geräte persistent sein, so dass der

Nutzer direkt weiter einkaufen kann, wenn er

sich an einem anderen Gerät befindet und

einloggt.

TP: „Alles ist weg. Wenn ich jetzt mehrere

Artikel im Warenkorb gehabt hätte, wäre ich

weg gewesen.“


Hinweis: „Der Artikel wurde in den Warenkorb gelegt“

Ergebnisse

64

Kein Hinweis: Nach Hinzufügen eines Artikels in den

Warenkorb erfolgt kein Hinweis. Stattdessen

springt die Seite an den Anfang. Der Nutzer

muss selbst überprüfen, ob der Artikel

hinzugefügt wurde. Dies ist besonders

negativ, wenn mehrere Artikel im Warenkorb

liegen und sich der Nutzer unsicher ist, ob der

gewünschte Artikel hinzugefügt wurde.

Mit Hinweis: Besser: Der Nutzer wird direkt über das

erfolgreiche Hinzufügen des Artikels in den

Warenkorb informiert. Die Anzeige

verschwindet jedoch recht schnell und kann

bei Ablenkung übersehen werden, da sie nicht

sehr auffällig ist.


Good Practice: „Artikel im Warenkorb“-Hinweise Tchibo, H&M

Ergebnisse

65

Dialogfeld mit Bestätigung: Der Nutzer wird klar darüber informiert,

dass der Artikel erfolgreich dem Warenkorb

hinzugefügt wurde. Er erhält die Option

entweder weiter einzukaufen oder direkt

zum Warenkorb zu gehen.

Augenfällige Darstellung: Es wird deutlich aufgezeigt, welcher Artikel

dem Warenkorb hinzugefügt wurde. Durch

die Verdunkelung des Hintergrunds ist der

Hinweis kaum zu übersehen.


Good Practice: Warenkorb Saturn, H&M

Ergebnisse

66

Gute Übersicht: Der Warenkorb von Saturn bietet alle

Informationen auf einen Blick: Ein deutlich

ausgewiesener Gesamtpreis, die

Versandkosten, Bestelloptionen für die

Artikel (Anzahl erhöhen, Löschen,

Merkzettel), einen gut sichtbaren

Bestellbutton sowie der Hinweis, dass alle

Daten SSL verschlüsselt werden.

TP: „Ich finde es beruhigend, dass meine

Daten verschlüsselt werden.“

Immer zum Check-out bereit: Der Bestellbutton wird unten, zusammen

mit der Gesamtsumme, permanent

eingeblendet, so dass der Nutzer jederzeit

auf „Zur Kasse“ klicken kann, egal wo er

sich gerade im Warenkorb befindet.


Guidelines für den Warenkorb

Ergebnisse

67

Der Warenkorb darf auf keinen Fall bei Vorgängen wie Login,

Registrierung, Auswahl weiterer Artikel etc. gelöscht werden. Außerdem

sollten Merkzettel und Warenkorb persistent über mehrere Geräte sein.

Gesamtsumme, Versandkosten und Bestellbutton sollten immer gut sichtbar

sein.

Der Nutzer sollte immer eine deutliche Rückmeldung erhalten, wenn ein

Artikel dem Warenkorb hinzugefügt wurde.

No. 13

No. 14

No. 15



Bestellprozess

68


Der Bestellprozess: Endspurt für die Conversion Rate

Ergebnisse

69

• Gerade im mobilen Bereich kann der Check-out nicht schnell genug

gehen: Die Nutzer sind unterwegs und haben wenig Zeit oder

empfinden die geforderten Eingaben auf dem kleinen Display als

lästig.

• Die Devise lautet: Machen Sie es Ihren Kunden so einfach und

unkompliziert wie möglich!


Bestellprozess: Je schneller, desto besser

Ergebnisse

70

Anzeige der Bestellschritte: Eine Anzeige der Bestellschritte ist auch auf

mobilen Geräten von Vorteil und unterstützt

die Nutzer beim Bestellvorgang.

Jetzt kaufen: Vom Warenkorb zum Check-out: Nach dem

Warenkorb erhält der Nutzer zunächst die

Möglichkeit sich beim Shop anzumelden.

Direkt nach dem Einloggen wird dem Nutzer

der verführerische „Jetzt kaufen“-Button

angezeigt, so dass direkt bestellt werden

kann. Die Lieferanschrift kann ggf. weiter

unten geändert werden.


Good Practice: Von der Startseite zum Check-out (1/2) Joey‘s

Ergebnisse

71

Schritt 1: Keine komplizierte

Auswahl: Der Nutzer

wird direkt

aufgefordert, die

zuständige Filiale

auszuwählen. Die

Bühne regt inzwischen

den Appetit an.

Schritt 2: Die Location-Dienste

des Smartphones

werden genutzt, um

schnell und

unkompliziert die

zuständige Filiale zu

finden.

Schritt 3: Dank der Location-

Dienste wurde die

aktuelle Adresse

ermittelt und eine

passende Filiale

gewählt.

Schritt 4: Die Angebotsauswahl

beginnt simpel und

macht Lust auf Pizza.


Good Practice: Von der Startseite zum Check-out (2/2) Joey‘s

Ergebnisse

72

Schritt 5: Die Pizzaauswahl ist

einfach und

appetitanregend. Die

Buttons für die

Größenausauswahl

sind mit den Fingern

gut zu treffen.

Schritt 6: Die Pizza kann auf

Wunsch um weitere

Zutaten ergänzt

werden.

Schritt 7: Der Warenkorb ist

übersichtlich und

transparent gestaltet

und lädt zum

sofortigen Bestellen

ein.

Schritt 8: Die zuvor eingegebene

oder per Location-

Dienst ermittelte

Adresse ist bereits als

Lieferadresse

eingetragen: Nur noch

abschicken und die

Pizza genießen!


Payment-Provider beschleunigen Check-out

Ergebnisse

73

Kein Payment-Provider: Nicht jeder Nutzer will ein eigenes Konto für einen

Onlineshop einrichten oder es soll einfach nur schnell

gehen: Payment-Provider wie PayPal oder Amazon

Payments kommen bei den Nutzern gut an. Sie

beschleunigen den Check-out gerade bei

Erstbestellungen erheblich.

TP: „Ich wäre gerne bereit 0,50€ Aufpreis pro Pizza zu

zahlen, wenn ich mich dafür mit meinem Amazon-

Konto einloggen könnte.“


Guidelines für den Bestellprozess

Ergebnisse

74

Je schneller, einfacher und unkomplizierter der Bestellprozess, desto

besser!

Payment-Provider bieten eine gute Möglichkeit, den Bestellprozess zu

beschleunigen.

Eine Anzeige der Bestellschritte wirkt ermutigend und unterstützt die

Nutzer.

No. 16

No. 17

No. 18


Seite

Kontakt

75 Mobile Shopping

Seite

Ihr Ansprechpartner für diese Studie

Kontaktdaten

Ole Kleinert

Junior User Experience Consultant

+49 40 36166-7983

[email protected]

Standort Hamburg

Ludwig-Erhard-Straße 18

20459 Hamburg

+49 40 36166-7980

Themenblog: www.usabilityblog.de

Büro Göttingen

Planckstraße 23

37073 Göttingen

+49 551 49569-331

+49 551 49569-330

Website: www.eresult.de

Standort Frankfurt

Uhlandstraße 58

60314 Frankfurt/Main

+49 69 133965-24

76 Mobile Shopping

Seite

eResult GmbH E-Commerce Research & Consulting

Usability-Tests & User Experience-Beratung

Web Analytics & CRO

Marketing-Forschung & Beratung

● Maßgeschneiderte Lösungen seit 2000

● Nachhaltige Erfolgsoptimierung für

Web | Intranet | Mobile | Software | Consumer Electronics

● Beratung entlang des gesamten Entwicklungsprozesses

• Interdisziplinäres Team von 20 Mitarbeiter/-innen

• 3 Standorte: Göttingen, Hamburg, Frankfurt a.M.

• (mobiles) Usability-Lab

• Eigenes Online-Access Panel bonopolis.de

(> 60.000 Personen, D-A-CH)


Mobile Shopping 78

Seite

User Experience und Usability-Beratung von A-Z

● Anforderungsanalysen

● Benchmarking

● Expertenevaluationen

● Eyetracking

● Fokusgruppen

● Konzeption & Prototyping

● Online- & Panel-Befragungen

● Personas

● (Remote) Usability-Tests

● Tagebücher

● Web Analytics & CRO

● Zufriedenheitsanalysen


Mobile Shopping 79

Seite

Ausgewählte Referenzen zu unseren 200 zufriedenen Kunden zählen u.a.


Mobile Shopping 80

Seite

DAS deutschsprachige Usability-Portal redaktionell betreut durch eResult


Mobile Shopping 81

Seite

Warum also eResult?

● Wir sind erfahren: Als eine der ersten UX-Agenturen

Deutschlands bringen wir über 11 Jahre Knowhow mit.

● Hohe Spezialisierung: 100% unseres Umsatzes von

1.2 Mio Euro (2010) erzielen wir im Bereich Usability / User Experience.

● Problemorientierte Lösungen durch die Kombination von Forschung und

Beratung: Wir sind Problemlöser, Marktforscher und Berater zugleich!

● Hohe Qualität: Durch stetige Reflexion unserer Methoden und Arbeitsabläufe

sowie unseren wissenschaftlichen Beirat

● Zufriedene Mitarbeiter/-innen: 20% der Arbeitszeit stehen unseren

Mitarbeitern zur persönlichen, fachlichen Weiterentwicklung zu.


Mobile Shopping 82

Seite

Ihre Ansprechpartner


Standort Hamburg

Ludwig-Erhard-Straße 18

20459 Hamburg

+49 40 36 166-7980

Themenblog: www.usabilityblog.de

Büro Göttingen

Planckstr. 23

37073 Göttingen

+49 551 49 569-331

+49 551 49 569-330

Website: www.eresult.de

Standort Frankfurt

Uhlandstraße 58

60314 Frankfurt / Main

+49 69 133965-41

Thorsten Wilhelm

Geschäftsführender Gesellschafter & Gründer

+49 551 51 77-426

[email protected]

Martin Beschnitt

Managing Director

+49 40 36 166-7981

[email protected]

Mobile Shopping 83

studienband: shoppen mit dem smartphone - erkenntnisse, guidelines und good practices für mobile...

Business

mobile onlineshops und

verhaltens und

und nun

eyetracking und

mobile shoppen wurden

smartphone inkl

smartphone erledigen

smartphone im allgemeinen