micro interactions and multi dimensional graphical user interfaces in the design of wrist worn...

Micro interac+ons and Mul+ dimensional Graphical User Interfaces in the Design of

Wrist Worn Wearables

Prof. Vivian Genaro Mo? Prof. Kelly Caine

Clemson University

Los Angeles CA, October 29th, 2015

Human Centered CompuEng Division School of CompuEng

Advantages

•  Mount locaEon

•  ConEnuous skin contact

•  One hand interacEon

[Rawassizadeh, R., Price, B. a., and Petre, M. Wearables: Has the Age of Smartwatches Finally Arrived? CommunicaEons of the ACM 58, 1 (2014), 45–47.] 3

Wrist Worn Devices

•  Popular

•  ConvenEonal locaEon •  accessible

•  Blend in to users’ ou\its

4

Wearable InteracEon

•  Design challenges •  Limited resources •  Users in dynamic contexts •  Lack of support •  ParadigmaEc shi_s

6

Resources

•  ConnecEvity

•  Power

•  InteracEve Surfaces

•  Sensors & Actuators

•  Display

7

Challenges

‘Small screen size results in restricted I/O and their small hardware results in weaker compuEng capability and especially limited bacery capacity in comparison larger devices’


Dynamic Contexts

•  SituaEonal Impairments

•  Transient Requirements

•  Dynamic Constraints

9

Lack of Support

•  Guidelines

•  HeurisEcs

•  User centered design methods

•  EvaluaEon techniques and tools

10

ParadigmaEc Shi_s

•  Gesture based interacEon

•  VibrotacEle output responses

•  MulEmodaliEes

•  Augmented reality

11

Wearable CompuEng

•  Faced significant improvements in past decades •  Power, form factors, connecEvity

•  InteracEon design is sEll challenging •  New interacEon paradigms are needed

12

MoEvaEon

‘The screen restricEon requires fresh thinking on user interface (UI) designs and new interac+on techniques’


Approach

•  Empirical analysis of wearable interacEon

•  IdenEficaEon and definiEon of interacEon paradigms for wearable computers • Wrist worn devices

•  Cross-‐validaEon

14

Related Work

•  Industrial guidelines

•  ScienEfic research: focused •  One interacEon modality •  Either input or output

15

Design Guidelines

•  Industry •  Generic: suit different applicaEons •  Company-‐oriented

•  Academia •  Specific: modality, I/O, form factor, use case scenario, user populaEon

16

Gesture-‐Based Interac+on

