thumbs up? oberflächen für thumb flow optimieren

33
Andy Pillip, Thomas Eichinger | Pillip vs. Eichinger Thumbs up?

Upload: andypillip

Post on 23-Feb-2017

522 views

Category:

Presentations & Public Speaking


1 download

TRANSCRIPT

Andy  Pillip,  Thomas  Eichinger      |      Pillip  vs.  Eichinger  

Thumbs  up?  

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  

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]  

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  

Abhängig  von:  

§  Gewicht  und  Größe  §  Unterlage  §  Eigener  Posi@on  §  App  (Wechselwirkung)  

Tablethaltung  

© Luke Wroblewski 2013

§  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  

§  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  

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  

Erreichbarkeit  auf  Smartphones  [Hoober  2013a]  

Für  Ziele  in  orangen  Bereichen  muss  man  die  Finger  strecken,  für  rote  Bereiche  umgreifen.    

Daumen  rechts  

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  

10“  Tablet   3   6  

EvaluaWon:  Toggle  NavigaWon  

...

Thumbs  Up   Thumbs  Down  

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)  

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  

Touch  by  Zones  [Hoober2013b]  

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  

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ährliche  Ak@onen  (z.B.  Löschen)  

Nutzer  ziehen  sich  Touch  Ziele  auch  unter  den  Daumen.  

Danke  und  Servus!  

hjp://pvse.com  

Pillip  vs.  Eichinger  

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  

§  Frost,  Brad  (2012)  Responsive  Pajerns  hjp://bradfrost.github.io/this-­‐is-­‐responsive/pajerns.html  

Quellenangaben  2