Online Community Design for Apple Watch

Background

With the Apple WatchOS web kit on the horizon, I set out to imagine how the online community Reddit could be presented in a smartwatch browser with particular attention to navigation and constrained to finger-based interaction (without voice or arm gestures).

OBJECTIVE: To better understand the challenges of designing effective input and output experiences on tiny devices by designing a popular website for the browser on a smartwatch and to consider the unique motivations and needs of the user with respect to the limitations and opportunities of the tiny screen.
ROLE: Individual project
TIMELINE: 6 days
TOOLS & SKILLS: Paper/pencil, UX writing, Adobe XD

Designing for the iWatch 4, 40 mm interface, I referenced both the Reddit desktop website and mobile website (Figure 1).

Figure 1. Screenshots of the Reddit mobile website

An image of the site rendered on an Apple iWatch S5 browser shows a further miniaturized version (Figure 2).

Figure 2. Reddit website rendered on an iWatch S5. Image by MacRumors.

My Smartwatch Design

The first draft of my design closely followed the navigation structure and layout of the mobile website (Figure 3).

Figure 3. First paper/pencil draft of smartwatch design

With further study, reflection, and peer feedback, I decided to reconsider the goals of a smartwatch user with the understanding that they would be rather different from the goals of a mobile phone user.

I selected a limited set of actions the user would be interested in performing with Reddit on their wrist. I assume the user is an active Reddit user interested in keeping tabs on personal activity such as communication and subscription updates.

Since the screen is so small and not conducive to “clicking around,” I drafted more descriptive titles for menu items, where the original typically doesn’t have titles for primary navigation points or they are buried.

I put the two most personal and important primary navigation buttons “above the fold” separated from the two primary points of navigation of lesser importance (i.e. less personal) by two round icons for searching and for composing a post (these are also personal actions, but not menu-based). Less expert users can quickly scroll down to see trending posts. I chose not to include some menu items on this interface because they are not important for the smartwatch user in the same way communication and updates are (or are irrelevant). These include: my profile, settings, card view, night mode, open in app, about, and rules.

These changes in organization and labeling are necessary for optimal use of Reddit on a smartwatch because they help the user access information important enough to warrant navigating the site on a tiny screen: information that affects them. The outcome of these user-centered design decisions can be seen in Figure 4, below, with a video of the working prototype in action in Figure 5.

Figure 4. Final mock-up of Reddit for smartwatch design
Figure 5. Video of Reddit for smartwatch prototype, created using Adobe XD

Gestures used

  1. Swipe up and down to scroll through the interface (can also be achieved using the digital crown)
  2. Tap buttons, links, and icons to navigate
  3. Force touch can be used to browse forward and backward

Preventing occlusion

Occlusion or “fat finger syndrome” is one challenge of designing for small screens. This design seeks to mitigate the problem of occlusion in the following ways:

  • Each primary point of navigation has a large button spanning half the height and the entire width of the screen.
  • The space used to prevent occlusion provides the added benefit of allowing for speaking block navigation, increasing information scent.
  • Secondary navigation points have thinner buttons to communicate hierarchy, yet are designed to be large enough for a finger, with some attention (requiring attention here is warranted in order to ensure that the user navigates to the desired page).
  • Full-screen width and left alignment mitigates occlusion for users wearing the watch on their left wrists.
  • Users can navigate home tapping the breadcrumb link at top left. The link is isolated and so chance of error is reduced.
  • iWatch users can also utilize the force touch gesture to navigate between pages in the browser.

While these measures successfully reducer or eliminate occlusion for right-handed users (wearing the watch on their left wrists), they do not entirely solve the problem for left-handed users (wearing the watch on their right wrist). This is a challenge impacting many aspects of smartwatch design and one well worth further design research and testing.

Credit

Bezel image by Apple.
Magnifying glass and pencil icons by Font Awesome.
Thank you to Hannah Milan for iWatch prototyping inspiration and UI starter kit.
Initiated as an assignment in Fundamentals of Human-Centered Computing (HCC 629) at UMBC, Fall 2018.