UI Design for Wearable Devices
Total Page:16
File Type:pdf, Size:1020Kb
FACULTY OF ENGINEERING UNIVERSITY OF PORTO UI Design for Wearable Devices Vitor Mota Master in Informatics and Computing Engineering Supervised by: Miguel Pimenta Monteiro (Assistant professor) Pedro Rocha (GlinttHS) January 2015 2 Abstract Smartwatches have been around for some time now (Ranger 2015), but 2015 is the year this wearable technology will finally get its boom in terms of popularity and growth. Technology giants like Apple, Google and Samsung are betting on their own-line of products such as the Apple Watch, Android Wear and Gear respectively (Apple Inc 2015a; Google Inc 2015b; SAMSUNG 2015). All of these devices are computation capable electronics with very small touch capacitive screens, limited number of hardware buttons with varying screen sizes and even shapes. Our research focused mainly on these constraints and how to successfully develop user friendly GUI’s for such small screens. The goal was to develop a model with guidelines to help developers provide easy to use and user friendly applications at a visual and interaction level to end users. To successfully achieve this, we first took a deep look at the available technology within these devices, including the framework each of the major platforms provide and the underlying hardware capabilities such as sensors like GPS, gyroscope, the use of the touch screen or microphone for user input and whether the shape of the device (round or squared) can have different effects on the design and usability. We also analyzed the impact of placement and arrangement of interface components having in mind that this technology, since it is a wearable watch, can be worn on both wrists and therefore will be used with only one hand that may obscure a different portion of the interface depending on which wrist the user uses it (Chandra and Raghunath 2000). Finally, to evaluate our model we built a prototype and put it to test with end users, collecting usage metrics and feedback on usability to further improve the original model. 3 Content 1 Introduction ........................................................................................................ 8 The Smartwatch.............................................................................................. 8 Motivations and objectives............................................................................. 8 Report structure .............................................................................................. 9 2 It’s just a watch, only ‘smarter’ ....................................................................... 11 A brief history .............................................................................................. 11 The smartwatch spectrum............................................................................. 11 The instantly-viewable paradigm ................................................................. 12 3 A deep look at the Design Space ..................................................................... 13 User interaction ............................................................................................ 13 Screen shapes and sizes ................................................................................ 14 Screen input obscuration .............................................................................. 16 User input ..................................................................................................... 17 3.4.1 Text input .................................................................................................. 18 3.4.2 Speech input ............................................................................................. 19 3.4.3 Off-device input ........................................................................................ 19 4 Our Proposed Model ........................................................................................ 21 Creative vision and guidelines ..................................................................... 21 Break down your app ................................................................................... 22 Keep it big and simple .................................................................................. 24 Five seconds interaction ............................................................................... 25 5 The Player App ................................................................................................ 26 The Concept ................................................................................................. 26 The Player App Use-Cases ........................................................................... 26 Early Mockups ............................................................................................. 27 6 Testing ............................................................................................................. 36 Test Session Guide ....................................................................................... 36 6.1.1 The tasks ................................................................................................... 36 6.1.2 The questions ............................................................................................ 36 User Selection .............................................................................................. 38 First Test Session ......................................................................................... 38 6.3.1 Results ...................................................................................................... 38 4 6.3.2 Application Improvements ....................................................................... 42 Second Test Session ..................................................................................... 46 6.4.1 Results ...................................................................................................... 46 Final Notes ................................................................................................... 49 7 Final Model and Future Work ......................................................................... 50 Model ........................................................................................................... 50 7.1.1 Concepts ................................................................................................... 50 7.1.2 The UI ....................................................................................................... 51 7.1.3 Testing ...................................................................................................... 53 Final Considerations and Future Work ........................................................ 53 Appendix A – Round Keyboard for Smartwatch ........................................................ 55 References ................................................................................................................... 65 5 Index of Figures Figure 1 Smart wearable installed base, unit sales and device revenue, worldwide, 2013– 2020 (Velasco-castillo 2015) .......................................................................................... 10 Figure 2 Smartwatches over the years ............................................................................ 12 Figure 3 watch screen size comparison (Apple Inc 2015b) ............................................ 15 Figure 4 Smartwatches comparison (Smartwacth.me 2015) .......................................... 15 Figure 5 Control clipping on round shaped devices (Google Inc, n.d.) ......................... 16 Figure 6 Screen obscuring I (Apple Inc 2015b) ............................................................. 17 Figure 7 Screen obscuring II (Apple Inc 2015b) ............................................................ 17 Figure 8 Zoomboard (Oney et al. 2013) ......................................................................... 19 Figure 9 Six-key keyboard (Komninos 2014) ................................................................ 19 Figure 10 Skin buttons with laser projection (Laput, G., Xiao, R., Chen, X.A., Hudson, S.E., Harrison 2014) ....................................................................................................... 20 Figure 11 gDoctor Application by GlinttHS .................................................................. 23 Figure 12 Activity diagram for gDoctor Smartphone application typical use scenario . 23 Figure 13 Possible activity diagram for gDoctor Smartwatch application ..................... 24 Figure 14 Mockup for smartwatch notification .............................................................. 24 Figure 15 Player App Use-Cases .................................................................................... 27 Figure 16 Main menu ..................................................................................................... 28 Figure 17 Measure BPM ................................................................................................ 28 Figure 18 Measure BPM notification ............................................................................. 29 Figure 19 Training plan .................................................................................................. 30 Figure 20 training plan notification ................................................................................ 31 Figure 21 PT Mode ......................................................................................................... 31 Figure 22 Sleep Quality .................................................................................................