SlideShare ist ein Scribd-Unternehmen logo
+
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 2Galaxy Note 4iPhone 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
SmartphoneTabletPC
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

Weitere ähnliche Inhalte

Andere mochten auch

10 Ways to Win at SlideShare SEO & Presentation Optimization
10 Ways to Win at SlideShare SEO & Presentation Optimization10 Ways to Win at SlideShare SEO & Presentation Optimization
10 Ways to Win at SlideShare SEO & Presentation Optimization
Oneupweb
 
How To Get More From SlideShare - Super-Simple Tips For Content Marketing
How To Get More From SlideShare - Super-Simple Tips For Content MarketingHow To Get More From SlideShare - Super-Simple Tips For Content Marketing
How To Get More From SlideShare - Super-Simple Tips For Content Marketing
Content Marketing Institute
 
A Guide to SlideShare Analytics - Excerpts from Hubspot's Step by Step Guide ...
A Guide to SlideShare Analytics - Excerpts from Hubspot's Step by Step Guide ...A Guide to SlideShare Analytics - Excerpts from Hubspot's Step by Step Guide ...
A Guide to SlideShare Analytics - Excerpts from Hubspot's Step by Step Guide ...
SlideShare
 
DEFINIR EL PROBLEMA - VENTA CONSULTIVA
DEFINIR EL PROBLEMA - VENTA CONSULTIVADEFINIR EL PROBLEMA - VENTA CONSULTIVA
DEFINIR EL PROBLEMA - VENTA CONSULTIVA
Harry Walt Rosales Parra
 
Derecho civil bienes - curso jgch -uan-bis
Derecho civil   bienes - curso jgch -uan-bisDerecho civil   bienes - curso jgch -uan-bis
Derecho civil bienes - curso jgch -uan-bis
Universidad Autónoma de Nayarit, México
 
Promoção de vendas leandro 02
Promoção de vendas   leandro 02Promoção de vendas   leandro 02
Promoção de vendas leandro 02
Leandro Krug Batista
 
Monthly Planner 2017
Monthly Planner 2017Monthly Planner 2017
Monthly Planner 2017
Rigo Sigala
 
2015 Upload Campaigns Calendar - SlideShare
2015 Upload Campaigns Calendar - SlideShare2015 Upload Campaigns Calendar - SlideShare
2015 Upload Campaigns Calendar - SlideShare
SlideShare
 
Tumores Hepaticos
Tumores HepaticosTumores Hepaticos
Tumores Hepaticos
Carlos Renato Cengarle
 
12. funciones cognitivas.
12. funciones cognitivas.12. funciones cognitivas.
12. funciones cognitivas.
safoelc
 
Especificaciones generales de etiquetado
Especificaciones generales de etiquetadoEspecificaciones generales de etiquetado
Especificaciones generales de etiquetado
Colectivo Ecologista Jalisco
 
Transporte
TransporteTransporte
La autoestima en la mujer
La autoestima en la mujerLa autoestima en la mujer
La autoestima en la mujer
Beatriz Adriana
 
Hojas sueltas
Hojas sueltasHojas sueltas
Cadera
Cadera Cadera
Exercícios Prova ANAC - Bloco 1
Exercícios Prova ANAC - Bloco 1Exercícios Prova ANAC - Bloco 1
Exercícios Prova ANAC - Bloco 1
MELHORANDO PESSOAS
 
What to Upload to SlideShare
What to Upload to SlideShareWhat to Upload to SlideShare
What to Upload to SlideShare
SlideShare
 
Open Source in der Luft- und Raumfahrt-Forschung
Open Source in der Luft- und Raumfahrt-ForschungOpen Source in der Luft- und Raumfahrt-Forschung
Open Source in der Luft- und Raumfahrt-Forschung
Andreas Schreiber
 

Andere mochten auch (20)

10 Ways to Win at SlideShare SEO & Presentation Optimization
10 Ways to Win at SlideShare SEO & Presentation Optimization10 Ways to Win at SlideShare SEO & Presentation Optimization
10 Ways to Win at SlideShare SEO & Presentation Optimization
 
How To Get More From SlideShare - Super-Simple Tips For Content Marketing
How To Get More From SlideShare - Super-Simple Tips For Content MarketingHow To Get More From SlideShare - Super-Simple Tips For Content Marketing
How To Get More From SlideShare - Super-Simple Tips For Content Marketing
 
