+

Mobile Online Shops – Stiefkinder oder Thronfolger?
Vorstellung des Mobile Web Commerce Benchmark
Hans-Joachim Belz (An...
+

Anstrengungslos
Gut.
n 

Bonner Beratung in
Gründung

n 

Beratung und Coaching
n 
n 

n 

Multi Screen Strategie
...
+

Hans-Joachim Belz
n 

Interessiert an
n 

(Mobile) Web Technik
eBusiness

n 

Usability / UX / Service

n 

n 

ht...
+
Die mobile Revolution
Eine persönliche Sicht
http://www.flickr.com/photos/jesper_yu/9359424465/

Mensch & Maschine
+

Mein Handy
2007

2013

n 

Telefonieren

n 

Web / Social Media

n 

Messaging (SMS / MMS)

n 

Navigation / LBS*

...
+

Mein Web
Meine „Surfbretter“ gestern und heute
2010

2013
+ Einkaufen im Web
heute und morgen
Vorüberlegungen
+

Das Smartphone
ist
allgegenwärtig
Nicht ohne
mein Handy*

2,35 Mio.

Mobile Revolution

(Q1-Q2 2013)

Radikale Umwälzun...
+

Neues Kaufverhalten
Buzz-Word-Bingo!

SoLoMo

Second Screen

Schowrooming

Couch Commerce
iPhone 4S

+
App Only

Stiefkind
Mobile Web?

Door Slam
Nexus 7

Stichproben auf großen deutschen
Shopping-Portalen vermit...
+ Mobile Web Commerce
Benchmark
Studiendesign
+

Untersuchungsgegenstand
Mobiler Online Kauf und Service.

Registrierung

After Sales
Recherche

Entscheidung

Bestellun...
+

Untersuchungsgegenstand
Auswahl der zu untersuchenden Online Shops.

Zehn der reichweiten- und umsatzstärksten deutsche...
+

Die Ziele

Bewertung der Mobile Fitness
Typische Probleme identifizieren
Designmuster aufzeigen
Wichtige Nutzerbedürfni...
+

Das Vorgehen
Die vier Komponenten des Benchmark.
Heuristische Expertenevaluation
n 

n 

260+ Kriterien für die
Beurt...
+

Kriterien für Mobile Usability
Die Grundlagen.

n 

Mobile First, Luke
Wroblewski

n 

M-Commerce Usability
Studie, B...
+

Der Kriterienkatalog
Die wichtigsten Themen aus UX-Sicht im Überblick.

Performance

Navigationsstruktur und Suche
Stru...
+

User Research
Validierung und Vertiefung der Ergebnisse
n 

Fokus auf Smartphones

n 

Allgemeines Interview zum Nutz...
+

Die Testgeräte

Surface
iPad 2
iPhone 4S

Nexus 7

Nexus 4
+ Einige Kriterien und
Ergebnisse
Highlights aus der laufenden Untersuchung
+

Fingerfreundlichkeit
Minimale Größe Interaktionslemente

2 mm
Sichtbares Element

7 mm

Interaktionsfläche
Abstand zu b...
+

Richtig messen!

44 Pixel

Wegen der Vielzahl unterschiedlicher Displayauflösungen
sollte bei Usability-Evaluierungen a...
+

Nicht berühren!
Fehlende Mindestgrößen und -abstände

(Baur)

(Otto)
+

Legal hat gesagt, das muss ...
Design Seitenfuß
Zu klein, zu eng
Zu klein, zu eng
Zu klein, zu eng
Kaum lesbar
(Weltbil...
+

Fingerfreundlichkeit
Gestenunterstützung / Optimierung Datenerfassung
Einsatz von Gesten
n 

Unterstützung von horizon...
+

Swipe Unterstützung
Beispiel Karussellelemente
Otto: Keine Swipe-Unterstützung

Bühne Startseite

Zoom Produktseite

St...
+

Swipe Unterstützung
Beispiel Karussellelemente
Amazon: Durchgehende Swipe-Unterstützung

Produktseite

Zoom Produktseit...
+

Kein Zoomen von Webseiten
Die Smartphone-Auftritte aller untersuchten Online Shops
unterdrücken das Zoomen* der Seite d...
+

Lesbarkeit
Schriftgröße im scharfen Sehwinkel (foveales Sehen):

22 – 31 Winkelminuten
A

A

A

25 cm

30 cm

35 cm

1,...
+

Erfassbarkeit
Zwei aktuelle Versionen der
Amazon Startseite für Smartphones

Reduzierung auf das Notwendige/Relevante
n...
+

Orientierung und Navigation
Herausforderungen im Kontext mobiler Endgeräte

n 

Komplexe Navigationsstrukturen abbilde...
+

Brotkrumen oder nicht?
Orientierungshilfen auf Smartphone-Seiten

n 

Kein Seitentitel

n 

Kategorielink

n 

Seite...
+

Ich will bestellen!
Gestaltung des Bestellbuttons
Aufmerksamkeitsstark
n  Unmittelbar verständlich
n  Preis & Produkt...
+

Antwortverhalten
Perfomance aus Benutzersicht.
Testkauf (Mystery Shopping)
Darstellung optimieren

Vergleichende Analys...
+

Mobile Web Commerce Benchmark
Es gibt noch so viel mehr.

Domainstrategie
Web Performance

Produkt auswählen

Navigatio...
+
Fazit
http://www.flickr.com/photos/romankphoto/9574527901/

Still a rough experience
+

Noch viel zu tun
Jede Menge Raum für Innovationen
n 

Tablets (insbesondere 7 Zoll) werden bisher kaum unterstützt

n...
+

Erklärungsansätze
n 

Zu viele Kanäle (iOS, Android, Windows Phone, Web, Mobile
Web) - zu wenig Ressourcen

n 

Mange...
+

Erscheinungstermin Studie:
Januar 2014
Download dieser Präsentation:

https://speakerdeck.com/hjbelz
Weitere Infos zur ...
+

War das

?

Fragen / Anmerkungen:
hans-joachim.belz@anstrengungslos.de
@minutefforts

Neue UX/Usability Community in Bo...
Upcoming SlideShare
Loading in …5
×

Mobile Online Shops – Stiefkinder oder Thronfolger?

951 views
823 views

Published on

Die Umwälzungen im Nutzungsverhalten durch die "mobile Revolution" stellen die Betreiber von Online Shops vor große technische und konzeptionelle Herausforderungen. Die vorliegende Benchmarkstudie versucht anhand von Heuristiken und vergleichenden Analysen einen Überblick zu geben über den aktuellen Stand von Design und Usability der mobilen Ableger von 10 der reichweitenstärksten deutschen Online Shops. Der Vortrag stellt die Konzeption der laufenden Studie vor und gibt einen Überblick über die wichtigsten Ergebnisse.

Published in: Technology

Mobile Online Shops – Stiefkinder oder Thronfolger?

  1. 1. + Mobile Online Shops – Stiefkinder oder Thronfolger? Vorstellung des Mobile Web Commerce Benchmark Hans-Joachim Belz (Anstrengungslos.de) „World Usability Day 2013“ in Bonn, 14.11.2013
  2. 2. + Anstrengungslos Gut. n  Bonner Beratung in Gründung n  Beratung und Coaching n  n  n  Multi Screen Strategie Digital Transformation Interdisziplinär, pragmatisch, menschlich http://www.anstrengungslos.de @Anstrengungslos
  3. 3. + Hans-Joachim Belz n  Interessiert an n  (Mobile) Web Technik eBusiness n  Usability / UX / Service n  n  http://www.minutefforts.com @minuteFForts Launch der m.telekom.de (Projektleiter & Concept Lead)
  4. 4. + Die mobile Revolution Eine persönliche Sicht
  5. 5. http://www.flickr.com/photos/jesper_yu/9359424465/ Mensch & Maschine
  6. 6. + Mein Handy 2007 2013 n  Telefonieren n  Web / Social Media n  Messaging (SMS / MMS) n  Navigation / LBS* n  Kontakte verwalten (fummelig) n  Fotografieren n  Schnappschüsse (selten) n  Messaging (WhatsApp / SMS) n  Im Internet surfen (nie) n  Produktivitätsfunktionen Privat n  etc. Arbeit iOS Android *= Location Based Services
  7. 7. + Mein Web Meine „Surfbretter“ gestern und heute 2010 2013
  8. 8. + Einkaufen im Web heute und morgen Vorüberlegungen
  9. 9. + Das Smartphone ist allgegenwärtig Nicht ohne mein Handy* 2,35 Mio. Mobile Revolution (Q1-Q2 2013) Radikale Umwälzungen im Nutzerverhalten erfordern weitreichende Änderungen im digitalen Vertriebskanal. +109 % Das Tablet verdrängt den PC 2,38 Mio. (Q1-Q2 2013) -12,1 % Notebook/Tablet-Absätze siehe CEMIX Marktzahlen *=http://www.bitkom.org/de/presse/30739_77337.aspx
  10. 10. + Neues Kaufverhalten Buzz-Word-Bingo! SoLoMo Second Screen Schowrooming Couch Commerce
  11. 11. iPhone 4S + App Only Stiefkind Mobile Web? Door Slam Nexus 7 Stichproben auf großen deutschen Shopping-Portalen vermitteln einen durchwachsenen Eindruck. Tablet = Smartphone Tablet = PC
  12. 12. + Mobile Web Commerce Benchmark Studiendesign
  13. 13. + Untersuchungsgegenstand Mobiler Online Kauf und Service. Registrierung After Sales Recherche Entscheidung Bestellung Service Online Shopping im Web mit Smartphones und Tablets
  14. 14. + Untersuchungsgegenstand Auswahl der zu untersuchenden Online Shops. Zehn der reichweiten- und umsatzstärksten deutschen Einzelhändlerportale n  Amazon n  Conrad n  Otto n  Tchibo n  notesbookbilliger.de n  Bon n  Zalando n  Weltbild Prix n  H&M n  Baur
  15. 15. + Die Ziele Bewertung der Mobile Fitness Typische Probleme identifizieren Designmuster aufzeigen Wichtige Nutzerbedürfnisse identifizieren
  16. 16. + Das Vorgehen Die vier Komponenten des Benchmark. Heuristische Expertenevaluation n  n  260+ Kriterien für die Beurteilung von mobilen Webauftritten Vergleichende Analyse n  n  n  Usability und Conversion Analyse der kompletten User Journey Best Practices Design Patterns Absatzstrategien n  Testkauf (Mystery Shopping) n  Identifikation von Usability Tests n  Interviews mit Nutzern n  Evaluierung einzelner Aspekte im Benutzungstest
  17. 17. + Kriterien für Mobile Usability Die Grundlagen. n  Mobile First, Luke Wroblewski n  M-Commerce Usability Studie, Baymard Institute n  Vorträge und Blog-Artikel bekannter Designer; u.a. Brad Frost, Dave Shea, Jason Grigsby, Ilya Grigorik, Blog „Konversionskraft“ n  Erfahrungen aus Leitung Konzeption & Launch der m.telekom.de
  18. 18. + Der Kriterienkatalog Die wichtigsten Themen aus UX-Sicht im Überblick. Performance Navigationsstruktur und Suche Strukturierung Produkte und Produktkategorien Fingerfreundlichkeit / Optimierung für mobile Geräteklassen n  Gestaltung Seitenrahmen und Navigationsmechanismen n  Gestaltung Produktlisten und Produktdetailseiten n  Zuführung / Übergabe n  n  IxD Vergleich IA mobile Website und Desktop-Website n  IA n  Datenerfassung - insbesondere im Checkout n  Social Media, Google, URL-Strategie, App Promotion, Cross Device, Cross Channel n  Antwortverhalten abhängig von Konnektivität und Geräteklasse
  19. 19. + User Research Validierung und Vertiefung der Ergebnisse n  Fokus auf Smartphones n  Allgemeines Interview zum Nutzungsverhalten n  Teilnehmende Benutzungstests mit „Thinking Aloud“ n  n  n  Exploration der Startseite Auswahl eines Produktes und Neukundenregistrierung/Checkout 6-8 Probanden n  n  Männer und Frauen aus allen Altersklassen Regelmäßige Online-Shopper und mobile Surfer mit eigenem Smartphone
  20. 20. + Die Testgeräte Surface iPad 2 iPhone 4S Nexus 7 Nexus 4
  21. 21. + Einige Kriterien und Ergebnisse Highlights aus der laufenden Untersuchung
  22. 22. + Fingerfreundlichkeit Minimale Größe Interaktionslemente 2 mm Sichtbares Element 7 mm Interaktionsfläche Abstand zu benachbarten Interaktionsflächen 7 mm n  n  n  n  n  Für Finger mindestens 7mm, besser 10 mm. Daumen mehr. Finger überdecken Interaktionselemente / Inhalte. Die Berührungsfläche ist deutlich kleiner als die Gesamtfläche des Fingers/Daumens. Notwendigkeit zur Präzision verlangsamt die Bedienung (ggf. Wechsel von Fingerkuppe zu Fingerspitze, leichter Druck). Zu große Interaktionselemente bergen die Gefahr nicht als solche erkannt zu werden.
  23. 23. + Richtig messen! 44 Pixel Wegen der Vielzahl unterschiedlicher Displayauflösungen sollte bei Usability-Evaluierungen auf konkreten Testgeräten nachgemessen werden!
  24. 24. + Nicht berühren! Fehlende Mindestgrößen und -abstände (Baur) (Otto)
  25. 25. + Legal hat gesagt, das muss ... Design Seitenfuß Zu klein, zu eng Zu klein, zu eng Zu klein, zu eng Kaum lesbar (Weltbild) (notebooksbilliger.de) Im Vergleich beste Lösung Eigentliche Touchfläche sehr klein 6,3 mm (iPhone 4S) Besser, aber Touchfläche noch zu klein (Zalando) (Otto)
  26. 26. + Fingerfreundlichkeit Gestenunterstützung / Optimierung Datenerfassung Einsatz von Gesten n  Unterstützung von horizontalen Wischgesten („Swipe“) für die Navigation von Karussellelementen n  Zwei-Finger-Geste für das Zoomen des Bildschirminhalts n  Einsatz nicht intuitiver Gesten ist problematisch! Datenerfassung n  Minimieren! => Sinnvolle Vorgabewerte, keine Doppeleingaben, Datenquellen integrieren, etc. n  Für Finger optimieren - u.a. DropDowns vermeiden
  27. 27. + Swipe Unterstützung Beispiel Karussellelemente Otto: Keine Swipe-Unterstützung Bühne Startseite Zoom Produktseite Startseite
  28. 28. + Swipe Unterstützung Beispiel Karussellelemente Amazon: Durchgehende Swipe-Unterstützung Produktseite Zoom Produktseite 5 Karussells auf der Startseite: Impulskauf im Overdrive
  29. 29. + Kein Zoomen von Webseiten Die Smartphone-Auftritte aller untersuchten Online Shops unterdrücken das Zoomen* der Seite durch den Nutzer. Pro n  n  Contra Versehentliches Zoomen sowie automatischer Zoom bei Dateneingabe wird unterdrückt (Gefahr der Desorientierung) Technische Umsetzung wird erleichert (z.B. LandscapeUnterstützung) n  Individuelles Nutzerbedürfnis nach größeren Darstellungen kann nicht bedient werden. n  Eingebettetes Zoomen nur in ausgewählten Elementen (z.B. Produktlupe) ist erklärungsbedürftig Bedarf für User Research! * = Anmerkung: Z.B. iOS Settings können die Sperre übersteuern; dieses Wissen ist aber unter Nutzern nicht weit verbreitet
  30. 30. + Lesbarkeit Schriftgröße im scharfen Sehwinkel (foveales Sehen): 22 – 31 Winkelminuten A A A 25 cm 30 cm 35 cm 1,6 mm – 2,2 mm 1,9 mm - 2,7 mm 2,2 mm - 3,1 mm Faustformeln*: Weitere Einflussfaktoren: n  Minimum: Leseabstand / 155 n  Schriftart n  Maximum: Leseabstand / 110 n  Kontrast n  Zeichen-/Zeilenabstand * = exakte Formel der Zeichengröße für beliebige Winkel: Leseabstand * 2 * tan(Sehwinkel/2) Laut einer medizinischen Studie von 2011 ist der durchschnittliche Leseabstand von Webseiten auf Smartphones 32 cm. Empfehlungen des Sehwinkels basieren u.a. auf BGI 742 der Berufsgenossenschaften
  31. 31. + Erfassbarkeit Zwei aktuelle Versionen der Amazon Startseite für Smartphones Reduzierung auf das Notwendige/Relevante n  Komplexe Kontexte auflösen – ggf. kleinere Schritte machen n  Wichtiges Design Pattern: Progressive Disclosure n 
  32. 32. + Orientierung und Navigation Herausforderungen im Kontext mobiler Endgeräte n  Komplexe Navigationsstrukturen abbilden n  n  n  h"p://bradfrostweb.com/blog/web/responsive-­‐nav-­‐pa"erns/   h"p://bradfrostweb.com/blog/web/complex-­‐naviga;on-­‐pa"erns-­‐for-­‐responsive-­‐design/ Suche n  n  Jederzeit anbieten! Usability der Filtermechanik n Sales! Service? n  Keine nutzer-relevanten Themen vernachlässigen!
  33. 33. + Brotkrumen oder nicht? Orientierungshilfen auf Smartphone-Seiten n  Kein Seitentitel n  Kategorielink n  Seitentitel n  Herstellerlink Klassischer Breadcrumb Darstellung problematisch (Conrad) Breadcrumb als Expansionselement
  34. 34. + Ich will bestellen! Gestaltung des Bestellbuttons Aufmerksamkeitsstark n  Unmittelbar verständlich n  Preis & Produktvariante im Blick n  Übersichtlich? (Otto) Wo ist er? (H&M) Kaufen oder kaufen? (Baur) Welcher ist es? (Conrad)
  35. 35. + Antwortverhalten Perfomance aus Benutzersicht. Testkauf (Mystery Shopping) Darstellung optimieren Vergleichende Analyse Daten reduzieren Datenübertragung minimieren n  Bilder optimieren Heuristische Expertenevaluation Richtig messen! Real User Monitoring n  Seitenaufbau für Relevanz (ATF!*) optimieren n  n  Jede Interaktion hat ein unmittelbares Feedback Weitere Infos Weitere Infos: n  Nächstes UXBN J n  Artikelreihe auf anstrengungslos.de *ATF = Above the fold; ohne Scrollen sichtbarer Teil der Webseite
  36. 36. + Mobile Web Commerce Benchmark Es gibt noch so viel mehr. Domainstrategie Web Performance Produkt auswählen Navigation und Suche Bestellprozess Fingerfreundlichkeit Tablet-Unterstützung App-Strategie Cross Device Cross Channel Service Mobil
  37. 37. + Fazit
  38. 38. http://www.flickr.com/photos/romankphoto/9574527901/ Still a rough experience
  39. 39. + Noch viel zu tun Jede Menge Raum für Innovationen n  Tablets (insbesondere 7 Zoll) werden bisher kaum unterstützt n  Viele kleine Probleme die mit sehr geringem Investitionsaufwand lösbar wären n  Designsprache steht noch am Anfang (einfachste mobile Muster und viel Desktop-Erbe) Aus Nutzersicht: Thronfolger Status Quo: Stiefkind
  40. 40. + Erklärungsansätze n  Zu viele Kanäle (iOS, Android, Windows Phone, Web, Mobile Web) - zu wenig Ressourcen n  Mangelnde Kompetenz n  Alte Konzepte und Prozesse n  n  n  Photoshop-Layouts Keine (passende) Content Strategie Kein nutzerzentriertes Design n  Testprozess mit einer großen Anzahl an Devices fehlt n  IT überfordert n  n  Lange Anpassungszyklen Unflexible Plattformen
  41. 41. + Erscheinungstermin Studie: Januar 2014 Download dieser Präsentation: https://speakerdeck.com/hjbelz Weitere Infos zur Studie (ab Dezember): http://www.anstrengungslos.de/mwcb
  42. 42. + War das ? Fragen / Anmerkungen: hans-joachim.belz@anstrengungslos.de @minutefforts Neue UX/Usability Community in Bonn Donnerstag, 28.11. um 19:00h Data in Transit, Adolfstr. 34a, Bonn Xing: https://www.xing.com/net/uxbn Twitter: @UXBonn

×