SlideShare ist ein Scribd-Unternehmen logo
1 von 83
Downloaden Sie, um offline zu lesen
Studienband
Mobile Shopping

Erkenntnisse, Good Practices und Guidelines
Frühjahr 2014

© eResult GmbH – Results for Your E-Business
(www.eresult.de)
Nächstes Kapitel

Inhaltsverzeichnis

Seite 2

Mobile Shopping
Inhaltsverzeichnis

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

Seite 3

Mobile Shopping
Nächstes Kapitel

Bedeutung & Ziele der Studie

Seite 4

Mobile Shopping
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
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
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
Nächstes Kapitel

Studiensteckbrief

Seite 8

Mobile Shopping
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
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
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
Studiensteckbrief

Untersuchte mobile Shops

Seite 12

Mobile Shopping
Nächstes Kapitel

Management Summary

Seite 13

Mobile Shopping
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
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
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
Nächstes Kapitel

Für Eilige: Alle identifizierten
Guidelines auf einen Blick

Seite 17

Mobile Shopping
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
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
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
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
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
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
Nächstes Kapitel

Ergebnisse

Seite 24

Mobile Shopping
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
Nächstes Kapitel

Erwartungen & Anforderungen

Seite 26

Mobile Shopping
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.
Nächstes Kapitel

Startseite

Seite 28

Mobile Shopping
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
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
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
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
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
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
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
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
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
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
Nächstes Kapitel

Navigation

Seite 39

Mobile Shopping
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
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
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
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
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
Nächstes Kapitel

Produktübersichtsseite

Seite 45

Mobile Shopping
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
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
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
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
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
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.
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
Nächstes Kapitel

Produktdetailseite

Seite 53

Mobile Shopping
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
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
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
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
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
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
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
Nächstes Kapitel

Warenkorb

Seite 61

Mobile Shopping
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
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
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
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
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
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
Nächstes Kapitel

Bestellprozess

Seite 68

Mobile Shopping
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
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
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.
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!
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
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
Nächstes Kapitel

Kontakt

Seite 75

Mobile Shopping
Kontaktdaten

Ihr Ansprechpartner für diese Studie
Ole Kleinert
Junior User Experience Consultant
 +49 40 36166-7983
 ole.kleinert@eresult.de

Büro Göttingen

Standort Hamburg

Standort Frankfurt

Planckstraße 23

Ludwig-Erhard-Straße 18

Uhlandstraße 58

37073 Göttingen

20459 Hamburg

60314 Frankfurt/Main

 +49 551 49569-331





+49 40 36166-7980

+49 551 49569-330

Website: www.eresult.de

Seite 76

Mobile Shopping

Themenblog: www.usabilityblog.de



+49 69 133965-24
Unternehmensvorstellung
eResult GmbH

© eResult GmbH – Ihr User Experience-Partner
(www.eresult.de)‫‏‬
Unternehmensvorstellung

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)

Seite 78

Mobile Shopping
Unternehmensvorstellung

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
Seite 79

Mobile Shopping
Unternehmensvorstellung

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

Seite 80

Mobile Shopping
Unternehmensvorstellung

DAS deutschsprachige Usability-Portal
redaktionell betreut durch eResult

Seite 81

Mobile Shopping
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
Unternehmensvorstellung

Ihre Ansprechpartner
Thorsten Wilhelm
Geschäftsführender Gesellschafter & Gründer
 +49 551 51 77-426
 thorsten.wilhelm@eresult.de

Martin Beschnitt
Managing Director
 +49 40 36 166-7981
 martin.beschnitt@eresult.de

Büro Göttingen

Standort Hamburg

Standort Frankfurt

Planckstr. 23

Ludwig-Erhard-Straße 18

Uhlandstraße 58

37073 Göttingen

20459 Hamburg

60314 Frankfurt / Main

 +49 551 49 569-331

 +49 40 36 166-7980

 +49 69 133965-41



+49 551 49 569-330

Website: www.eresult.de

