Andy	
  Pillip,	
  Thomas	
  Eichinger	
  	
  	
  |	
  	
  	
  Pillip	
  vs.	
  Eichinger	
  
Thumbs	
  up?	
  
Responsive	
  Layouts	
  aus	
  CSS	
  Frameworks	
  
§  Passen	
  sich	
  an	
  unterschiedliche	
  Bildschirmgrößen	
  ...
Haltung	
   Grundhaltung	
   Varia@on	
  
Einhändig	
   49	
  %	
  
	
  Daumen	
  links	
   33	
  %	
  
	
  Daumen	
  rech...
Haltung	
   Portrait	
   Landscape	
  
Einhändig	
  
	
  Daumen	
  links	
  
	
  Daumen	
  rechts	
  
	
  Abgestellt	
  
B...
Abhängig	
  von:	
  
§  Gewicht	
  und	
  Größe	
  
§  Unterlage	
  
§  Eigener	
  Posi@on	
  
§  App	
  (Wechselwirku...
§  Aufgaben	
  müssen	
  ohne	
  Haltungswechsel	
  erledigt	
  
werden	
  können	
  
§  Fast	
  alle	
  Haltungen	
  be...
§  Nicht	
  alle	
  Punkte	
  sind	
  gleich	
  gut	
  zu	
  erreichen,	
  	
  
besonders	
  nicht	
  mit	
  dem	
  Daume...
Prototyp	
   Deckt	
  ab	
   Aufwand	
  
Papier	
   Verständnis,	
  Click-­‐Flow	
   gering	
  pro	
  Screen,	
  
gering	
...
Erreichbarkeit	
  auf	
  Smartphones	
  
[Hoober	
  2013a]	
  
Für	
  Ziele	
  in	
  orangen	
  Bereichen	
  muss	
  man	
...
Erreichbarkeit	
  auf	
  iPads	
  in	
  Portrait	
  
Erreichbarkeit	
  auf	
  Smartphones	
  Landscape	
  
1983	
  vs.	
  Heute	
  
1983	
  vs.	
  Heute	
  
Bildschirm	
  entsperren	
  –	
  iOS	
  vs.	
  Android	
  
Bildschirm	
  entsperren	
  –	
  iOS	
  vs.	
  Android	
  
Und	
  was	
  ist	
  mit	
  den	
  Pa^erns?	
  
Toggle	
  NavigaWon	
  
>	
  
Gerät	
   angenehm	
   mäßig	
   umständlich	
  
Telefon	
   1	
   9	
   1	
  
Oranges	
  7“	
  Tablet	
   1	
   5	
   2	
...
Ist	
  NavigaWon	
  primär	
  oder	
  sekundär?	
  
§  Anders:	
  Ist	
  Naviga@on	
  die	
  zentrale	
  Aufgabe?	
  
§ ...
Speed-­‐accuracy-­‐tradeoff	
  
§  Fijs‘	
  Gesetz:	
  
Zielgröße	
  und	
  Distanz	
  gegen	
  Geschwindigkeit	
  	
  
un...
Touch	
  by	
  Zones	
  
[Hoober2013b]	
  
Alles	
  ist	
  relaWv!	
  
§  Schlechte	
  Erreichbarkeit	
  kann	
  posi@v	
  
genutzt	
  werden	
  
§  Die	
  Bewertu...
Thumb	
  Flow	
  im	
  Kontext	
  
Thumb	
  Flow	
  im	
  Kontext	
  
Thumb	
  Flow	
  im	
  Kontext	
  
Thumb	
  Flow	
  im	
  Kontext	
  
Thumb	
  Flow	
  im	
  Kontext	
  
Thumb	
  Flow	
  im	
  Kontext	
  
Thumb	
  Flow	
  vs.	
  ÄstheWk	
  
Lücken	
  nutzen:	
  
§  Für	
  Informa@on	
  staj	
  Interak@on	
  
§  Für	
  gefäh...
Danke	
  und	
  Servus!	
  
hjp://pvse.com	
  
Pillip	
  vs.	
  Eichinger	
  
Quellenangaben	
  1	
  
§  Hoober,	
  Steven	
  (2013a)	
  How	
  Do	
  Users	
  Really	
  Hold	
  
Mobile	
  Devices?	
 ...
§  Frost,	
  Brad	
  (2012)	
  Responsive	
  Pajerns	
  
hjp://bradfrost.github.io/this-­‐is-­‐responsive/pajerns.html	
 ...
Thumbs Up? Oberflächen für Thumb Flow optimieren
Nächste SlideShare
Wird geladen in …5
×

Thumbs Up? Oberflächen für Thumb Flow optimieren

430 Aufrufe

Veröffentlicht am

Welche Bereiche sind am Smartphone oder Tablet schnell und einfach zu erreichen, ohne dass man das Gerät hinlegen oder kompliziert halten muss?

Vortrag von Pillip vs. Eichinger auf der Webinale hands-on im Dezember 2013.

Die Workshop-Ergebnisse finden sich auch in unserem Blog: http://pvse.com/blogeintrag/items/thumbs-up.html

Veröffentlicht in: Präsentationen & Vorträge
0 Kommentare
0 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Keine Downloads
Aufrufe
Aufrufe insgesamt
430
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
1
Aktionen
Geteilt
0
Downloads
0
Kommentare
0
Gefällt mir
0
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Thumbs Up? Oberflächen für Thumb Flow optimieren

  1. 1. Andy  Pillip,  Thomas  Eichinger      |      Pillip  vs.  Eichinger   Thumbs  up?  
  2. 2. Responsive  Layouts  aus  CSS  Frameworks   §  Passen  sich  an  unterschiedliche  Bildschirmgrößen  an   §  Berücksich@gen  mit  entsprechend  großen  Elementen   Touch-­‐Bedienung   §  Doch  ist  auch  die  Posi@on  der  Elemente  für  Touch   geeignet?   Für  Touch  gestalten  
  3. 3. Haltung   Grundhaltung   Varia@on   Einhändig   49  %    Daumen  links   33  %    Daumen  rechts   67  %   In  der  Hand   +bedienende  Hand   36  %    +  Zeigefinger   28  %    +  Daumen   72  %   Beide  Hände   15  %    Portrait   90  %    Landscape   10  %   49  %  halten  ihr  Smartphone  in  einer  Hand   [Hoober  2013a]  
  4. 4. Haltung   Portrait   Landscape   Einhändig    Daumen  links    Daumen  rechts    Abgestellt   Beide  Hände    Abgestellt   Freihändig    Abgelegt    Angelehnt   Wie  sieht‘s  bei  größeren  Geräten  aus?   Teilnehmer  mit  8“  Tablets  
  5. 5. Abhängig  von:   §  Gewicht  und  Größe   §  Unterlage   §  Eigener  Posi@on   §  App  (Wechselwirkung)   Tablethaltung   © Luke Wroblewski 2013
  6. 6. §  Aufgaben  müssen  ohne  Haltungswechsel  erledigt   werden  können   §  Fast  alle  Haltungen  benutzen  den  Daumen   als  Touch-­‐Finger   §  Also  müssen  wir  für  den  Daumen  gestalten   Thumb  Flow  
  7. 7. §  Nicht  alle  Punkte  sind  gleich  gut  zu  erreichen,     besonders  nicht  mit  dem  Daumen   §  Bei  größeren  Geräten  muss  eine  andere  Haltung   eingenommen  werden   §  Umgreifen  erfordert  kogni@ve  Leistung  und     unterbricht  den  Flow   Erreichbarkeit  
  8. 8. Prototyp   Deckt  ab   Aufwand   Papier   Verständnis,  Click-­‐Flow   gering  pro  Screen,   gering  pro  Gerät   Karton  +  Papier   Ergonomie  in     2  geometrischen   Dimensionen   gering  pro  Screen,   gering  pro  Gerät   Holz  +  Papier   Ergonomie   ohne  Kontraste   Gering  pro  Screen,   mäßig  pro  Gerät   Klick-­‐Prototyp   Volle  Programm   Aufwändig  pro  Screen,   wenig  spontan   EvaluaWonsmethoden  
  9. 9. Erreichbarkeit  auf  Smartphones   [Hoober  2013a]   Für  Ziele  in  orangen  Bereichen  muss  man   die  Finger  strecken,  für  rote  Bereiche   umgreifen.     Daumen  rechts  
  10. 10. Erreichbarkeit  auf  iPads  in  Portrait  
  11. 11. Erreichbarkeit  auf  Smartphones  Landscape  
  12. 12. 1983  vs.  Heute  
  13. 13. 1983  vs.  Heute  
  14. 14. Bildschirm  entsperren  –  iOS  vs.  Android  
  15. 15. Bildschirm  entsperren  –  iOS  vs.  Android  
  16. 16. Und  was  ist  mit  den  Pa^erns?  
  17. 17. Toggle  NavigaWon   >  
  18. 18. Gerät   angenehm   mäßig   umständlich   Telefon   1   9   1   Oranges  7“  Tablet   1   5   2   10“  Tablet   3   6   EvaluaWon:  Toggle  NavigaWon   ... Thumbs  Up   Thumbs  Down  
  19. 19. Ist  NavigaWon  primär  oder  sekundär?   §  Anders:  Ist  Naviga@on  die  zentrale  Aufgabe?   §  Hängt  von  der  Webseite  ab   §  Naviga@on  ist  in  allen  Frameworks   offensichtlich  sekundär  (versteckt,  schlecht  erreichbar)  
  20. 20. Speed-­‐accuracy-­‐tradeoff   §  Fijs‘  Gesetz:   Zielgröße  und  Distanz  gegen  Geschwindigkeit     und  Treffsicherheit   §  Für  gleiche  Treffsicherheit  müssen  also  Ziele  in  schlecht   zu  erreichenden  Bereichen  größer  sein  
  21. 21. Touch  by  Zones   [Hoober2013b]  
  22. 22. Alles  ist  relaWv!   §  Schlechte  Erreichbarkeit  kann  posi@v   genutzt  werden   §  Die  Bewertung  hill  Posi@onen     für  sekundäre  oder  gar  gefährliche   Funk@onen    zu  finden  
  23. 23. Thumb  Flow  im  Kontext  
  24. 24. Thumb  Flow  im  Kontext  
  25. 25. Thumb  Flow  im  Kontext  
  26. 26. Thumb  Flow  im  Kontext  
  27. 27. Thumb  Flow  im  Kontext  
  28. 28. Thumb  Flow  im  Kontext  
  29. 29. Thumb  Flow  vs.  ÄstheWk   Lücken  nutzen:   §  Für  Informa@on  staj  Interak@on   §  Für  gefährliche  Ak@onen  (z.B.  Löschen)   Nutzer  ziehen  sich  Touch  Ziele  auch  unter  den  Daumen.  
  30. 30. Danke  und  Servus!   hjp://pvse.com   Pillip  vs.  Eichinger  
  31. 31. Quellenangaben  1   §  Hoober,  Steven  (2013a)  How  Do  Users  Really  Hold   Mobile  Devices?   hjp://www.uxmajers.com/mt/archives/2013/02/how-­‐do-­‐users-­‐ really-­‐hold-­‐mobile-­‐devices.php   §  Hoober,  Steven  (2013b)  Design  for  Fingers  and  Thumbs   Instead  of  Touch   hjp://www.uxmajers.com/mt/archives/2013/11/design-­‐for-­‐fingers-­‐ and-­‐thumbs-­‐instead-­‐of-­‐touch.php   §  Wroblewski,  Luke  (2013)  New  Layouts  for  the  Mul@-­‐ Device  Web   hjp://www.lukew.com/ff/entry.asp?1721  
  32. 32. §  Frost,  Brad  (2012)  Responsive  Pajerns   hjp://bradfrost.github.io/this-­‐is-­‐responsive/pajerns.html   Quellenangaben  2  

×