Einkaufen mit dem Tablet

1.850 Aufrufe

Veröffentlicht am

Design und Usability tablet-optimierter eCommerce Angebote (Vortrag auf dem UX Congress 2014 in Frankfurt): Immer noch sind die wenigsten eCommerce-Angebote im Web an die Bedürfnisse von Tablet-Nutzern angepasst, obwohl sich diese Geräteklasse neben dem Smartphone als Alternative zu PC und Notebook etabliert hat. Insbesondere Nutzer der beliebten kleineren 7 Zoll Tablets erleben ein Web voller Unzulänglichkeiten. Wer optimiert jetzt schon konsequent für den Tablet Commerce? Und wie schlagen sich Responsive Design Ansätze in diesem Umfeld? Der Vortrag gibt einen Überblick über aktuelle Entwicklungen und versteht sich als Ergänzung und Update zum Mobile Web Commerce Benchmark, den Anstrengungslos in Kooperation mit dem ECC Köln veröffentlicht hat.

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

Keine Downloads
Aufrufe
Aufrufe insgesamt
1.850
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
20
Aktionen
Geteilt
0
Downloads
6
Kommentare
0
Gefällt mir
3
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Einkaufen mit dem Tablet

  1. 1. + Einkaufen mit dem Tablet Design und Usability tablet-optimierter eCommerce Angebote UX Congress 2014, Frankfurt, 11.11.2014 Anstrengungslos 2014. Alle Rechte vorbehalten.
  2. 2. + Dinge, die man gerne tut, sind Bonner Beratungsteam Gegründet 2013 als Zusammenschluss zweier Freiberufler. Beratung, Training und Coaching n  Multi-Screen-Strategie und Usability Consulting n  Schwerpunkt Mobile Web Usability eCommerce n  Digitale & Mobile Transformation Interdisziplinär, anbieterneutral, pragmatisch
  3. 3. + Mobile Shopping ist ein Erlebnis zweiter Klasse (MWCB, April 2014) n  Baur n  Zalando n  H&M n  Amazon n  Esprit n  Conrad n  Tchibo n  Cyberport n  OTTO n  notebooksbilliger.de n  H&M n  Baur n  Tchibo n  Esprit n  OTTO n  Cyberport n  Zalando n  Conrad n  Amazon n  notebooksbilliger.de 70% 75% 60% 69% 45% 8%
  4. 4. + n 6 Zoll Display n 1440×2560 Pixel n 6 Zoll Display n 1280×800 Pixel Was ist ein Tablet? Fire HD6 von Amazon n  6 Zoll Display n  1280×800 Pixel Auflösung n  16:10 Seitenverhältnis Nexus 6 von Google n  6 Zoll Display n  1440×2560 Pixel Auflösung n  16:9 Seitenverhältnis Tablet Smartphone
  5. 5. + Beispiele für „Tablets“
  6. 6. + Keine Tablets, oder? Galaxy Mega 2Galaxy Note 4iPhone 6 Plus Phablets MacBook Air, Ultra Portables, Win 8 Hybriden
  7. 7. + Geräteklassen sind kein fruchtbares Konzept The Internet Device formerly known as Tablet No Prince No Tablet TIDFKAT Foto: http://www.flickr.com/photos/nicogenin/3987371599/
  8. 8. + Welche Charakteristika sind bestimmend für Tablet Design? Displaygröße Bestimmt den sichtbaren Kontext Seitenverhältnis Rahmenbedingung für das Layout
  9. 9. Aus eins mach zwei ... Seitenverhältnisse kommen im Doppelpack Bevorzugte Geräteorientierung (ggf. je nach Use Case) Keine so eindeutige Präferenz wie bei Smartphones (für Portrait)! Zeichen schlechter Usability? (Landscape = Desktop)
  10. 10. + Weitere Faktoren ... Aktuelle Bandbreite Lade- und Reaktionszeiten Pixeldichte Schärfe und Detailgrad der Darstellung Betriebssystem / Browser Erwartungen und mentales Modell des Nutzers ( )
  11. 11. + Ein minimales Tablet Device Lab Für Designer und UX Manager Weitere Optionen:Windows Tablets, Kindle Fire Tablets n  Android Tablets im Seitenformat 16:10 und 7/8/10 Zoll n  iPads im Seitenformat 4:3 und 8/10 Zoll
  12. 12. Kein verlässlicher Faktor: Auflösung Für das Design irrelevant bis irreführend iPad Air (9,7“) und iPad mini 2 (7,9“) Nativ: 2048 x 1536 CSS-Pixel: 1024 x 768 Device Pixel Ratio: 2 3,5 cm 3 x 30 mm 4,5 x 37 mm
  13. 13. Gestaltung der Startseite SmartphoneTabletPC Navigation Contentbereich bietet (auch) strukturierten Überblick Inspiration Contentbereich ist Werbefläche
  14. 14. Breuninger Smartphone + kleine Tablets Hamburger Menü trotz Kinoformat Nexus 4 Nexus 7 (Landscape)
  15. 15. Breuninger Große Tablets Landscape und Portrait zeigen unterschiedliche Nutzerführung iPad (Landscape) iPad (Portrait)
  16. 16. Breuninger Menü aufgeklappt Unnötig schwierige Navigation auf kleinen Tablets iPad (Landscape) Nexus 7 (Landscape)
  17. 17. Sheego Artikeldetailseite Horizontale Breakpoints allein sind nicht ausreichend
  18. 18. Touch Ranges Design Empfehlungen auf Basis der Handhabung Falsch!Mit Skepsis zu betrachten. Bildquelle: Luke Wroblewskis Blog http://www.lukew.com/ff/entry.asp?1649
  19. 19. + Steven Hoober Wie Touch Devices wirklich genutzt werden n  Häufige Haltungsänderungen innerhalb einer Session n  Die Haltung wird den jeweiligen Erfordernissen angepasst n  Je größer das Device, desto wahrscheinlicher wird es nicht in der Hand gehalten (Ständer oder Ablage) n  „Centering“: n  Nutzer bevorzugen Interaktionen in der Mitte des Screens n  Nutzer tappen präziser in der Mitte des Screens http://www.uxmatters.com/mt/archives/2014/09/insights-on-switching-centering-and-gestures-for-touchscreens.php http://www.uxmatters.com/mt/archives/2014/11/the-rise-of-the-phablet-designing-for-larger-phones.php http://shoobe01.blogspot.de/2014/11/making-mlearning-usable-how-we-use.html https://www.youtube.com/watch?v=IT5YJ79J-S8
  20. 20. Alternate Ich google mal den Preis bei Alternate Top Ten Online Shop* Hau ab! Ich habe eine App! Skyscraper und Leeraum werden hier absichtlich eingeblendet. (initial-scale = 0,7)Fixierter Header *= In Deutschland erwirtschaftete Umsätze (EHI Retail Institut, 2014)
  21. 21. + Es gäbe noch so viel zu sagen ... War das ? @Anstrengungslos www.anstrengungslos.de Mobile Web Commerce Benchmark, Anstrengungslos/ECC Köln
  22. 22. + Zugabe! J
  23. 23. + Produktseite auf Sieben Zoll H&M n  Gute Lesbarkeit ohne Zoom n  Variantenauswahl per Touch n  Ansichten touch-optimiert
  24. 24. + Warenkorb auf Sieben Zoll H&M n  Gute Lesbarkeit ohne Zoom n  Adäquate Produktbilder n  Konfiguration touch-optimiert
  25. 25. + Fazit:Wider den mobilen Frust Kaum Budget (< 5000 Euro) n  Verhalten des Online Shops bei langsamen Verbindungen n  Nutzungsrelevante Messpunkte User Research & Usability Testing Antwortverhalten aus Nutzersicht (aka Performance) http://de.slideshare.net/hjbelz/131128-uxbn-mobile-web-performance Guerilla Remote Crowd
  26. 26. + Fingerfreundlichkeit Minimale Größe Touch-Flächen n  Sichere Bedienung mit dem Daumen erfordert noch größere Interaktionsflächen. n  Notwendigkeit zur Präzision verlangsamt die Bedienung (ggf.Wechsel von Fingerkuppe zu Fingerspitze). 7 mm 7 mm 2 mm Interaktionsfläche Abstand zu benachbarten Interaktionsflächen Sichtbares Element
  27. 27. + Fazit:Wider den mobilen Frust Kein Budget!Kein Budget! Kaum Budget (< 500 Euro) Konventionen & Best Practices Mobile Web Commerce Benchmark, Anstrengungslos/ECC Köln M-Commerce Usability, Baymard Institute

×