Seite 83

Mobile Shopping

Themenblog: www.usabilityblog.de

Weitere ähnliche Inhalte

Ähnlich wie Studienband: Shoppen mit dem Smartphone - Erkenntnisse, Guidelines und Good Practices für mobile Onlineshops

Fallstudien zur Anforderungsanalyse mit dem KANO-Modell
Fallstudien zur Anforderungsanalyse mit dem KANO-ModellFallstudien zur Anforderungsanalyse mit dem KANO-Modell
Fallstudien zur Anforderungsanalyse mit dem KANO-ModelleResult_GmbH
 
Mobile Strategien und systematische Einführung in Unternehmen - Hagen Sexauer
Mobile Strategien und systematische Einführung in Unternehmen - Hagen SexauerMobile Strategien und systematische Einführung in Unternehmen - Hagen Sexauer
Mobile Strategien und systematische Einführung in Unternehmen - Hagen SexauerHagen Sexauer
 
Generation digital – Was der digitale Automobilkunde heute von Herstellern un...
Generation digital – Was der digitale Automobilkunde heute von Herstellern un...Generation digital – Was der digitale Automobilkunde heute von Herstellern un...
Generation digital – Was der digitale Automobilkunde heute von Herstellern un...Iskander Business Partner GmbH
 
Fallstudie uxm final
Fallstudie uxm finalFallstudie uxm final
Fallstudie uxm finaleResult_GmbH
 
ECC Handel Mobile Commerce in Deutschland 2012
ECC Handel Mobile Commerce in Deutschland 2012ECC Handel Mobile Commerce in Deutschland 2012
ECC Handel Mobile Commerce in Deutschland 2012Ad6Media Germany
 
Intelligenter Handel(n): Handlungsempfehlungen für den E-Commerce Erfolg in 2020
Intelligenter Handel(n): Handlungsempfehlungen für den E-Commerce Erfolg in 2020Intelligenter Handel(n): Handlungsempfehlungen für den E-Commerce Erfolg in 2020
Intelligenter Handel(n): Handlungsempfehlungen für den E-Commerce Erfolg in 2020Nosto
 
Mobile Choice-based Conjoint – Eine Vision für die Zukunft oder heute schon R...
Mobile Choice-based Conjoint – Eine Vision für die Zukunft oder heute schon R...Mobile Choice-based Conjoint – Eine Vision für die Zukunft oder heute schon R...
Mobile Choice-based Conjoint – Eine Vision für die Zukunft oder heute schon R...SKIM
 
Online-Handel 2010 - Fakten, Trends und Prognosen
Online-Handel 2010 - Fakten, Trends und PrognosenOnline-Handel 2010 - Fakten, Trends und Prognosen
Online-Handel 2010 - Fakten, Trends und PrognosenTrusted Shops
 
Micro UX. Wie Produkte wirklich Spaß machen (2014)
Micro UX. Wie Produkte wirklich Spaß machen (2014)Micro UX. Wie Produkte wirklich Spaß machen (2014)
Micro UX. Wie Produkte wirklich Spaß machen (2014)denkwerk GmbH
 
Fallstudie UX Review found4you.de eResult GmbH
Fallstudie UX Review found4you.de eResult GmbHFallstudie UX Review found4you.de eResult GmbH
Fallstudie UX Review found4you.de eResult GmbHeResult_GmbH
 
Gastreferat Bachelor Mobile Systems: Exkurs Mobile Commerce
Gastreferat Bachelor Mobile Systems: Exkurs Mobile CommerceGastreferat Bachelor Mobile Systems: Exkurs Mobile Commerce
Gastreferat Bachelor Mobile Systems: Exkurs Mobile CommerceDavide Cortese
 
Praxiswissen Mobile Commerce Teil 1: Anhand von Daten die richtigen Entscheid...
Praxiswissen Mobile Commerce Teil 1: Anhand von Daten die richtigen Entscheid...Praxiswissen Mobile Commerce Teil 1: Anhand von Daten die richtigen Entscheid...
Praxiswissen Mobile Commerce Teil 1: Anhand von Daten die richtigen Entscheid...FLYACTS GmbH
 
