einkaufen mit dem tablet
TRANSCRIPT
![Page 1: Einkaufen mit dem Tablet](https://reader033.vdocuments.mx/reader033/viewer/2022052602/55c01f5cbb61ebc3098b45e6/html5/thumbnails/1.jpg)
+
Einkaufen mit dem Tablet Design und Usability tablet-optimierter eCommerce Angebote
UX Congress 2014, Frankfurt, 11.11.2014
Anstrengungslos 2014. Alle Rechte vorbehalten.
![Page 2: Einkaufen mit dem Tablet](https://reader033.vdocuments.mx/reader033/viewer/2022052602/55c01f5cbb61ebc3098b45e6/html5/thumbnails/2.jpg)
+ 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
![Page 3: Einkaufen mit dem Tablet](https://reader033.vdocuments.mx/reader033/viewer/2022052602/55c01f5cbb61ebc3098b45e6/html5/thumbnails/3.jpg)
+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%
![Page 4: Einkaufen mit dem Tablet](https://reader033.vdocuments.mx/reader033/viewer/2022052602/55c01f5cbb61ebc3098b45e6/html5/thumbnails/4.jpg)
+
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
![Page 5: Einkaufen mit dem Tablet](https://reader033.vdocuments.mx/reader033/viewer/2022052602/55c01f5cbb61ebc3098b45e6/html5/thumbnails/5.jpg)
+Beispiele für „Tablets“
![Page 6: Einkaufen mit dem Tablet](https://reader033.vdocuments.mx/reader033/viewer/2022052602/55c01f5cbb61ebc3098b45e6/html5/thumbnails/6.jpg)
+Keine Tablets, oder?
Galaxy Mega 2 Galaxy Note 4 iPhone 6 Plus
Phablets
MacBook Air, Ultra Portables, Win 8 Hybriden
![Page 7: Einkaufen mit dem Tablet](https://reader033.vdocuments.mx/reader033/viewer/2022052602/55c01f5cbb61ebc3098b45e6/html5/thumbnails/7.jpg)
+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/
![Page 8: Einkaufen mit dem Tablet](https://reader033.vdocuments.mx/reader033/viewer/2022052602/55c01f5cbb61ebc3098b45e6/html5/thumbnails/8.jpg)
+Welche Charakteristika sind bestimmend für Tablet Design?
Displaygröße Bestimmt den sichtbaren Kontext
Seitenverhältnis Rahmenbedingung für das Layout
![Page 9: Einkaufen mit dem Tablet](https://reader033.vdocuments.mx/reader033/viewer/2022052602/55c01f5cbb61ebc3098b45e6/html5/thumbnails/9.jpg)
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)
![Page 10: Einkaufen mit dem Tablet](https://reader033.vdocuments.mx/reader033/viewer/2022052602/55c01f5cbb61ebc3098b45e6/html5/thumbnails/10.jpg)
+Weitere Faktoren ...
Aktuelle Bandbreite Lade- und Reaktionszeiten
Pixeldichte Schärfe und Detailgrad der Darstellung
Betriebssystem / Browser Erwartungen und mentales Modell des Nutzers
( )
![Page 11: Einkaufen mit dem Tablet](https://reader033.vdocuments.mx/reader033/viewer/2022052602/55c01f5cbb61ebc3098b45e6/html5/thumbnails/11.jpg)
+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
![Page 12: Einkaufen mit dem Tablet](https://reader033.vdocuments.mx/reader033/viewer/2022052602/55c01f5cbb61ebc3098b45e6/html5/thumbnails/12.jpg)
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
![Page 13: Einkaufen mit dem Tablet](https://reader033.vdocuments.mx/reader033/viewer/2022052602/55c01f5cbb61ebc3098b45e6/html5/thumbnails/13.jpg)
Gestaltung der Startseite
Smartphone Tablet PC
Navigation Contentbereich bietet (auch) strukturierten
Überblick
Inspiration Contentbereich ist
Werbefläche
![Page 14: Einkaufen mit dem Tablet](https://reader033.vdocuments.mx/reader033/viewer/2022052602/55c01f5cbb61ebc3098b45e6/html5/thumbnails/14.jpg)
Breuninger
Smartphone + kleine Tablets
Hamburger Menü trotz Kinoformat
Nexus 4 Nexus 7 (Landscape)
![Page 15: Einkaufen mit dem Tablet](https://reader033.vdocuments.mx/reader033/viewer/2022052602/55c01f5cbb61ebc3098b45e6/html5/thumbnails/15.jpg)
Breuninger
Große Tablets
Landscape und Portrait zeigen unterschiedliche Nutzerführung
iPad (Landscape) iPad (Portrait)
![Page 16: Einkaufen mit dem Tablet](https://reader033.vdocuments.mx/reader033/viewer/2022052602/55c01f5cbb61ebc3098b45e6/html5/thumbnails/16.jpg)
Breuninger
Menü aufgeklappt
Unnötig schwierige Navigation auf kleinen Tablets
iPad (Landscape)
Nexus 7 (Landscape)
![Page 17: Einkaufen mit dem Tablet](https://reader033.vdocuments.mx/reader033/viewer/2022052602/55c01f5cbb61ebc3098b45e6/html5/thumbnails/17.jpg)
![Page 18: Einkaufen mit dem Tablet](https://reader033.vdocuments.mx/reader033/viewer/2022052602/55c01f5cbb61ebc3098b45e6/html5/thumbnails/18.jpg)
Sheego
Artikeldetailseite
Horizontale Breakpoints allein sind nicht ausreichend
![Page 19: Einkaufen mit dem Tablet](https://reader033.vdocuments.mx/reader033/viewer/2022052602/55c01f5cbb61ebc3098b45e6/html5/thumbnails/19.jpg)
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
![Page 20: Einkaufen mit dem Tablet](https://reader033.vdocuments.mx/reader033/viewer/2022052602/55c01f5cbb61ebc3098b45e6/html5/thumbnails/20.jpg)
+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
![Page 21: Einkaufen mit dem Tablet](https://reader033.vdocuments.mx/reader033/viewer/2022052602/55c01f5cbb61ebc3098b45e6/html5/thumbnails/21.jpg)
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)
![Page 22: Einkaufen mit dem Tablet](https://reader033.vdocuments.mx/reader033/viewer/2022052602/55c01f5cbb61ebc3098b45e6/html5/thumbnails/22.jpg)
+Es gäbe noch so viel zu sagen ...
War das ?
@Anstrengungslos
www.anstrengungslos.de Mobile Web Commerce Benchmark,
Anstrengungslos/ECC Köln
![Page 23: Einkaufen mit dem Tablet](https://reader033.vdocuments.mx/reader033/viewer/2022052602/55c01f5cbb61ebc3098b45e6/html5/thumbnails/23.jpg)
+Zugabe! J
![Page 24: Einkaufen mit dem Tablet](https://reader033.vdocuments.mx/reader033/viewer/2022052602/55c01f5cbb61ebc3098b45e6/html5/thumbnails/24.jpg)
+Produktseite auf Sieben Zoll
H&M n Gute Lesbarkeit ohne Zoom n Variantenauswahl per Touch n Ansichten touch-optimiert
![Page 25: Einkaufen mit dem Tablet](https://reader033.vdocuments.mx/reader033/viewer/2022052602/55c01f5cbb61ebc3098b45e6/html5/thumbnails/25.jpg)
+Warenkorb auf Sieben Zoll
H&M n Gute Lesbarkeit ohne Zoom n Adäquate Produktbilder n Konfiguration touch-optimiert
![Page 26: Einkaufen mit dem Tablet](https://reader033.vdocuments.mx/reader033/viewer/2022052602/55c01f5cbb61ebc3098b45e6/html5/thumbnails/26.jpg)
+ 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
![Page 27: Einkaufen mit dem Tablet](https://reader033.vdocuments.mx/reader033/viewer/2022052602/55c01f5cbb61ebc3098b45e6/html5/thumbnails/27.jpg)
+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
![Page 28: Einkaufen mit dem Tablet](https://reader033.vdocuments.mx/reader033/viewer/2022052602/55c01f5cbb61ebc3098b45e6/html5/thumbnails/28.jpg)
+ 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