Technology has crept into every walk of people's lives, be it at work or at home. People are reliant on their devices and gadgets for almost everything, from shopping to traveling, communications, banking and health care. Smartwaches, being trendy, fashionable and utilitarian, are being adopted widely. Small and handy, the wearable gadget helps people do a myriad of things, from attending phone calls to tracking daily activities and monitoring health vitals.

The UX UI design for smartwatches is challenging compared to a web or mobile application due to the small surface area of the device. Design plays a key role in making smartwatches usable and this article is dedicated to covering the fundamentals of smartwatch design. 

When computers were invented, they were the size of a room and now they fit in pockets. Today, an increasing number of devices are being designed to be worn around the human body. Though wearables are of many types, smartwatches, fitness trackers and hearables are the most popular.

Things to consider when designing for smartwatches

How is designing for smartwatch any different from designing for smartphones or desktop? Imagine converting a mobile app for a package delivery tracking to a smartwatch without any UX/UI changes. Here is how it would look.

Delivery app screens on smartphone and smartwatch

All the elements are present and hierarchy has been maintained. There doesn’t seem to be any immediate concern, at first glance.  But, imagine if the delivery person has 20 deliveries scheduled and is preparing the orders for delivery. What if he gets calls from the courier service continuously? The notifications from the smartwatch display would easily distract him from his work. And if he is driving, the situation could get worse. Moreover, he would have to put in some great effort to read text messages in such small fonts. 

These frustrating scenarios are nothing short of disasters and must be eliminated while designing for smartwatches. The key is to think from the user perspective and scrutinize the different angles and scenarios. Some key design considerations to take care of for creating successful smartwatch designs are: 

Ease of use

Minimize chances of errors

As smartwatches are worn on the hands, there are higher chances that users may end up touching or clicking it unintentionally. To avoid such accidents and allow the user to recover from them, a tolerance window should be provided to let them undo the accidents. 

Make user flows simple

Performing any action shouldnt requires users to spend much time. As smartwatches can't display a lot of information at once, it's best to create flows that have a maximum of two or three levels of hierarchies. It helps people find things easily and do their job with minimal clicks. Once a navigation model is finalized, it must be used consistently across the app. 

Less clicks the better

Simplify users’ navigation by minimizing the number of screens they have to go through to achieve their goals. If there are too many pages of content in the smartwatch UX, it will make the user journey frustrating. Focus on essential content and keep things easy to access.

Gestures

When designing for small screens like smartwatches, gesture interactions are key. Simple hand gestures allow people to use technology with minimal effort at maximum speed increasing efficiency. Maintain conventions by sticking with the gestures users already know. Conventions and consistency in gestures make them intuitive to users and increase the usability of the product.

Provide realistic responses

To make best use of gesture interactions, provide realistic responses. Use proper affordances to make users understand that there is a gesture here. To implement that, it's necessary to decode the conventions and common understanding of users. For example, using Apple’s ‘Shake to Undo’ features, users can undo an action by shaking their phone. And it's common knowledge now that to watch a video on full screen, a device needs to be rotated horizontally. 

Show what gestures do

The demonstration of a gesture (the movements) should align with the purpose of the gesture. Gestures are mostly used in navigating between views, taking actions and manipulating content.

Different types of gestures include:

Navigational gestures

  • Tap
  • Scroll and pan
  • Drag
  • Swipe
  • Pinch

Action gestures

  • Tap
  • Long press
  • Swipe

Transform gestures

  • Double tap
  • Pinch
  • Compound gestures
  • Pick up and move

Also keep in mind to give an option to disable certain gesture features as everyone may not be comfortable using them.

Increasing Context

When design is applied in context to the situation it helps build user trust and improve interactions. To achieve this, designers need to constantly think about the user's journey through a task. Carefully model the workflows to minimize effort, increase concentration and relax the mind. To understand the context and achieve a better experience, built-in sensors of smartwatches can be utilized. 

Practice minimalism

Minimalism has more advantages than just visual appeal. A minimal UI will load faster, requires less resources and can be developed in less time. When designing for smartwatches, carefully pick the elements to be used in order to balance minimalism and usability.

Design for accessibility

Smartwatch designs should make maximum use of the limited space and be built to respond to the specific needs of the user. Accessibility is a critical factor in achieving the same.

Design for accessibility maximizes the chances of everyone being able to properly use a product- regardless of ability, context or situation. The design should revolve around helping users accomplish their purpose quickly.

  • Maintain better contrast
    Maintain a good amount of background and text contrast and avoid using flashy elements all over the screen as it can be disturbing.
  • Consider the challenged
    Users with cognitive or neurological challenges, including ADHD, dyslexia, learning disabilities, and epilepsy, should be considered during designing.
  • Adjust text size
    Provide options to adjust the size of the text on screen and set it to users’ preferred reading size.
  • Reduce motion
    Include features to reduce motion so that movement of certain screen elements like Home screen icons can be simplified. Yes, that is one of the key features of Apple Watch!
  • Zoom
    Use zoom to accommodate a range of vision challenges with adjustable magnification.

Four guidelines provided by WCAG (Web Content Accessibility Guidelines) are helpful in this context. The guideline breaks down accessibility into 4 main principles.

  • Perceivable: Can the content be consumed in different ways?
  • Operable: Can it function without confusion and without the use of a mouse or complex interactions?
  • Understandable: Can a user understand how the user interface of the site functions and the information on the watch?
  • Robust: Can different assistive devices (screen readers, for example) understand the website?

See the difference 

By applying the design considerations above, the smartwatch app for courier delivery is redesigned to provide a better user experience.

Smartwatch app optimized for a better user experienceSmartwatch app optimized for a better user experience

  1. Used visual hierarchy to make sure user sees the important content first
  2. Used color to group month and date together and provide context
  3. Provided a sliding indication to help users navigate easily and a better box width to increase the slide surface area.
  4. Kept things simple and as relative to the OS as possible to facilitate better user understanding (Jacob’s law)
  5. Provided more spacing for the important actions compared to the less important ones
  6. Processed and streamlined the information to reduce cognitive load and enhance experience
  7. Segregated information month-wise to prevent endless scrolling.

Conclusion

Lets conclude the article by recapping what we learnt.

  • Experience design for smartwatches should always revolve around the core purpose of the app
  • Maintain simple user flows with organized and minimal hierarchies
  • Gestures can be super useful to minimize effort while increasing efficiency of the task
  • Adopt to the mental models and provide scenario based intelligent features
  • Minimalism reduces load of designer and developer while providing a compelling experience
  • Provide just the right information at the right time to help users stay informed, in control and focused. 

See more