Studienband
Mobile Shopping

Erkenntnisse, Good Practices und Guidelines
Frühjahr 2014

© eResult GmbH – Results for Your ...
Nächstes Kapitel

Inhaltsverzeichnis

Seite 2

Mobile Shopping
Inhaltsverzeichnis

Die Inhalte im Überblick


Bedeutung & Ziele der Studie

04



Studiensteckbrief

08



Management ...
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 z...
Bedeutung & Ziele der Studie

Optimierungsbedarf bei mobilen Onlineshops
● Häufigster Kritikpunkt in den freien Antworten:...
Bedeutung & Ziele der Studie

User Experience erhöhen
● Ziel dieser Studie ist es daher, möglichst allgemein gültige Erken...
Nächstes Kapitel

Studiensteckbrief

Seite 8

Mobile Shopping
Studiensteckbrief

Fokus der Untersuchung
• Was sind die Erwartungen und Anforderungen der Nutzer an mobile
Onlineshops un...
Studiensteckbrief

Methodisches Vorgehen
Quantitative Vorbefragung
In 2 Vorbefragungen wurde zunächst das allgemeine Nutzu...
Studiensteckbrief

Mehrstufiges Untersuchungs-Design
• Für die quantitative Vorbefragung wurden über das Bonopolis Onlinep...
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 „a...
Management Summary

Gute Übersicht und Transparenz enorm wichtig
• Auf der Produktübersichtsseite sollte speziell auf den ...
Management Summary

Von der Startseite bis zum Check-out: Je schneller, desto
besser!
• Für den Bestellprozess gilt: Je sc...
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 ...
Alle Guidelines auf einen Blick

Guidelines für die Navigation

No. 04

Das Logo sollte groß und eindeutig identifizierbar...
Alle Guidelines auf einen Blick

Guidelines für die Produktübersichtsseite

No. 07

No. 08

No. 09

Seite 20

Sowohl in de...
Alle Guidelines auf einen Blick

Guidelines für die Produktdetailseite

No. 10

No. 11

No. 12

Seite 21

Im sofort sichtb...
Alle Guidelines auf einen Blick

Guidelines für den Warenkorb

No. 13

Der Warenkorb darf auf keinen Fall bei Vorgängen wi...
Alle Guidelines auf einen Blick

Guidelines für den Bestellprozess

No. 16

Je schneller, einfacher und unkomplizierter de...
Nächstes Kapitel

Ergebnisse

Seite 24

Mobile Shopping
Ergebnisse

Hinweise zum Aufbau des Studienbandes
• Im Folgenden stellen wir die identifizierten Probleme dar und
zeigen B...
Nächstes Kapitel

Erwartungen & Anforderungen

Seite 26

Mobile Shopping
Ergebnisse

Erwartungen & Anforderungen an einen mobilen Onlineshop
Gleicher Anspruch wie an die Desktop-Version:
Die Nutz...
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änges...
Ergebnisse

Zu viele Banner verhindern Einstieg in das Sortiment

 Zu viele Banner:
Der größte Teil des sofort sichtbaren...
Ergebnisse

Ansprechende Bühne auch auf dem Smartphone wichtig

 Schnell verständlicher Teaser:
Das Anteasern von Angebot...
Ergebnisse

Good Practice: Bühne & Sortimentseinstieg
H&M

 Gute Startseite:
Der verfügbare Platz wird sinnvoll zwischen ...
Ergebnisse

Was ist wichtiger: Suchfunktion oder Kategorienauswahl?
(1/2)
• Die Nutzer wollen sowohl stöbern als auch gezi...
Ergebnisse

Was ist wichtiger: Suchfunktion oder Kategorienauswahl?
(2/2)
• Als Faustregel gilt: Je breiter das Produktsor...
Ergebnisse

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

 Themenwelten:
Die Nutzer kennen Tchibo...
Ergebnisse

Good Practice: Sortimentseinstieg über Suchfunktion
Amazon, Otto

 Vollsortimentler:
Im oberen Bereich wird n...
Ergebnisse

App oder mobile Website?

 Anhänger für beides:
In unserem Test hatten die Nutzer unterschiedliche
Präferenze...
Ergebnisse

Guidelines für die Startseite

No. 01