A Guide to SlideShare Analytics - Excerpts from Hubspot's Step by Step Guide ...
A Guide to SlideShare Analytics - Excerpts from Hubspot's Step by Step Guide ...A Guide to SlideShare Analytics - Excerpts from Hubspot's Step by Step Guide ...
A Guide to SlideShare Analytics - Excerpts from Hubspot's Step by Step Guide ...
 
DEFINIR EL PROBLEMA - VENTA CONSULTIVA
DEFINIR EL PROBLEMA - VENTA CONSULTIVADEFINIR EL PROBLEMA - VENTA CONSULTIVA
DEFINIR EL PROBLEMA - VENTA CONSULTIVA
 
Derecho civil bienes - curso jgch -uan-bis
Derecho civil   bienes - curso jgch -uan-bisDerecho civil   bienes - curso jgch -uan-bis
Derecho civil bienes - curso jgch -uan-bis
 
Promoção de vendas leandro 02
Promoção de vendas   leandro 02Promoção de vendas   leandro 02
Promoção de vendas leandro 02
 
Monthly Planner 2017
Monthly Planner 2017Monthly Planner 2017
Monthly Planner 2017
 
2015 Upload Campaigns Calendar - SlideShare
2015 Upload Campaigns Calendar - SlideShare2015 Upload Campaigns Calendar - SlideShare
2015 Upload Campaigns Calendar - SlideShare
 
Tumores Hepaticos
Tumores HepaticosTumores Hepaticos
Tumores Hepaticos
 
12. funciones cognitivas.
12. funciones cognitivas.12. funciones cognitivas.
12. funciones cognitivas.
 
Especificaciones generales de etiquetado
Especificaciones generales de etiquetadoEspecificaciones generales de etiquetado
Especificaciones generales de etiquetado
 
TPS 01 Kampung Salo (KDI)
TPS 01 Kampung Salo (KDI)TPS 01 Kampung Salo (KDI)
TPS 01 Kampung Salo (KDI)
 
Transporte
TransporteTransporte
Transporte
 
La autoestima en la mujer
La autoestima en la mujerLa autoestima en la mujer
La autoestima en la mujer
 
Hojas sueltas
Hojas sueltasHojas sueltas
Hojas sueltas
 
Cadera
Cadera Cadera
Cadera
 
Generation netzwerk2010
Generation netzwerk2010Generation netzwerk2010
Generation netzwerk2010
 
Exercícios Prova ANAC - Bloco 1
Exercícios Prova ANAC - Bloco 1Exercícios Prova ANAC - Bloco 1
Exercícios Prova ANAC - Bloco 1
 
What to Upload to SlideShare
What to Upload to SlideShareWhat to Upload to SlideShare
What to Upload to SlideShare
 
Open Source in der Luft- und Raumfahrt-Forschung
Open Source in der Luft- und Raumfahrt-ForschungOpen Source in der Luft- und Raumfahrt-Forschung
Open Source in der Luft- und Raumfahrt-Forschung
 

Ähnlich wie Einkaufen mit dem Tablet

Mobile Online Shops – Stiefkinder oder Thronfolger?
Mobile Online Shops – Stiefkinder oder Thronfolger?Mobile Online Shops – Stiefkinder oder Thronfolger?
Mobile Online Shops – Stiefkinder oder Thronfolger?
Hans-Joachim Belz
 
datenwerk Kochbuch: Webdesign- Trends 2014 (de)
datenwerk Kochbuch: Webdesign- Trends 2014  (de)datenwerk Kochbuch: Webdesign- Trends 2014  (de)
datenwerk Kochbuch: Webdesign- Trends 2014 (de)
datenwerk innovationsagentur
 
Mobile User Experience - Entwicklung von benutzerfreundlichen mobilen Website...
Mobile User Experience - Entwicklung von benutzerfreundlichen mobilen Website...Mobile User Experience - Entwicklung von benutzerfreundlichen mobilen Website...
Mobile User Experience - Entwicklung von benutzerfreundlichen mobilen Website...Christoph Mühlbauer
 
Mobile User Experience: Entwicklung von benutzerfreundlichen mobilen Websites...
Mobile User Experience: Entwicklung von benutzerfreundlichen mobilen Websites...Mobile User Experience: Entwicklung von benutzerfreundlichen mobilen Websites...
Mobile User Experience: Entwicklung von benutzerfreundlichen mobilen Websites...
usability.de
 
