+

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