Round Wristwatch Interactions
Smart devices around us are ubiquitous, and the purpose behind their existence, is to allow information to be easily retrieved anytime and anywhere. Our project is based on exploring and designing round wristwatch interactions that are suitable, specifically for the round dial on smartwatches. In the scope of this project, we are trying to use the roundness of the watch screen to create affordances for interaction with the watch using on screen displays and interactions (in current commercially available watches, only square/rectangular touch gestures have been exploited). We also are attempting to use the physical form of the circular dial of the watch to create a new form of interaction with it. We also want to be able to redesign apps on the watch to present what is most important to the user, and design controls for the user according to how they use it.
Smartwatches with a circular shaped dial form factor, are currently not making use of their circular shape effectively, in a way that the user can interact with it. Instead, round dialed smartwatches, currently adopt the more square/rectangle model for their interface and interaction.
The UI for these round dialed smartwatches consist of rectangular screens that often don’t completely utilize the available screen space of the circular shaped dial effectively. This almost feels like putting a square peg into a round hole.Can we design a UI to better utilize the screen space on the circular area, to fit more elements to the screen, or add functionality and optimize the same?
All the interactions and gestures on the round watch follow the same rectangular lines as available on rectangular dial watches. For example, touch interactions are limited to swipes (in the four rectangular directions) and taps. Can we design better form of interaction input that uses affordances offered by the circular shape?
Team: We were a team of 5 students: 2 from HCI, 1 from Industrial Design, and 2 from Computer Science.
Role in Team: User Research, interface and interaction design, and evaluations, along with the rest of the team. Android development was done by the Computer Science students in our group.
Duration of Project: 6 months
Skills and Tools used: Survey design, Open ended Interviews, brainstorming, Sketch3, user flow maps, NASA TLX for evaluation.
To explore ways to register circular touchscreen gestures on screen as an input, thus increasing the kinds of inputs the user can provide
Potentially use circular gesture inputs to reduce false positives to inputs
- Use the screen of the watch more efficiently to display information fit for a round screen, instead of clipping a square screen window on the round display.
For the scope of this project, we decided to perform our study and redesign of the music player app, and our findings can be applied later to other apps. In our final evaluations, we intend to evaluate our design against existing designs and test for efficiency and ease of use of both kinds of interfaces.
Exploratory Interviews: At first, we wanted to get a sense of how smart watch users use their smartwatches. The interviews were open ended and it’s purpose was more to get a sense of what mattered to our users, so that using this knowledge, we could formulate a more structured survey that we could use to get answers to more specific questions we had, to inform our design. During the interviews, we spoke to 6 users to help us understand our users and problem space better. The users owned all different kinds of watches, both rectangular and circular dial shaped. Interviews were conducted over telephone.
Surveys: With the results of the interview, we formulated and sent out a survey to understand both, the usage patterns of smartwatches, as well as how users like to use music player apps, to help us inform our design. We received a total of 56 responses from our survey.
- most people use music player apps when lightly engaged with other activities, mostly while walking, jogging or driving.
a large majority of people depend on searching through song lists for songs, either for a particular song, or simply to browse, which made scrolling through the list an important aspect of their interaction. This is something currently not offered on the small smartwatch screen.
Another interesting find was that users reported often needing to adjust volume, and that volume control was much more important that scrubbing control in a song.
Most users also reported not needing to know how far through the song they were through, while listening to music.
Users of watches with a bezel also spoke about how the bezel is bulky and looks too big on the wrist, and might even occupy valuable space that could be used for the screen.
DESIGN SESSIONS AND DESIGN
Our group got together for the design session and started off by listing out what our users need, based on our initial research. The aim was to create a music player app, on a round screen interface, informed by our research. Before we made a working prototype, we explored the design space with join brainstorming and whiteboard sessions.
Visual design - Each screen of our prototype was adapted to a round layout. We prototyped this in Sketch3.
Interaction design - two use cases of a “circular scroll” feature: scroll through the list of songs and scroll through the volume bar (we chose this over seeking in a song because our initial research suggested that changing volume was more widely used). This circular scroll was aided by the affordance provided by the rim of the watch, and users simply had to slide their finger clockwise or anti-clockwise along the rim to increase or decrease volume, respectively.
App design - Here we tried to mark user flows and navigation between screens, based on what we learnt in our research. We designed what screens should be present, how we should navigate from one screen to another, forming a screen to screen map, and also, what elements and controls, in general, would be available on each screen. These were not necessarily key to the focus of this design, but added to help create an overall demonstrative experience for the users of an app with features we designed.
Circular scroll for volume, around the rim. The circular scrollbar occupied less space on the screen allowing other buttons/visuals to occupy valuable screen space in the middle.
Circular scroll for selecting a letter to scroll to on the music list, similar to a contacts list on an iPhone. Because of this scroll, we actually could display songs in a list, rather than having one song, per screen (as on traditional apps such as Google Play).
A circular letter bar (visual element) around the inner circumference of the screen to arrange letters to scroll to a particular album/song.
A small non-manipulatable song progress bar, in the form of a circular pie chart, in the middle of the screen. Now that we had more space on the screen, we wanted to demonstrate how we could add more elements to it, while still keeping it uncluttered. Also, we didn’t enable actual scrub in the song, because our survey respondents indicated it wasn’t as important to them, on the watch interface.
Support for design decisions:
This kind of interaction using a circular scroll would be beneficial for adding to the number possible interactions on a single screen, apart from regular swipe actions
Having an interaction concentrated along the edges does not occupy valuable screen space on a circular screen. Having a horizontal/vertical scroll bar present does the opposite and generally occupies more screen space on the circular dial.
Horizontal/vertical scrolls are particularly cumbersome on a watch because, due to the small size of the screen, a single swipe up or down on a vertical scroll covers enough very little area to scroll on a list, on a single “scroll” action. Conversely, the circumference of the watch is longer than the diameter (2*r < 2*pi*r) hence allowing for a longer scroll.
Our implementation of the circular scroll, provides a more natural way of navigating the screen with lower physical effort and less lifts of the finger from the screen. If implemented in the right way, we can form a continuous scroll that extends over multiple circles (beyond just 360 degrees), thus allowing the user to scroll with greater precision, and over longer distances, without having to lift the finger off the screen.
The volume scroll bar occupied very little place on the screen, since it was just around the margins of the circular dial. Hence, we did not have to dedicate a separate screen to the volume control alone (as was in the Google Play music app). This allows us to pack as much as possible on the small screen, and at the same time, interact separately with each element, because the scroll action would uniquely only activate volume control, while tap interactions operated the other buttons. Also, this reduced the number of actions for the user (swipe screens) to get to the volume control, because we could accommodate it on the same screen.
On screen circular scrolls are obviously less bulky than scrolls using a bezel, which consists of additional hardware around the watch.
For the visual design, the circumference presents more real estate than the diameter of a watch, for text to be written on a straight line, allowing, for example, for a longer volume control bar, than before, and hence greater precision for the user while selecting volume.
We conducted an evaluation of our design with 12 participants (randomized on tasks), using NASA TLX. This was conducted in a controlled environment at the usability lab at the GVU center in Georgia Institute of Technology. The NASA TLX is a cumbersome, but thorough evaluation of 6 qualitative factors which are otherwise very difficult to measure. These factors were: Mental Demand, Physical Demand, Temporal Demand, Effort, Performance and Frustration. The evaluation was designed to give us a good idea of what of these parameters our redesigned watch interface scored high or low on.
For control, we ran the same evaluations by each participant in our study, ALSO on the Google Play default music app, so that we can get some sort of comparative measure. The tasks mentioned below were common to both apps. We set up 2 overarching tasks to evaluate the main highlight of our design - the circular scroll and layout. Each of these tasks had 3 similar subtasks under them, to account for learnability and error while we collected results. We also video recorded them to measure time taken on each task.
The tasks we gave to the participants were the following:
Task 1 - Volume Control
Increase the volume of playback to maximum.
Decrease volume to minimum value.
Decrease playback volume to mid value (change to a volume that’s comfortable to you).
Task 2 - Song Search
Find the song titled “Back in black” from AC/DC’s album iron man 2 and begin playing the song.
Please find the song titled “Jugband blues”, from Pink Floyd’s album echoes and begin playback of the song.
Please find the song titled “My happy ending”, from Avril Lavigne’s album my happy ending from the current screen.
After the evaluations, we also conducted a short open ended qualitative interview asking users what they felt while using each of the apps.
Results from Evaluation:
Our results were mostly positive after the evaluation.
Time taken on all tasks on the circular scroll interface was less than on Google play interface.
Overall task load index using NASA TLX scores for the the circular scroll version of our app showed significantly better usability than Google Play’s music app.
Users who were not previously inclined to using the music app control on their watches said they were more inclined to do so, with our redesigned interface.
Some users complained about the scroll control being small and hard to grab, but most users said they could use it with little to no difficulty.
There needs to be work done on how we display text on the song list, because our interface doesn’t clip in a rectangular fashion. Also, this means we need to figure out how to not let any on screen text interfere with the letters on the circular scroll.
All our users said that using the redesigned app was intuitive.
Since the circular scroll action is less prone to false positives, can we somehow use this action even when the watch is unlocked? What would be the implications and use cases of this? If implemented, would we also need an activation gesture?
We could extend applications to include contact lists, app drawers, scrolling through notifications, and an alternative to a bezel based scroll and select mechanism without introducing new hardware.
Our evaluations were conducted under a controlled environment while the participant was seated. How would our design far on comfort, when our users were in motion
Is there a better way to arrange the letters of the circular scroll on the screen so that we avoid occlusion of the screen that occurs, by the rest of the hand, while reaching for letters in the 4th quadrant (top left quadrant, if watch is work on the left hand)? Could only using 3/4th of the circumference work better?
Can we incorporate a zoom in feature for the circular scroll, when appropriate, so that precision won’t be a problem?