10 Tipps für mehr Web Shop Umsatz
10 Tipps für mehr Web Shop Umsatz10 Tipps für mehr Web Shop Umsatz
10 Tipps für mehr Web Shop Umsatzspicedigital
 
Leseprobe eStrategy Magazin Ausgabe 01 / 2016
Leseprobe eStrategy Magazin Ausgabe 01 / 2016Leseprobe eStrategy Magazin Ausgabe 01 / 2016
Leseprobe eStrategy Magazin Ausgabe 01 / 2016TechDivision GmbH
 
Die gröbsten Fehler eines Online-Shops
Die gröbsten Fehler eines Online-ShopsDie gröbsten Fehler eines Online-Shops
Die gröbsten Fehler eines Online-ShopsFilipe Felix
 
App-Marketing am Beispiel einer Fundbüro-App
App-Marketing am Beispiel einer Fundbüro-AppApp-Marketing am Beispiel einer Fundbüro-App
App-Marketing am Beispiel einer Fundbüro-AppFLYACTS GmbH
 
App-Retention Mobile-CRM Kundenbindung im Kontext Mobile Olaf Grüger Go eComm...
App-Retention Mobile-CRM Kundenbindung im Kontext Mobile Olaf Grüger Go eComm...App-Retention Mobile-CRM Kundenbindung im Kontext Mobile Olaf Grüger Go eComm...
App-Retention Mobile-CRM Kundenbindung im Kontext Mobile Olaf Grüger Go eComm...Olaf Grueger
 
Fallstudie Fokusgruppen eResult GmbH
Fallstudie Fokusgruppen eResult GmbHFallstudie Fokusgruppen eResult GmbH
Fallstudie Fokusgruppen eResult GmbHeResult_GmbH
 
Enterprise Feedback Management Guide: Eine Anleitung zum Erfolg
Enterprise Feedback Management Guide: Eine Anleitung zum ErfolgEnterprise Feedback Management Guide: Eine Anleitung zum Erfolg
Enterprise Feedback Management Guide: Eine Anleitung zum ErfolgFeedbackstr
 

Ähnlich wie Studienband: Shoppen mit dem Smartphone - Erkenntnisse, Guidelines und Good Practices für mobile Onlineshops (20)

Fallstudien zur Anforderungsanalyse mit dem KANO-Modell
Fallstudien zur Anforderungsanalyse mit dem KANO-ModellFallstudien zur Anforderungsanalyse mit dem KANO-Modell
Fallstudien zur Anforderungsanalyse mit dem KANO-Modell
 
Mobile Strategien und systematische Einführung in Unternehmen - Hagen Sexauer
Mobile Strategien und systematische Einführung in Unternehmen - Hagen SexauerMobile Strategien und systematische Einführung in Unternehmen - Hagen Sexauer
Mobile Strategien und systematische Einführung in Unternehmen - Hagen Sexauer
 
Generation digital – Was der digitale Automobilkunde heute von Herstellern un...
Generation digital – Was der digitale Automobilkunde heute von Herstellern un...Generation digital – Was der digitale Automobilkunde heute von Herstellern un...
Generation digital – Was der digitale Automobilkunde heute von Herstellern un...
 
Fallstudie uxm final
Fallstudie uxm finalFallstudie uxm final
Fallstudie uxm final
 
ECC Handel Mobile Commerce in Deutschland 2012
ECC Handel Mobile Commerce in Deutschland 2012ECC Handel Mobile Commerce in Deutschland 2012
ECC Handel Mobile Commerce in Deutschland 2012
 
Intelligenter Handel(n): Handlungsempfehlungen für den E-Commerce Erfolg in 2020
Intelligenter Handel(n): Handlungsempfehlungen für den E-Commerce Erfolg in 2020Intelligenter Handel(n): Handlungsempfehlungen für den E-Commerce Erfolg in 2020
Intelligenter Handel(n): Handlungsempfehlungen für den E-Commerce Erfolg in 2020
 