[Bernaerts et al. 2014. The office smartwatch: development and design of a smartwatch app to digitally augment interacEons in an office environment. In DIS'14. ACM, New York, NY, USA, 41-‐44.] 17

Cross-‐Device Interac+on

[Houben, S., Brudy, F., and Marquardt, N. 2015. Challenges in Watch-‐Centric Cross-‐Device ApplicaEons. Mobile Co-‐Located InteracEons Workshop. CHI’2015. 1–4.] 18

EdgeTouch

[Oakley, I. and Lee, D. InteracEon on the Edge: Offset Sensing for Small Devices. CHI ’14, (2014), 169–178.] 19

Shimmering SmartWatches

[Xu, C., Lyons, K., and Ave, F. Shimmering Smartwatches : Exploring the Smartwatch Design Space. TEI, (2015).] 20

WatchIt

•  Gestures

•  Hands free interacEon

[Simon T. Perrault, Eric Lecolinet, James Eagan, and Yves Guiard. 2013. Watchit: simple gestures and eyes-‐free interacEon for wristwatches and bracelets. In CHI '13. ACM, New York, NY, USA, 1451-‐1460. DOI=10.1145/2470654.2466192] 21

Drawbacks

•  Small interacEve surfaces •  Fat fingers

•  Incidental input •  Midas gestures

•  Change the wrist posiEon •  Interrupts main task

22

Drawbacks

•  Small interacEve surfaces •  Fat fingers

•  Incidental input •  Midas gestures

•  Change the wrist posiEon •  Interrupts main task

24

Wearable User

•  Moving

•  MulEtasking

•  Unplanned InteracEon •  One hand •  Short Eme •  Outdoor and indoor

25

Context

•  Sitng, standing, walking

•  Driving, Working, Running

•  Watching TV, EaEng

•  Sleeping

26

Vision

•  Design interacEon to maximize the device strengths and minimize its drawbacks

28

Novel InteracEon Paradigms

•  Requirements •  Generic to suit different use case scenarios •  User-‐centric soluEon •  Quick, dynamic interacEon •  IntuiEve •  MulEmodal •  Context-‐sensiEve •  Energy-‐efficient

29

Wrist worn InteracEon Paradigms

•  Micro Interac+ons •  IntuiEve, efficient, energy-‐efficient

•  Mul+dimensional User Interfaces •  Overcome display limitaEons in graphic user interfaces

30

Micro InteracEons

•  Limited to •  Short duraEon: < 4 seconds •  One subtask at a Eme •  Either display content or provide navigaEon features

•  In graphic user interfaces •  For both input and output

31

Micro InteracEons

•  InteracEons with a device that take less than four seconds to iniEate and complete

•  Enable users to safely split their acenEon span between a wearable display and the real world •  non-‐main task interacEons •  performed on the go •  without distracEon from the main task

[Ivan Golod, Felix Heidrich, ChrisEan Möllering, and MarEna Ziefle. 2013. Design principles of hand gesture interfaces for microinteracEons. In DPPI '13. ACM, New York, NY, USA, 11-‐20.] 33

Examples

Modality Type Audio Beeps Gestures 1D 2D 3D

Tap, touch, hold, press, release Slide, pinch, scroll Move, act

Graphics Blink, light, display Tac+le Drag, slide, touch, press Vibra+on Buzz

34

UI CharacterisEcs

•  Glanceable

•  Relevant

•  Explicit

•  EssenEal

•  Simple

35

UI RecommendaEons

•  Text content: very brief

•  Display content or navigaEon

•  Just a few acEons at a Eme •  they remain consistent throughout the app to prevent confusion

36

MulEdimensional User Interfaces

•  Virtual extensions for a graphic UI •  Linear navigaEon in mulEdimensional direcEons •  Suitable for different form factors •  But limited to GUIs

37

SpaEal Display Metaphor

[Am_, Oliver, and Paul Lukowicz. "From backpacks to smartphones: Past, present, and future of wearable computers." IEEE Pervasive CompuEng 3 (2009): 8-‐13.] 39

Facet

[Lyons, K., Nguyen, D., Ashbrook, D., and White, S. Facet: A MulE-‐Segment Wrist Worn System. UIST ’12, (2012), 123–130.] 40

Peeble -‐ Timeline

41

Usability vs. AestheEcs

IntenEon to use on-‐body products will be greater if good usability is perceived in conjuncEon with good percepEon of visual appearance rather than good visual appearance exclusively

[Kuru, A. and Erbuğ, C. ExploraEons of perceived qualiEes of on-‐body interacEve products. Ergonomics 56, May (2013), 906–21.] 42

InteracEvity

How the product informs the user about its usage and how the user receives feedback from the product are powerful determinants of perceived interacEvity

[Kuru, A. and Erbuğ, C. ExploraEons of perceived qualiEes of on-‐body interacEve products. Ergonomics 56, May (2013), 906–21.] 43

Conclusion

•  Micro interacEons and mulE dimensional interfaces fulfill major requirements for graphic interfaces in wrist worn wearables •  Enabling quick interacEon and requiring low cogniEve efforts and acenEon from end users

44

Acknowledgment

This material is based upon work supported by the NaEonal Science FoundaEon under Grant No. 1314342. Any opinions, findings, and conclusions or recommendaEons expressed in this material are those of the author(s) and do not necessarily reflect the views of the NaEonal Science FoundaEon.

45

Q&A

46

References

•  Lyons, K., and Profita, H., (2014). The MulEple DisposiEons of On-‐Body and Wearable Devices, Pervasive CompuEng, IEEE, vol. 13, no. 4, pp. 24, 31, Oct.-‐Dec. 2014 doi: 10.1109/MPRV.2014.79

•  Mot, V. G., and Caine, K. (2014). Human Factors ConsideraEons in the Design of Wearable Devices. In Proceedings of the Human Factors and Ergonomics Society Annual MeeEng (Vol. 58, No. 1, pp. 205-‐209). SAGE PublicaEons.

•  Oakley, I. and Lee, D. (2014). InteracEon on the Edge: Offset Sensing for Small Devices. Proceedings of the 32nd annual ACM conference on Human factors in compuEng systems -‐ CHI ’14, (2014), 169–178.

•  Rawassizadeh, R., Price, B. A., and Petre, M. (2014). Wearables: Has the Age of Smartwatches Finally Arrived?. CommunicaEons of the ACM 58, 1, 45–47.

47

micro interactions and multi dimensional graphical user interfaces in the design of wrist worn...

Technology