IA Konferenz München 2011
IA Konferenz München 2011IA Konferenz München 2011
IA Konferenz München 2011
Alexander Beck
 
Multiscreen Experience (Mai 2012, IA Konferenz, Essen)
Multiscreen Experience (Mai 2012, IA Konferenz, Essen)Multiscreen Experience (Mai 2012, IA Konferenz, Essen)
Multiscreen Experience (Mai 2012, IA Konferenz, Essen)
digiparden GmbH
 
The Future of Digital Banking - Übergangslos, mobile, abschlussstark!
The Future of Digital Banking - Übergangslos, mobile, abschlussstark!The Future of Digital Banking - Übergangslos, mobile, abschlussstark!
The Future of Digital Banking - Übergangslos, mobile, abschlussstark!Namics – A Merkle Company
 
Micro UX. Wie Produkte wirklich Spaß machen (2014)
Micro UX. Wie Produkte wirklich Spaß machen (2014)Micro UX. Wie Produkte wirklich Spaß machen (2014)
Micro UX. Wie Produkte wirklich Spaß machen (2014)
denkwerk GmbH
 
WUD Berlin 2010
WUD Berlin 2010WUD Berlin 2010
WUD Berlin 2010
Alexander Beck
 
7 UX-Trends, auf die Sie sich im Jahr 2018 freuen müssen, um die End nutzer Z...
7 UX-Trends, auf die Sie sich im Jahr 2018 freuen müssen, um die End nutzer Z...7 UX-Trends, auf die Sie sich im Jahr 2018 freuen müssen, um die End nutzer Z...
7 UX-Trends, auf die Sie sich im Jahr 2018 freuen müssen, um die End nutzer Z...
Dieter Ziegler
 
Size Matters. Responsive-Design-Lösungen mit denkwerk (2013)
Size Matters. Responsive-Design-Lösungen mit denkwerk (2013)Size Matters. Responsive-Design-Lösungen mit denkwerk (2013)
Size Matters. Responsive-Design-Lösungen mit denkwerk (2013)
denkwerk GmbH
 
Responsive Web Design am Beispiel von Virato (Social News Aggregator)
Responsive Web Design am Beispiel von Virato (Social News Aggregator)Responsive Web Design am Beispiel von Virato (Social News Aggregator)
Responsive Web Design am Beispiel von Virato (Social News Aggregator)
curtis newton gmbh (formerly known as dw capital gmbh)
 
Don't shoot me – I'm only the customer. 7 Thesen für Marken für Menschen
Don't shoot me – I'm only the customer. 7 Thesen für Marken für MenschenDon't shoot me – I'm only the customer. 7 Thesen für Marken für Menschen
Don't shoot me – I'm only the customer. 7 Thesen für Marken für Menschen
think moto GmbH
 
Responsive Design | Fluid | Mobile
Responsive Design | Fluid | MobileResponsive Design | Fluid | Mobile
Responsive Design | Fluid | Mobile
CS2 AG
 
Touchpoint Experience
Touchpoint ExperienceTouchpoint Experience
Touchpoint Experience
Oliver Böpple
 
Anforderungen an das Touchscreen-Design
Anforderungen an das Touchscreen-DesignAnforderungen an das Touchscreen-Design
Anforderungen an das Touchscreen-Design
soultank AG
 
Usability-Trends 2014 - Worauf es ankommt bei der Online-Präsenz
Usability-Trends 2014 - Worauf es ankommt bei der Online-PräsenzUsability-Trends 2014 - Worauf es ankommt bei der Online-Präsenz
Usability-Trends 2014 - Worauf es ankommt bei der Online-Präsenz
userfeedback
 
Mobile Marketing für KMU‘s: Das Momentum des Kaufsentscheids beeinflussen
Mobile Marketing für KMU‘s: Das Momentum des Kaufsentscheids beeinflussenMobile Marketing für KMU‘s: Das Momentum des Kaufsentscheids beeinflussen
Mobile Marketing für KMU‘s: Das Momentum des Kaufsentscheids beeinflussen
gbanga
 
20130711 - Mobile I - Millennial Media - Gregor Fellner
20130711 - Mobile I - Millennial Media - Gregor Fellner20130711 - Mobile I - Millennial Media - Gregor Fellner
20130711 - Mobile I - Millennial Media - Gregor Fellner
Werbeplanung.at Summit
 