Usability Monitor 2008
Usability Monitor 2008Usability Monitor 2008
Usability Monitor 2008
 
Mobile Choice-based Conjoint – Eine Vision für die Zukunft oder heute schon R...
Mobile Choice-based Conjoint – Eine Vision für die Zukunft oder heute schon R...Mobile Choice-based Conjoint – Eine Vision für die Zukunft oder heute schon R...
Mobile Choice-based Conjoint – Eine Vision für die Zukunft oder heute schon R...
 
Online-Handel 2010 - Fakten, Trends und Prognosen
Online-Handel 2010 - Fakten, Trends und PrognosenOnline-Handel 2010 - Fakten, Trends und Prognosen
Online-Handel 2010 - Fakten, Trends und Prognosen
 
Micro UX. Wie Produkte wirklich Spaß machen (2014)
Micro UX. Wie Produkte wirklich Spaß machen (2014)Micro UX. Wie Produkte wirklich Spaß machen (2014)
Micro UX. Wie Produkte wirklich Spaß machen (2014)
 
Fallstudie UX Review found4you.de eResult GmbH
Fallstudie UX Review found4you.de eResult GmbHFallstudie UX Review found4you.de eResult GmbH
Fallstudie UX Review found4you.de eResult GmbH
 
Gastreferat Bachelor Mobile Systems: Exkurs Mobile Commerce
Gastreferat Bachelor Mobile Systems: Exkurs Mobile CommerceGastreferat Bachelor Mobile Systems: Exkurs Mobile Commerce
Gastreferat Bachelor Mobile Systems: Exkurs Mobile Commerce
 
Praxiswissen Mobile Commerce Teil 1: Anhand von Daten die richtigen Entscheid...
Praxiswissen Mobile Commerce Teil 1: Anhand von Daten die richtigen Entscheid...Praxiswissen Mobile Commerce Teil 1: Anhand von Daten die richtigen Entscheid...
Praxiswissen Mobile Commerce Teil 1: Anhand von Daten die richtigen Entscheid...
 
10 Tipps für mehr Web Shop Umsatz
10 Tipps für mehr Web Shop Umsatz10 Tipps für mehr Web Shop Umsatz
10 Tipps für mehr Web Shop Umsatz
 
Leseprobe eStrategy Magazin Ausgabe 01 / 2016
Leseprobe eStrategy Magazin Ausgabe 01 / 2016Leseprobe eStrategy Magazin Ausgabe 01 / 2016
Leseprobe eStrategy Magazin Ausgabe 01 / 2016
 
Die gröbsten Fehler eines Online-Shops
Die gröbsten Fehler eines Online-ShopsDie gröbsten Fehler eines Online-Shops
Die gröbsten Fehler eines Online-Shops
 
App-Marketing am Beispiel einer Fundbüro-App
App-Marketing am Beispiel einer Fundbüro-AppApp-Marketing am Beispiel einer Fundbüro-App
App-Marketing am Beispiel einer Fundbüro-App
 
App-Retention Mobile-CRM Kundenbindung im Kontext Mobile Olaf Grüger Go eComm...
App-Retention Mobile-CRM Kundenbindung im Kontext Mobile Olaf Grüger Go eComm...App-Retention Mobile-CRM Kundenbindung im Kontext Mobile Olaf Grüger Go eComm...
App-Retention Mobile-CRM Kundenbindung im Kontext Mobile Olaf Grüger Go eComm...
 
Fallstudie Fokusgruppen eResult GmbH
Fallstudie Fokusgruppen eResult GmbHFallstudie Fokusgruppen eResult GmbH
Fallstudie Fokusgruppen eResult GmbH
 
