Diese Grundlagenstudie der eResult GmbH beschäftigt sich mit dem Thema:
"Shoppen mit dem Smartphone: Erkenntnisse, Guidelines und Good Practices für mobile Onlineshops"
Sie gibt u. a. Antworten auf die folgenden Fragen:
•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, Navigation, Produktübersichtsseite, Produktdetailseite, Warenkorb, Bestellprozess)
•Was sind Good Practice-Beispiele für die verschiedenen Seitentypen?
•Welche verallgemeinerbaren, branchenübergreifenden Guidelines können aus dem Nutzerverhalten abgeleitet werden?
Der Studienband zeigt die wichtigsten Erkenntnisse, Guidelines und Good Practice-Beispiele.
5. Bedeutung & Ziele der Studie
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.“
Seite 5
Mobile Shopping
6. Bedeutung & Ziele der Studie
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 SmartphoneShopper 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.
Seite 6
Mobile Shopping
7. Bedeutung & Ziele der Studie
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!
Seite 7
Mobile Shopping
9. Studiensteckbrief
Fokus der Untersuchung
• 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?
Seite 9
Mobile Shopping
10. Studiensteckbrief
Methodisches Vorgehen
Quantitative Vorbefragung
In 2 Vorbefragungen wurde zunächst das allgemeine Nutzungsverhalten von deutschen Smartphone-Besitzern erfragt. Darauf aufbauend 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.
Seite 10
Mobile Shopping
11. Studiensteckbrief
Mehrstufiges Untersuchungs-Design
• 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.
Seite 11
Mobile Shopping
14. Management Summary
Gleicher Anspruch wie an die Desktop-Version
• 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.
Seite 14
Mobile Shopping
15. Management Summary
Gute Übersicht und Transparenz enorm wichtig
• 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.
Seite 15
Mobile Shopping
16. Management Summary
Von der Startseite bis zum Check-out: Je schneller, desto
besser!
• 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.
Seite 16
Mobile Shopping
18. Alle Guidelines auf einen Blick
Guidelines für die Startseite
No. 01
Im sofort sichtbaren Bereich sollte max. 1 Banner (Werbung, Angebot,
Produktempfehlung) platziert werden.
No. 02
Je nach eigener Nutzergruppe und Produktsortiment sollte entweder der
Einstieg über eine Kategorienauswahl oder eine Suchfunktion priorisiert
werden.
No. 03
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.
Seite 18
Mobile Shopping
19. Alle Guidelines auf einen Blick
Guidelines für die Navigation
No. 04
Das Logo sollte groß und eindeutig identifizierbar sein sowie als Link zur
Startseite fungieren (oder als Menü, gekennzeichnet durch einen Pfeil).
No. 05
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. 06
Wichtige Funktionen müssen über die Hauptnavigation schnell erreichbar
sein (Startseite, Suchfunktion, Kategorienauswahl, Warenkorb, Merkzettel,
Login).
Seite 19
Mobile Shopping
20. Alle Guidelines auf einen Blick
Guidelines für die Produktübersichtsseite
No. 07
No. 08
No. 09
Seite 20
Sowohl in der Kategorienauswahl als auch in der Produktübersicht sollten
keine Werbehinweise (z. B. „Unsere Empfehlung“, „Topseller“) angezeigt
werden.
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.
Eine Filter- und Sortierungsfunktion ist auf dem Smartphone ebenso
wichtig wie auf dem Desktop.
Mobile Shopping
21. Alle Guidelines auf einen Blick
Guidelines für die Produktdetailseite
No. 10
No. 11
No. 12
Seite 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.
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.
Bei Vollbild-Darstellungen (z. B. Zoom-Funktion) immer deutlich machen,
wie der Nutzer wieder zurückgelangen kann.
Mobile Shopping
22. Alle Guidelines auf einen Blick
Guidelines für den Warenkorb
No. 13
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.
No. 14
Der Nutzer sollte immer eine deutliche Rückmeldung erhalten, wenn ein
Artikel dem Warenkorb hinzugefügt wurde.
No. 15
Gesamtsumme, Versandkosten und Bestellbutton sollten immer gut sichtbar
sein.
Seite 22
Mobile Shopping
23. Alle Guidelines auf einen Blick
Guidelines für den Bestellprozess
No. 16
Je schneller, einfacher und unkomplizierter der Bestellprozess, desto
besser!
No. 17
Eine Anzeige der Bestellschritte wirkt ermutigend und unterstützt die
Nutzer.
No. 18
Payment-Provider bieten eine gute Möglichkeit, den Bestellprozess zu
beschleunigen.
Seite 23
Mobile Shopping
25. Ergebnisse
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
Seite 25
Mobile Shopping
27. Ergebnisse
Erwartungen & Anforderungen an einen mobilen 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).
Mobiler
Onlineshop
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.
Seite 27
Mobile Shopping
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 InfoQuelle 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.
29. Ergebnisse
Die Startseite: Entscheidend für den Ersteindruck
• 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.
Seite 29
Mobile Shopping
30. Ergebnisse
Zu viele Banner verhindern Einstieg in das Sortiment
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.“
Seite 30
Mobile Shopping
31. Ergebnisse
Ansprechende Bühne auch auf dem Smartphone wichtig
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.
Seite 31
Mobile Shopping
32. Ergebnisse
Good Practice: Bühne & Sortimentseinstieg
H&M
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.“
Seite 32
Mobile Shopping
33. Ergebnisse
Was ist wichtiger: Suchfunktion oder Kategorienauswahl?
(1/2)
• 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?).
Seite 33
Mobile Shopping
34. Ergebnisse
Was ist wichtiger: Suchfunktion oder Kategorienauswahl?
(2/2)
• 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.
Seite 34
Mobile Shopping
35. Ergebnisse
Good Practice: Sortimentseinstieg über Kategorienauswahl
Tchibo, H&M
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.
Seite 35
Mobile Shopping
36. Ergebnisse
Good Practice: Sortimentseinstieg über Suchfunktion
Amazon, Otto
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.
Seite 36
Mobile Shopping
37. Ergebnisse
App oder mobile Website?
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 AppStore.
Seite 37
Mobile Shopping
38. Ergebnisse
Guidelines für die Startseite
No. 01
Im sofort sichtbaren Bereich sollte max. 1 Banner (Werbung, Angebot,
Produktempfehlung) platziert werden.
No. 02
Je nach eigener Nutzergruppe und Produktsortiment sollte entweder der
Einstieg über eine Kategorienauswahl oder eine Suchfunktion priorisiert
werden.
No. 03
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.
Seite 38
Mobile Shopping
40. Ergebnisse
Die Navigation: Wichtig für eine gute User Experience
• 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.
Seite 40
Mobile Shopping
41. Ergebnisse
Navigation auf engstem Raum: Keine Kompromisse bei der
Usability
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.
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.
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.
Seite 41
Mobile Shopping
42. Ergebnisse
Erwartungskonforme Usability
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.
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.
Seite 42
Mobile Shopping
43. Ergebnisse
Good Practice: Gute Hauptnavigation
H&M
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.
Seite 43
Mobile Shopping
44. Ergebnisse
Guidelines für die Navigation
No. 04
Das Logo sollte groß und eindeutig identifizierbar sein sowie als Link zur
Startseite fungieren (oder als Menü, gekennzeichnet durch einen Pfeil).
No. 05
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. 06
Wichtige Funktionen müssen über die Hauptnavigation schnell erreichbar
sein (Startseite, Suchfunktion, Kategorienauswahl, Warenkorb, Merkzettel,
Login).
Seite 44
Mobile Shopping
46. Ergebnisse
Die Produktübersichtsseite: Auswahl eines Artikels
• 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.
Seite 46
Mobile Shopping
47. Ergebnisse
Störende Werbehinweise & überflüssige Produktdetails
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.
Seite 47
Mobile Shopping
48. Ergebnisse
Kategorienauswahl & Produktübersicht
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.
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.
Seite 48
Mobile Shopping
49. Ergebnisse
Good Practice: Gute Produktübersicht
Tchibo, H&M
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.
Seite 49
Mobile Shopping
50. Ergebnisse
Filter- und Sortierungsfunktion
Keine Filter- und
Sortierungsfunktionen:
Für das Suchergebnis werden weder Filternoch 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.
Seite 50
Mobile Shopping
51. Ergebnisse
Good Practice: Filter- und Sortierungsfunktion
eBay
Gut sichtbar:
Die Filter- und
Sortierungsfunktionen
sind gut sichtbar und
sofort zu erkennen.
Weiterhin gibt es eine
Reiterauswahl für die
verschiedenen
Auktionsformate.
Seite 51
Schnellzugriff:
Die Sortierungsfunktion
ist per aufklappbarem
Schnellauswahl-Menü
einfach und bequem
anzuwenden.
Mobile Shopping
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 hinzuoder abwählen.
52. Ergebnisse
Guidelines für die Produktübersichtsseite
No. 07
No. 08
No. 09
Seite 52
Sowohl in der Kategorienauswahl als auch in der Produktübersicht sollten
keine Werbehinweise (z. B. „Unsere Empfehlung“, „Topseller“) angezeigt
werden.
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.
Eine Filter- und Sortierungsfunktion ist auf dem Smartphone ebenso
wichtig wie auf dem Desktop.
Mobile Shopping
54. Ergebnisse
Die Produktdetailseite: Entscheidend für Kaufabsicht
• 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.
Seite 54
Mobile Shopping
55. Ergebnisse
Fehlende oder falsch platzierte Informationen in den
Produktdetails (1/2)
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.“
Seite 55
Mobile Shopping
56. Ergebnisse
Fehlende oder falsch platzierte Informationen in den
Produktdetails (2/2)
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.
Seite 56
Mobile Shopping
57. Ergebnisse
Die wesentlichen Produktinformationen auf einen Blick
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.
Seite 57
Mobile Shopping
58. Ergebnisse
Bei umfangreichen Produktdetails: Aufklappbare Informationen
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.
Seite 58
Mobile Shopping
59. Ergebnisse
Den Nutzer optimal leiten: Vollbild-Zoom
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.
Seite 59
Mobile Shopping
60. Ergebnisse
Guidelines für die Produktdetailseite
No. 10
No. 11
No. 12
Seite 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.
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.
Bei Vollbild-Darstellungen (z. B. Zoom-Funktion) immer deutlich machen,
wie der Nutzer wieder zurückgelangen kann.
Mobile Shopping
62. Ergebnisse
Der Warenkorb: Kurz vor dem Kaufentscheid
• 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.
Seite 62
Mobile Shopping
63. Ergebnisse
Gelöschter Warenkorb
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.“
Seite 63
Mobile Shopping
64. Ergebnisse
Hinweis: „Der Artikel wurde in den Warenkorb gelegt“
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.
Seite 64
Mobile Shopping
65. Ergebnisse
Good Practice: „Artikel im Warenkorb“-Hinweise
Tchibo, H&M
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.
Seite 65
Mobile Shopping
66. Ergebnisse
Good Practice: Warenkorb
Saturn, H&M
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.
Seite 66
Mobile Shopping
67. Ergebnisse
Guidelines für den Warenkorb
No. 13
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.
No. 14
Der Nutzer sollte immer eine deutliche Rückmeldung erhalten, wenn ein
Artikel dem Warenkorb hinzugefügt wurde.
No. 15
Gesamtsumme, Versandkosten und Bestellbutton sollten immer gut sichtbar
sein.
Seite 67
Mobile Shopping
69. Ergebnisse
Der Bestellprozess: Endspurt für die Conversion Rate
• 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!
Seite 69
Mobile Shopping
70. Ergebnisse
Bestellprozess: Je schneller, desto besser
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.
Seite 70
Mobile Shopping
71. Ergebnisse
Good Practice: Von der Startseite zum Check-out (1/2)
Joey‘s
Schritt 1:
Keine komplizierte
Auswahl: Der Nutzer
wird direkt
aufgefordert, die
zuständige Filiale
auszuwählen. Die
Bühne regt inzwischen
den Appetit an.
Seite 71
Schritt 2:
Schritt 3:
Die Location-Dienste
des Smartphones
werden genutzt, um
schnell und
unkompliziert die
zuständige Filiale zu
finden.
Dank der LocationDienste wurde die
aktuelle Adresse
ermittelt und eine
passende Filiale
gewählt.
Mobile Shopping
Schritt 4:
Die Angebotsauswahl
beginnt simpel und
macht Lust auf Pizza.
72. Ergebnisse
Good Practice: Von der Startseite zum Check-out (2/2)
Joey‘s
Schritt 5:
Die Pizzaauswahl ist
einfach und
appetitanregend. Die
Buttons für die
Größenausauswahl
sind mit den Fingern
gut zu treffen.
Seite 72
Schritt 6:
Schritt 7:
Die Pizza kann auf
Wunsch um weitere
Zutaten ergänzt
werden.
Der Warenkorb ist
übersichtlich und
transparent gestaltet
und lädt zum
sofortigen Bestellen
ein.
Mobile Shopping
Schritt 8:
Die zuvor eingegebene
oder per LocationDienst ermittelte
Adresse ist bereits als
Lieferadresse
eingetragen: Nur noch
abschicken und die
Pizza genießen!
73. Ergebnisse
Payment-Provider beschleunigen Check-out
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 AmazonKonto einloggen könnte.“
Seite 73
Mobile Shopping
74. Ergebnisse
Guidelines für den Bestellprozess
No. 16
Je schneller, einfacher und unkomplizierter der Bestellprozess, desto
besser!
No. 17
Eine Anzeige der Bestellschritte wirkt ermutigend und unterstützt die
Nutzer.
No. 18
Payment-Provider bieten eine gute Möglichkeit, den Bestellprozess zu
beschleunigen.
Seite 74
Mobile Shopping
82. Unternehmensvorstellung
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.
Seite 82
Mobile Shopping