Responsive Design by Peter Grosskopf
Responsive Design by Peter GrosskopfResponsive Design by Peter Grosskopf
Responsive Design by Peter Grosskopf
Peter Grosskopf
 

Ähnlich wie Einkaufen mit dem Tablet (20)

Mobile Online Shops – Stiefkinder oder Thronfolger?
Mobile Online Shops – Stiefkinder oder Thronfolger?Mobile Online Shops – Stiefkinder oder Thronfolger?
Mobile Online Shops – Stiefkinder oder Thronfolger?
 
datenwerk Kochbuch: Webdesign- Trends 2014 (de)
datenwerk Kochbuch: Webdesign- Trends 2014  (de)datenwerk Kochbuch: Webdesign- Trends 2014  (de)
datenwerk Kochbuch: Webdesign- Trends 2014 (de)
 
Mobile User Experience - Entwicklung von benutzerfreundlichen mobilen Website...
Mobile User Experience - Entwicklung von benutzerfreundlichen mobilen Website...Mobile User Experience - Entwicklung von benutzerfreundlichen mobilen Website...
Mobile User Experience - Entwicklung von benutzerfreundlichen mobilen Website...
 
Mobile User Experience: Entwicklung von benutzerfreundlichen mobilen Websites...
Mobile User Experience: Entwicklung von benutzerfreundlichen mobilen Websites...Mobile User Experience: Entwicklung von benutzerfreundlichen mobilen Websites...
Mobile User Experience: Entwicklung von benutzerfreundlichen mobilen Websites...
 
IA Konferenz München 2011
IA Konferenz München 2011IA Konferenz München 2011
IA Konferenz München 2011
 
Multiscreen Experience (Mai 2012, IA Konferenz, Essen)
Multiscreen Experience (Mai 2012, IA Konferenz, Essen)Multiscreen Experience (Mai 2012, IA Konferenz, Essen)
Multiscreen Experience (Mai 2012, IA Konferenz, Essen)
 
The Future of Digital Banking - Übergangslos, mobile, abschlussstark!
The Future of Digital Banking - Übergangslos, mobile, abschlussstark!The Future of Digital Banking - Übergangslos, mobile, abschlussstark!
The Future of Digital Banking - Übergangslos, mobile, abschlussstark!
 
Micro UX. Wie Produkte wirklich Spaß machen (2014)
Micro UX. Wie Produkte wirklich Spaß machen (2014)Micro UX. Wie Produkte wirklich Spaß machen (2014)
Micro UX. Wie Produkte wirklich Spaß machen (2014)
 
WUD Berlin 2010
WUD Berlin 2010WUD Berlin 2010
WUD Berlin 2010
 
7 UX-Trends, auf die Sie sich im Jahr 2018 freuen müssen, um die End nutzer Z...
7 UX-Trends, auf die Sie sich im Jahr 2018 freuen müssen, um die End nutzer Z...7 UX-Trends, auf die Sie sich im Jahr 2018 freuen müssen, um die End nutzer Z...
7 UX-Trends, auf die Sie sich im Jahr 2018 freuen müssen, um die End nutzer Z...
 
Size Matters. Responsive-Design-Lösungen mit denkwerk (2013)
Size Matters. Responsive-Design-Lösungen mit denkwerk (2013)Size Matters. Responsive-Design-Lösungen mit denkwerk (2013)
Size Matters. Responsive-Design-Lösungen mit denkwerk (2013)
 
Responsive Web Design am Beispiel von Virato (Social News Aggregator)
Responsive Web Design am Beispiel von Virato (Social News Aggregator)Responsive Web Design am Beispiel von Virato (Social News Aggregator)
Responsive Web Design am Beispiel von Virato (Social News Aggregator)
 
Don't shoot me – I'm only the customer. 7 Thesen für Marken für Menschen
Don't shoot me – I'm only the customer. 7 Thesen für Marken für MenschenDon't shoot me – I'm only the customer. 7 Thesen für Marken für Menschen
Don't shoot me – I'm only the customer. 7 Thesen für Marken für Menschen
 
Responsive Design | Fluid | Mobile
Responsive Design | Fluid | MobileResponsive Design | Fluid | Mobile
Responsive Design | Fluid | Mobile
 
Touchpoint Experience
Touchpoint ExperienceTouchpoint Experience
Touchpoint Experience
 
Anforderungen an das Touchscreen-Design
Anforderungen an das Touchscreen-DesignAnforderungen an das Touchscreen-Design
Anforderungen an das Touchscreen-Design
 