Enterprise Feedback Management Guide: Eine Anleitung zum Erfolg
Enterprise Feedback Management Guide: Eine Anleitung zum ErfolgEnterprise Feedback Management Guide: Eine Anleitung zum Erfolg
Enterprise Feedback Management Guide: Eine Anleitung zum Erfolg
 

Mehr von eResult_GmbH

2018 Talk UX Onboarding @uxcgn
2018 Talk UX Onboarding @uxcgn 2018 Talk UX Onboarding @uxcgn
2018 Talk UX Onboarding @uxcgn eResult_GmbH
 
Personas slideshow-eresult-08-2018-final
Personas slideshow-eresult-08-2018-finalPersonas slideshow-eresult-08-2018-final
Personas slideshow-eresult-08-2018-finaleResult_GmbH
 
Conversational ux eresult-kundenevent-muenchen_10-2017
Conversational ux eresult-kundenevent-muenchen_10-2017Conversational ux eresult-kundenevent-muenchen_10-2017
Conversational ux eresult-kundenevent-muenchen_10-2017eResult_GmbH
 
Fallstudie ux-monitor-final-2018
Fallstudie ux-monitor-final-2018Fallstudie ux-monitor-final-2018
Fallstudie ux-monitor-final-2018eResult_GmbH
 
Eresult user-feedback-days-2017
Eresult user-feedback-days-2017Eresult user-feedback-days-2017
Eresult user-feedback-days-2017eResult_GmbH
 
Smart Home = Smart Journey? Qualität von Vermarktungsstrategien im Web
Smart Home = Smart Journey? Qualität von Vermarktungsstrategien im WebSmart Home = Smart Journey? Qualität von Vermarktungsstrategien im Web
Smart Home = Smart Journey? Qualität von Vermarktungsstrategien im WebeResult_GmbH
 
Fallstudie eResult User Experience Review - NOZ
Fallstudie eResult User Experience Review - NOZFallstudie eResult User Experience Review - NOZ
Fallstudie eResult User Experience Review - NOZeResult_GmbH
 
User Feedback Days
User Feedback Days User Feedback Days
User Feedback Days eResult_GmbH
 
eResult Seminar- und Trainingsprgramm 2016
eResult Seminar- und Trainingsprgramm 2016eResult Seminar- und Trainingsprgramm 2016
eResult Seminar- und Trainingsprgramm 2016eResult_GmbH
 
Andere Länder, andere User Experience
Andere Länder, andere User ExperienceAndere Länder, andere User Experience
Andere Länder, andere User ExperienceeResult_GmbH
 
Die eResult Werte - das ist uns wichtig
Die eResult Werte - das ist uns wichtigDie eResult Werte - das ist uns wichtig
Die eResult Werte - das ist uns wichtigeResult_GmbH
 
Fallstudie Nutzertagebuch Fitbit
Fallstudie Nutzertagebuch FitbitFallstudie Nutzertagebuch Fitbit
Fallstudie Nutzertagebuch FitbiteResult_GmbH
 
Vorteile von Kundenblogs anhand der Fallstudie Baur-Kundenblog
Vorteile von Kundenblogs anhand der Fallstudie Baur-KundenblogVorteile von Kundenblogs anhand der Fallstudie Baur-Kundenblog
Vorteile von Kundenblogs anhand der Fallstudie Baur-KundenblogeResult_GmbH
 
eResult Panel: Bonopolis.de - Beispiele und Fallstudien
eResult Panel: Bonopolis.de - Beispiele und FallstudieneResult Panel: Bonopolis.de - Beispiele und Fallstudien
eResult Panel: Bonopolis.de - Beispiele und FallstudieneResult_GmbH
 
Automotive UX bei eResult: Testmethoden & Leistungen
Automotive UX bei eResult: Testmethoden & LeistungenAutomotive UX bei eResult: Testmethoden & Leistungen
Automotive UX bei eResult: Testmethoden & LeistungeneResult_GmbH
 
eResult Case Study: Personas Für Deutschland
eResult Case Study: Personas Für DeutschlandeResult Case Study: Personas Für Deutschland
eResult Case Study: Personas Für DeutschlandeResult_GmbH
 
