• Like
  • Save
Mobile Online Shops – Stiefkinder oder Thronfolger?
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Mobile Online Shops – Stiefkinder oder Thronfolger?

  • 374 views
Published

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 …

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
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
374
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
0
Comments
0
Likes
5

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

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  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