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