Fallstudie Intranet-ReLaunch eResult
Fallstudie Intranet-ReLaunch eResultFallstudie Intranet-ReLaunch eResult
Fallstudie Intranet-ReLaunch eResulteResult_GmbH
 
Ethnographische Studien und Kontextinterviews bei eResult
Ethnographische Studien und Kontextinterviews bei eResultEthnographische Studien und Kontextinterviews bei eResult
Ethnographische Studien und Kontextinterviews bei eResulteResult_GmbH
 
Corporate Travel Forum: UserExperience & EyeTracking
Corporate Travel Forum: UserExperience & EyeTrackingCorporate Travel Forum: UserExperience & EyeTracking
Corporate Travel Forum: UserExperience & EyeTrackingeResult_GmbH
 

Mehr von eResult_GmbH (20)

2018 Talk UX Onboarding @uxcgn
2018 Talk UX Onboarding @uxcgn 2018 Talk UX Onboarding @uxcgn
2018 Talk UX Onboarding @uxcgn
 
Personas slideshow-eresult-08-2018-final
Personas slideshow-eresult-08-2018-finalPersonas slideshow-eresult-08-2018-final
Personas slideshow-eresult-08-2018-final
 
Conversational ux eresult-kundenevent-muenchen_10-2017
Conversational ux eresult-kundenevent-muenchen_10-2017Conversational ux eresult-kundenevent-muenchen_10-2017
Conversational ux eresult-kundenevent-muenchen_10-2017
 
Fallstudie ux-monitor-final-2018
Fallstudie ux-monitor-final-2018Fallstudie ux-monitor-final-2018
Fallstudie ux-monitor-final-2018
 
Eresult user-feedback-days-2017
Eresult user-feedback-days-2017Eresult user-feedback-days-2017
Eresult user-feedback-days-2017
 
Onboarding
OnboardingOnboarding
Onboarding
 
Smart Home = Smart Journey? Qualität von Vermarktungsstrategien im Web
Smart Home = Smart Journey? Qualität von Vermarktungsstrategien im WebSmart Home = Smart Journey? Qualität von Vermarktungsstrategien im Web
Smart Home = Smart Journey? Qualität von Vermarktungsstrategien im Web
 
Fallstudie eResult User Experience Review - NOZ
Fallstudie eResult User Experience Review - NOZFallstudie eResult User Experience Review - NOZ
Fallstudie eResult User Experience Review - NOZ
 
User Feedback Days
User Feedback Days User Feedback Days
User Feedback Days
 
eResult Seminar- und Trainingsprgramm 2016
eResult Seminar- und Trainingsprgramm 2016eResult Seminar- und Trainingsprgramm 2016
eResult Seminar- und Trainingsprgramm 2016
 
Andere Länder, andere User Experience
Andere Länder, andere User ExperienceAndere Länder, andere User Experience
Andere Länder, andere User Experience
 
Die eResult Werte - das ist uns wichtig
Die eResult Werte - das ist uns wichtigDie eResult Werte - das ist uns wichtig
Die eResult Werte - das ist uns wichtig
 
Fallstudie Nutzertagebuch Fitbit
Fallstudie Nutzertagebuch FitbitFallstudie Nutzertagebuch Fitbit
Fallstudie Nutzertagebuch Fitbit
 
Vorteile von Kundenblogs anhand der Fallstudie Baur-Kundenblog
Vorteile von Kundenblogs anhand der Fallstudie Baur-KundenblogVorteile von Kundenblogs anhand der Fallstudie Baur-Kundenblog
Vorteile von Kundenblogs anhand der Fallstudie Baur-Kundenblog
 
eResult Panel: Bonopolis.de - Beispiele und Fallstudien
eResult Panel: Bonopolis.de - Beispiele und FallstudieneResult Panel: Bonopolis.de - Beispiele und Fallstudien
eResult Panel: Bonopolis.de - Beispiele und Fallstudien
 
