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.

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. +
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. +
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. +
Die mobile Revolution
Eine persönliche Sicht

5. http://www.flickr.com/photos/jesper_yu/9359424465/
Mensch & Maschine

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. +
Mein Web
Meine „Surfbretter“ gestern und heute
2010
2013

8. + Einkaufen im Web
heute und morgen
Vorüberlegungen

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. +
Neues Kaufverhalten
Buzz-Word-Bingo!
SoLoMo
Second Screen
Schowrooming
Couch Commerce

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. + Mobile Web Commerce
Benchmark
Studiendesign

13. +
Untersuchungsgegenstand
Mobiler Online Kauf und Service.
Registrierung
After Sales
Recherche
Entscheidung
Bestellung
Service
Online Shopping im Web mit Smartphones und Tablets

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. +
Die Ziele
Bewertung der Mobile Fitness
Typische Probleme identifizieren
Designmuster aufzeigen
Wichtige Nutzerbedürfnisse identifizieren

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. +
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. +
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. +
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. +
Die Testgeräte
Surface
iPad 2
iPhone 4S
Nexus 7
Nexus 4

21. + Einige Kriterien und
Ergebnisse
Highlights aus der laufenden Untersuchung

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. +
Richtig messen!
44 Pixel
Wegen der Vielzahl unterschiedlicher Displayauflösungen
sollte bei Usability-Evaluierungen auf konkreten Testgeräten
nachgemessen werden!

24. +
Nicht berühren!
Fehlende Mindestgrößen und -abstände
(Baur)
(Otto)

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. +
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. +
Swipe Unterstützung
Beispiel Karussellelemente
Otto: Keine Swipe-Unterstützung
Bühne Startseite
Zoom Produktseite
Startseite

28. +
Swipe Unterstützung
Beispiel Karussellelemente
Amazon: Durchgehende Swipe-Unterstützung
Produktseite
Zoom Produktseite
5 Karussells auf der Startseite:
Impulskauf im Overdrive

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. +
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. +
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. +
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. +
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. +
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. +
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. +
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. +
Fazit

38. http://www.flickr.com/photos/romankphoto/9574527901/
Still a rough experience

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. +
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. +
Erscheinungstermin Studie:
Januar 2014
Download dieser Präsentation:
https://speakerdeck.com/hjbelz
Weitere Infos zur Studie (ab Dezember):
http://www.anstrengungslos.de/mwcb

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