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.

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. + 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. +
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. +
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. +
Beispiele für „Tablets“

6. +
Keine Tablets, oder?
Galaxy Mega 2Galaxy Note 4iPhone 6 Plus
Phablets
MacBook Air, Ultra Portables, Win 8 Hybriden

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. +
Welche Charakteristika sind
bestimmend für Tablet Design?
Displaygröße
Bestimmt den
sichtbaren Kontext
Seitenverhältnis
Rahmenbedingung
für das Layout

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. +
Weitere Faktoren ...
Aktuelle Bandbreite
Lade- und Reaktionszeiten
Pixeldichte
Schärfe und Detailgrad der Darstellung
Betriebssystem / Browser
Erwartungen und mentales Modell des
Nutzers
( )

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. 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. Gestaltung der Startseite
SmartphoneTabletPC
Navigation
Contentbereich bietet
(auch) strukturierten
Überblick
Inspiration
Contentbereich ist
Werbefläche

14. Breuninger
Smartphone + kleine Tablets
Hamburger Menü trotz Kinoformat
Nexus 4 Nexus 7 (Landscape)

15. Breuninger
Große Tablets
Landscape und Portrait zeigen unterschiedliche Nutzerführung
iPad (Landscape) iPad (Portrait)

16. Breuninger
Menü aufgeklappt
Unnötig schwierige Navigation auf kleinen Tablets
iPad (Landscape)
Nexus 7 (Landscape)

18. Sheego
Artikeldetailseite
Horizontale Breakpoints allein
sind nicht ausreichend

19. 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

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

21. 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)

22. +
Es gäbe noch so viel zu sagen ...
War das ?
@Anstrengungslos
www.anstrengungslos.de
Mobile Web Commerce Benchmark,
Anstrengungslos/ECC Köln

23. +
Zugabe! J

24. +
Produktseite auf Sieben Zoll
H&M
n Gute Lesbarkeit ohne Zoom
n Variantenauswahl per Touch
n Ansichten touch-optimiert

25. +
Warenkorb auf Sieben Zoll
H&M
n Gute Lesbarkeit ohne Zoom
n Adäquate Produktbilder
n Konfiguration touch-optimiert

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

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

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