Automotive UX bei eResult: Testmethoden & Leistungen
Automotive UX bei eResult: Testmethoden & LeistungenAutomotive UX bei eResult: Testmethoden & Leistungen
Automotive UX bei eResult: Testmethoden & Leistungen
 
eResult Case Study: Personas Für Deutschland
eResult Case Study: Personas Für DeutschlandeResult Case Study: Personas Für Deutschland
eResult Case Study: Personas Für Deutschland
 
Fallstudie Intranet-ReLaunch eResult
Fallstudie Intranet-ReLaunch eResultFallstudie Intranet-ReLaunch eResult
Fallstudie Intranet-ReLaunch eResult
 
Ethnographische Studien und Kontextinterviews bei eResult
Ethnographische Studien und Kontextinterviews bei eResultEthnographische Studien und Kontextinterviews bei eResult
Ethnographische Studien und Kontextinterviews bei eResult
 
Corporate Travel Forum: UserExperience & EyeTracking
Corporate Travel Forum: UserExperience & EyeTrackingCorporate Travel Forum: UserExperience & EyeTracking
Corporate Travel Forum: UserExperience & EyeTracking
 

Studienband: Shoppen mit dem Smartphone - Erkenntnisse, Guidelines und Good Practices für mobile Onlineshops

  • 1. Studienband Mobile Shopping Erkenntnisse, Good Practices und Guidelines Frühjahr 2014 © eResult GmbH – Results for Your E-Business (www.eresult.de)
  • 3. Inhaltsverzeichnis 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 Seite 3 Mobile Shopping
  • 4. Nächstes Kapitel Bedeutung & Ziele der Studie Seite 4 Mobile Shopping
  • 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
  • 17. Nächstes Kapitel Für Eilige: Alle identifizierten Guidelines auf einen Blick Seite 17 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
  • 26. Nächstes Kapitel Erwartungen & Anforderungen Seite 26 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
  • 76. Kontaktdaten Ihr Ansprechpartner für diese Studie Ole Kleinert Junior User Experience Consultant  +49 40 36166-7983  ole.kleinert@eresult.de Büro Göttingen Standort Hamburg Standort Frankfurt Planckstraße 23 Ludwig-Erhard-Straße 18 Uhlandstraße 58 37073 Göttingen 20459 Hamburg 60314 Frankfurt/Main  +49 551 49569-331   +49 40 36166-7980 +49 551 49569-330 Website: www.eresult.de Seite 76 Mobile Shopping Themenblog: www.usabilityblog.de  +49 69 133965-24
  • 77. Unternehmensvorstellung eResult GmbH © eResult GmbH – Ihr User Experience-Partner (www.eresult.de)‫‏‬
  • 78. Unternehmensvorstellung 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) Seite 78 Mobile Shopping
  • 79. Unternehmensvorstellung 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 Seite 79 Mobile Shopping
  • 80. Unternehmensvorstellung Ausgewählte Referenzen zu unseren 200 zufriedenen Kunden zählen u.a. Seite 80 Mobile Shopping
  • 81. Unternehmensvorstellung DAS deutschsprachige Usability-Portal redaktionell betreut durch eResult Seite 81 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
  • 83. Unternehmensvorstellung Ihre Ansprechpartner Thorsten Wilhelm Geschäftsführender Gesellschafter & Gründer  +49 551 51 77-426  thorsten.wilhelm@eresult.de Martin Beschnitt Managing Director  +49 40 36 166-7981  martin.beschnitt@eresult.de Büro Göttingen Standort Hamburg Standort Frankfurt Planckstr. 23 Ludwig-Erhard-Straße 18 Uhlandstraße 58 37073 Göttingen 20459 Hamburg 60314 Frankfurt / Main  +49 551 49 569-331  +49 40 36 166-7980  +49 69 133965-41  +49 551 49 569-330 Website: www.eresult.de Seite 83 Mobile Shopping Themenblog: www.usabilityblog.de