Usability-Trends 2014 - Worauf es ankommt bei der Online-Präsenz
Usability-Trends 2014 - Worauf es ankommt bei der Online-PräsenzUsability-Trends 2014 - Worauf es ankommt bei der Online-Präsenz
Usability-Trends 2014 - Worauf es ankommt bei der Online-Präsenz
 
Mobile Marketing für KMU‘s: Das Momentum des Kaufsentscheids beeinflussen
Mobile Marketing für KMU‘s: Das Momentum des Kaufsentscheids beeinflussenMobile Marketing für KMU‘s: Das Momentum des Kaufsentscheids beeinflussen
Mobile Marketing für KMU‘s: Das Momentum des Kaufsentscheids beeinflussen
 
20130711 - Mobile I - Millennial Media - Gregor Fellner
20130711 - Mobile I - Millennial Media - Gregor Fellner20130711 - Mobile I - Millennial Media - Gregor Fellner
20130711 - Mobile I - Millennial Media - Gregor Fellner
 
Responsive Design by Peter Grosskopf
Responsive Design by Peter GrosskopfResponsive Design by Peter Grosskopf
Responsive Design by Peter Grosskopf
 

Mehr von Hans-Joachim Belz

Designing Voice AI for the Contact Center
Designing Voice AI for the Contact CenterDesigning Voice AI for the Contact Center
Designing Voice AI for the Contact Center
Hans-Joachim Belz
 
How to unsuck (big) organizations
How to unsuck (big) organizationsHow to unsuck (big) organizations
How to unsuck (big) organizations
Hans-Joachim Belz
 
Agil und kreativ - Moderne Designprozesse
Agil und kreativ - Moderne DesignprozesseAgil und kreativ - Moderne Designprozesse
Agil und kreativ - Moderne Designprozesse
Hans-Joachim Belz
 
Quality time with the user
Quality time with the userQuality time with the user
Quality time with the user
Hans-Joachim Belz
 
Lean Usability Testing - Einfache Tests ohne Uselab (UXCW16)
Lean Usability Testing - Einfache Tests ohne Uselab (UXCW16)Lean Usability Testing - Einfache Tests ohne Uselab (UXCW16)
Lean Usability Testing - Einfache Tests ohne Uselab (UXCW16)
Hans-Joachim Belz
 
Expert Reviews in the Age of Mobile
Expert Reviews in the Age of MobileExpert Reviews in the Age of Mobile
Expert Reviews in the Age of Mobile
Hans-Joachim Belz
 
Wie der Hammer fällt - Mobile Web Performance aus Nutzersicht
Wie der Hammer fällt - Mobile Web Performance aus NutzersichtWie der Hammer fällt - Mobile Web Performance aus Nutzersicht
Wie der Hammer fällt - Mobile Web Performance aus Nutzersicht
Hans-Joachim Belz
 

Mehr von Hans-Joachim Belz (7)

Designing Voice AI for the Contact Center
Designing Voice AI for the Contact CenterDesigning Voice AI for the Contact Center
Designing Voice AI for the Contact Center
 
How to unsuck (big) organizations
How to unsuck (big) organizationsHow to unsuck (big) organizations
How to unsuck (big) organizations
 
Agil und kreativ - Moderne Designprozesse
Agil und kreativ - Moderne DesignprozesseAgil und kreativ - Moderne Designprozesse
Agil und kreativ - Moderne Designprozesse
 
Quality time with the user
Quality time with the userQuality time with the user
Quality time with the user
 
Lean Usability Testing - Einfache Tests ohne Uselab (UXCW16)
Lean Usability Testing - Einfache Tests ohne Uselab (UXCW16)Lean Usability Testing - Einfache Tests ohne Uselab (UXCW16)
Lean Usability Testing - Einfache Tests ohne Uselab (UXCW16)
 
Expert Reviews in the Age of Mobile
Expert Reviews in the Age of MobileExpert Reviews in the Age of Mobile
Expert Reviews in the Age of Mobile
 
Wie der Hammer fällt - Mobile Web Performance aus Nutzersicht
Wie der Hammer fällt - Mobile Web Performance aus NutzersichtWie der Hammer fällt - Mobile Web Performance aus Nutzersicht
Wie der Hammer fällt - Mobile Web Performance aus Nutzersicht
 

Einkaufen mit dem Tablet

  • 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
  • 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)
  • 17.
  • 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
  • 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