Im sofort sichtbaren Bereich sollte max. 1 Banner (Werbung, Angebot,
Pr...
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...
Ergebnisse

Navigation auf engstem Raum: Keine Kompromisse bei der
Usability

 Logo zu klein:
Die Nutzer sehen das Logo a...
Ergebnisse

Erwartungskonforme Usability

 Große Menüpunkte:
Die Hauptnavigation befindet sich erwartungskonform ganz obe...
Ergebnisse

Good Practice: Gute Hauptnavigation
H&M

 Permanente Hauptnavigation:
Die Hauptnavigation von H&M bleibt auch...
Ergebnisse

Guidelines für die Navigation

No. 04

Das Logo sollte groß und eindeutig identifizierbar sein sowie als Link ...
Nächstes Kapitel

Produktübersichtsseite

Seite 45

Mobile Shopping
Ergebnisse

Die Produktübersichtsseite: Auswahl eines Artikels
• Auf der Produktübersichtsseite und der Kategorienauswahl
...
Ergebnisse

Störende Werbehinweise & überflüssige Produktdetails

 Kategorienauswahl schlecht
zu erkennen:
Über die Kateg...
Ergebnisse

Kategorienauswahl & Produktübersicht

 Klare Kategorienauswahl:
Die Kategorienauswahl bei Saturn und H&M sind...
Ergebnisse

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

 Verlockende Darstellung:
Die Produktübersicht in den Theme...
Ergebnisse

Filter- und Sortierungsfunktion

 Keine Filter- und
Sortierungsfunktionen:
Für das Suchergebnis werden weder ...
Ergebnisse

Good Practice: Filter- und Sortierungsfunktion
eBay

 Gut sichtbar:
Die Filter- und
Sortierungsfunktionen
sin...
Ergebnisse

Guidelines für die Produktübersichtsseite

No. 07

No. 08

No. 09

Seite 52

Sowohl in der Kategorienauswahl a...
Nächstes Kapitel

Produktdetailseite

Seite 53

Mobile Shopping
Ergebnisse

Die Produktdetailseite: Entscheidend für Kaufabsicht
• Auf der Produktdetailseite wollen die Nutzer möglichst ...
Ergebnisse

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

 Bestellbutton zu weit unten:
Der ...
Ergebnisse

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

 Fehlende Versandinformationen:
De...
Ergebnisse

Die wesentlichen Produktinformationen auf einen Blick

 Alles auf einen Blick:
Die wichtigsten Informationen ...
Ergebnisse

Bei umfangreichen Produktdetails: Aufklappbare Informationen

 Aufklappbare Infos:
Bei umfangreichen Produkti...
Ergebnisse

Den Nutzer optimal leiten: Vollbild-Zoom

 Kein „Schließen“-Button:
Es ist nicht auf den ersten Blick ersicht...
Ergebnisse

Guidelines für die Produktdetailseite

No. 10

No. 11

No. 12

Seite 60

Im sofort sichtbaren Bereich sollten ...
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
...
Ergebnisse

Gelöschter Warenkorb

 Warenkorb gelöscht:
Der Warenkorb darf auf keinen Fall bei
Vorgängen wie Login, Regist...
Ergebnisse

Hinweis: „Der Artikel wurde in den Warenkorb gelegt“

 Kein Hinweis:
Nach Hinzufügen eines Artikels in den
Wa...
Ergebnisse

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

 Dialogfeld mit Bestätigung:
Der Nutzer wird klar...
Ergebnisse

Good Practice: Warenkorb
Saturn, H&M

 Gute Übersicht:
Der Warenkorb von Saturn bietet alle
Informationen auf...
Ergebnisse

Guidelines für den Warenkorb

No. 13

Der Warenkorb darf auf keinen Fall bei Vorgängen wie Login,
Registrierun...
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 schn...
Ergebnisse

Bestellprozess: Je schneller, desto besser

 Anzeige der Bestellschritte:
Eine Anzeige der Bestellschritte is...
Ergebnisse

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

 Schritt 1:
Keine komplizierte
Auswahl: Der Nut...
Ergebnisse

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

 Schritt 5:
Die Pizzaauswahl ist
einfach und
ap...
Ergebnisse

Payment-Provider beschleunigen Check-out

 Kein Payment-Provider:
Nicht jeder Nutzer will ein eigenes Konto f...
Ergebnisse

Guidelines für den Bestellprozess

No. 16

Je schneller, einfacher und unkomplizierter der Bestellprozess, des...
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
 ol...
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 ...
Unternehmensvorstellung

User Experience und Usability-Beratung von A-Z
● Anforderungsanalysen
● Benchmarking
● Expertenev...
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 Shoppi...
Unternehmensvorstellung

Warum also eResult?
●

Wir sind erfahren: Als eine der ersten UX-Agenturen
Deutschlands bringen w...
Unternehmensvorstellung

Ihre Ansprechpartner
Thorsten Wilhelm
Geschäftsführender Gesellschafter & Gründer
 +49 551 51 77...
Nächste SlideShare
Wird geladen in …5
×

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

1.504 Aufrufe

Veröffentlicht am

Diese Grundlagenstudie der eResult GmbH beschäftigt sich mit dem Thema:

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

Sie gibt u. a. Antworten auf die folgenden Fragen:

•Was sind die Erwartungen und Anforderungen der Nutzer an mobile Onlineshops und das Shoppen per Smartphone im Allgemeinen?
•In welchen Situationen wird das Smartphone zum Shoppen verwendet?
•Wie gehen die Nutzer vor, wenn sie mit dem Smartphone einen Onlineshop aufrufen?
•Welche Probleme treten bei der Nutzung der mobilen Shops auf?
•Was begeistert die Nutzer, wenn sie einen mobilen Shop besuchen?
•Welche Elemente sind besonders wichtig für die einzelnen Seitentypen? (Startseite, Navigation, Produktübersichtsseite, Produktdetailseite, Warenkorb, Bestellprozess)
•Was sind Good Practice-Beispiele für die verschiedenen Seitentypen?
•Welche verallgemeinerbaren, branchenübergreifenden Guidelines können aus dem Nutzerverhalten abgeleitet werden?

Der Studienband zeigt die wichtigsten Erkenntnisse, Guidelines und Good Practice-Beispiele.

Veröffentlicht in: Business
0 Kommentare
0 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Keine Downloads
Aufrufe
Aufrufe insgesamt
1.504
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
2
Aktionen
Geteilt
0
Downloads
10
Kommentare
0
Gefällt mir
0
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

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

  1. 1. Studienband Mobile Shopping Erkenntnisse, Good Practices und Guidelines Frühjahr 2014 © eResult GmbH – Results for Your E-Business (www.eresult.de)
  2. 2. Nächstes Kapitel Inhaltsverzeichnis Seite 2 Mobile Shopping
  3. 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. 4. Nächstes Kapitel Bedeutung & Ziele der Studie Seite 4 Mobile Shopping
  5. 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. 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. 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
  8. 8. Nächstes Kapitel Studiensteckbrief Seite 8 Mobile Shopping
  9. 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. 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. 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
  12. 12. Studiensteckbrief Untersuchte mobile Shops Seite 12 Mobile Shopping
  13. 13. Nächstes Kapitel Management Summary Seite 13 Mobile Shopping
  14. 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. 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. 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. 17. Nächstes Kapitel Für Eilige: Alle identifizierten Guidelines auf einen Blick Seite 17 Mobile Shopping
  18. 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. 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. 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. 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. 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. 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
  24. 24. Nächstes Kapitel Ergebnisse Seite 24 Mobile Shopping
  25. 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. 26. Nächstes Kapitel Erwartungen & Anforderungen Seite 26 Mobile Shopping
  27. 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.
  28. 28. Nächstes Kapitel Startseite Seite 28 Mobile Shopping
  29. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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
  39. 39. Nächstes Kapitel Navigation Seite 39 Mobile Shopping
  40. 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. 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. 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. 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. 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
  45. 45. Nächstes Kapitel Produktübersichtsseite Seite 45 Mobile Shopping
  46. 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. 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. 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. 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. 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. 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. 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
  53. 53. Nächstes Kapitel Produktdetailseite Seite 53 Mobile Shopping
  54. 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. 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. 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. 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. 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. 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. 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
  61. 61. Nächstes Kapitel Warenkorb Seite 61 Mobile Shopping
  62. 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. 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. 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. 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. 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. 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
  68. 68. Nächstes Kapitel Bestellprozess Seite 68 Mobile Shopping
  69. 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. 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. 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. 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. 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. 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
  75. 75. Nächstes Kapitel Kontakt Seite 75 Mobile Shopping
  76. 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. 77. Unternehmensvorstellung eResult GmbH © eResult GmbH – Ihr User Experience-Partner (www.eresult.de)‫‏‬
  78. 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. 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. 80. Unternehmensvorstellung Ausgewählte Referenzen zu unseren 200 zufriedenen Kunden zählen u.a. Seite 80 Mobile Shopping
  81. 81. Unternehmensvorstellung DAS deutschsprachige Usability-Portal redaktionell betreut durch eResult Seite 81 Mobile Shopping
  82. 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. 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

×