Mobile Online Shops – Stiefkinder oder Thronfolger?

Vorstellung der laufenden Mobile Web Commerce Benchmark Studie anlässlich des World Usability Day 2013 in Bonn.

Transcript

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  Multi Screen Strategie n  Digital Transformation n  Interdisziplinär, pragmatisch, menschlich http://www.anstrengungslos.de @Anstrengungslos
3. + Hans-Joachim Belz n  Interessiert an n  (Mobile) Web Technik n  eBusiness n  Usability / UX / Service n  Launch der m.telekom.de (Projektleiter & Concept Lead) http://www.minutefforts.com @minuteFForts
4. + Die mobile Revolution Eine persönliche Sicht
5. http://www.flickr.com/photos/jesper_yu/9359424465/ Mensch & Maschine
6. + Mein Handy 2007 2013 Privat Arbeit Android iOS n  Telefonieren n  Messaging (SMS / MMS) n  Kontakte verwalten (fummelig) n  Schnappschüsse (selten) n  Im Internet surfen (nie) n  Web / Social Media n  Navigation / LBS* n  Fotografieren n  Messaging (WhatsApp / SMS) n  Produktivitätsfunktionen n  etc. *= Location Based Services
7. + Mein Web Meine „Surfbretter“ gestern und heute 2010 2013
8. + Einkaufen im Web heute und morgen Vorüberlegungen
9. + Mobile Revolution Radikale Umwälzungen im Nutzerverhalten erfordern weitreichende Änderungen im digitalen Vertriebskanal. Das Tablet verdrängt den PC Das Smartphone ist allgegenwärtig Nicht ohne mein Handy* *=http://www.bitkom.org/de/presse/30739_77337.aspx 2,35 Mio. (Q1-Q2 2013) +109 % 2,38 Mio. (Q1-Q2 2013) -12,1 % Notebook/Tablet-Absätze siehe CEMIX Marktzahlen
10. + Neues Kaufverhalten Buzz-Word-Bingo! SoLoMo Showrooming Second Screen Couch Commerce
11. + Stiefkind Mobile Web? Stichproben auf großen deutschen Shopping-Portalen vermitteln einen durchwachsenen Eindruck. App Only Door Slam Tablet = Smartphone Tablet = PC iPhone 4S Nexus 7
12. + Mobile Web Commerce Benchmark Studiendesign
13. + Untersuchungsgegenstand Mobiler Online Kauf und Service. Online Shopping im Web mit Smartphones und Tablets Recherche Entscheidung Bestellung Registrierung After Sales Service
14. + Untersuchungsgegenstand Auswahl der zu untersuchenden Online Shops. n Amazon n Otto n notesbookbilliger.de n Zalando n Weltbild n Conrad n Tchibo n Bon Prix n H&M n Baur Zehn der reichweiten- und umsatzstärksten deutschen Einzelhändlerportale
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  260+ Kriterien für die Beurteilung von mobilen Webauftritten n  Usability und Conversion Testkauf (Mystery Shopping) n  Analyse der kompletten User Journey Vergleichende Analyse n  Identifikation von n  Best Practices n  Design Patterns n  Absatzstrategien Usability Tests n  Interviews mit Nutzern n  Evaluierung einzelner Aspekte im Benutzungstest Vergleichende Analyse Heuristische Expertenevaluation Testkauf (Mystery Shopping) Usability Tests
17. + Kriterien für Mobile Usability Die Grundlagen. 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 n  Mobile First, Luke Wroblewski n  M-Commerce Usability Studie, Baymard Institute
18. + Der Kriterienkatalog Die wichtigsten Themen aus UX-Sicht im Überblick. n  Vergleich IA mobile Website und Desktop-Website n  Navigationsstruktur und Suche n  Strukturierung Produkte und Produktkategorien IA IxD n  Fingerfreundlichkeit / Optimierung für mobile Geräteklassen n  Gestaltung Seitenrahmen und Navigationsmechanismen n  Gestaltung Produktlisten und Produktdetailseiten n  Datenerfassung - insbesondere im Checkout Zuführung / Übergabe n  Social Media, Google, URL-Strategie, App Promotion, Cross Device, Cross Channel Performance 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 Beobachtung mit „Thinking Aloud“ n  Exploration der Startseite n  Auswahl eines Produktes und Neukundenregistrierung/Checkout n  6-8 Probanden n  Männer und Frauen aus allen Altersklassen n  Regelmäßige Online-Shopper und mobile Surfer mit eigenem Smartphone
20. + Die Testgeräte iPad 2 Surface Nexus 7 Nexus 4 iPhone 4S
21. + Einige Kriterien und Ergebnisse Highlights aus der laufenden Untersuchung
22. + Fingerfreundlichkeit Minimale Größe Interaktionslemente n  Für Finger mindestens 7mm, besser 10 mm. Daumen mehr. n  Finger überdecken Interaktionselemente / Inhalte. n  Die Berührungsfläche ist deutlich kleiner als die Gesamtfläche des Fingers/Daumens. n  Notwendigkeit zur Präzision verlangsamt die Bedienung (ggf. Wechsel von Fingerkuppe zu Fingerspitze, leichter Druck). n  Zu große Interaktionselemente bergen die Gefahr nicht als solche erkannt zu werden. 7 mm 7 mm 2 mm Interaktionsfläche Abstand zu benachbarten Interaktionsflächen Sichtbares Element
23. + Richtig messen! Wegen der Vielzahl unterschiedlicher Displayauflösungen sollte bei Usability-Evaluierungen auf konkreten Testgeräten nachgemessen werden! 44 Pixel
24. + Nicht berühren! Fehlende Mindestgrößen und -abstände (Baur) (Otto)
25. + Legal hat gesagt, das muss ... Design Seitenfuß Kaum lesbar Zu klein, zu eng (notebooksbilliger.de) Zu klein, zu eng Zu klein, zu eng (Zalando) (Otto) (Weltbild) Besser, aber Touchfläche noch zu klein Im Vergleich beste Lösung 6,3 mm (iPhone 4S) Eigentliche Touchfläche sehr klein
26. + Fingerfreundlichkeit Gestenunterstützung / Optimierung Datenerfassung 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! n  Minimieren! => Sinnvolle Vorgabewerte, keine Doppeleingaben, Datenquellen integrieren, etc. n  Für Finger optimieren - u.a. DropDowns vermeiden Einsatz von Gesten Datenerfassung
27. + Swipe Unterstützung Beispiel Karussellelemente Otto: Keine Swipe-Unterstützung Zoom Produktseite Bühne Startseite Startseite
28. + Swipe Unterstützung Beispiel Karussellelemente Amazon: Durchgehende Swipe-Unterstützung 5 Karussells auf der Startseite: Impulskauf im Overdrive Produktseite Zoom Produktseite
29. + Kein Zoomen von Webseiten n  Versehentliches Zoomen sowie automatischer Zoom bei Dateneingabe wird unterdrückt (Gefahr der Desorientierung) n  Technische Umsetzung wird erleichert (z.B. Landscape- Unterstü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 Pro Contra Die Smartphone-Auftritte aller untersuchten Online Shops unterdrücken das Zoomen* der Seite durch den Nutzer. 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 A A A Schriftgröße im scharfen Sehwinkel (foveales Sehen): 22 – 31 Winkelminuten Faustformeln*: n  Minimum: Leseabstand / 155 n  Maximum: Leseabstand / 110 * = 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 Weitere Einflussfaktoren: n  Schriftart n  Kontrast n  Zeichen-/Zeilenabstand 30 cm 1,9 mm - 2,7 mm 35 cm 2,2 mm - 3,1 mm 25 cm 1,6 mm – 2,2 mm
31. + Erfassbarkeit n  Reduzierung auf das Notwendige/Relevante n  Komplexe Kontexte auflösen – ggf. kleinere Schritte machen n  Wichtiges Design Pattern: Progressive Disclosure Zwei aktuelle Versionen der Amazon Startseite für Smartphones
32. + Orientierung und Navigation Herausforderungen im Kontext mobiler Endgeräte n  Komplexe Navigationsstrukturen abbilden n  h"p://bradfrostweb.com/blog/web/responsive-­‐nav-­‐pa"erns/   n  h"p://bradfrostweb.com/blog/web/complex-­‐naviga;on-­‐pa"erns-­‐for-­‐responsive-­‐design/ n  Suche n  Jederzeit anbieten! n  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 Breadcrumb als Expansionselement Klassischer Breadcrumb Darstellung problematisch (Conrad)
34. + Ich will bestellen! Gestaltung des Bestellbuttons n  Aufmerksamkeitsstark n  Unmittelbar verständlich n  Preis & Produktvariante im Blick Übersichtlich? (Otto) Wo ist er? (H&M) Welcher ist es? (Conrad) Kaufen oder kaufen? (Baur)
35. + Weitere Infos: n  Nächstes UXBN J n  Artikelreihe auf anstrengungslos.de Antwortverhalten Perfomance aus Benutzersicht. Heuristische Expertenevaluation Testkauf (Mystery Shopping) n  Seitenaufbau für Relevanz (ATF!*) optimieren n  Jede Interaktion hat ein unmittelbares Feedback Vergleichende Analyse n  Datenübertragung minimieren n  Bilder optimieren Daten reduzieren Richtig messen! Darstellung optimieren Real User Monitoring Weitere Infos *ATF = Above the fold; ohne Scrollen sichtbarer Teil der Webseite
36. + Mobile Web Commerce Benchmark Es gibt noch so viel mehr. Domainstrategie Fingerfreundlichkeit Produkt auswählen Bestellprozess Service Mobil Cross Channel Cross Device Tablet-Unterstützung Web Performance Navigation und Suche App-Strategie
37. + Fazit
38. Still a rough experience http://www.flickr.com/photos/romankphoto/9574527901/
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) Thronfolger Stiefkind Aus Nutzersicht: Status Quo:
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  Photoshop-Layouts n  Keine (passende) Content Strategie n  Kein nutzerzentriertes Design n  Testprozess mit einer großen Anzahl an Devices fehlt n  IT überfordert n  Lange Anpassungszyklen n  Unflexible Plattformen
41. + Erscheinungstermin Studie: Januar 2014 Weitere Infos zur Studie (ab Dezember): http://www.anstrengungslos.de/mwcb Download dieser Präsentation: https://speakerdeck.com/hjbelz
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