Build Wear OS application using Jetpack Compose [Part 1 — Design System for WearOS]

Easily beautiful and intuitive Wear OS devices with Compose

Every Android developer has wondered how to develop apps for smartwatches. Now writing UI for our smartwatches is easy and effective with Jetpack Compose! Long live Jetpack Compose Wear OS 😁!

Wear OS by Google lets you write apps that help users stay connected, track their health and fitness goals, execute tasks, and express themselves.

If you have developed for Android, you might be familiar with features such as apps, notifications, and other actions. You can use your knowledge of Android development when you develop for Wear OS. With Compose for Wear OS, you can write better apps for Wear OS with less code. In this article, we will be covering the Design System and UI/UX for the Wear OS.

Design System for Wear OS

Wear OS follows Material Design to build & design an engaging user experience. Watches allow users to get information at a glance, such as seeing progress toward health and fitness goals, and to act quickly (e.g. responding to an instant message). Focus on use cases like these when designing apps for smartwatches.

The watch interface presents unique opportunities that are not available on traditional mobile devices, including:

• Input is enabled by a physical body connection (through sensors and motion detection).
• Quick access to glanceable information and actions, such as complications, notifications, and Tiles

The majority of Wear OS devices have round displays, which have 22% less UI space than square displays. Round displays also need larger margins for text to be easily readable. For more information regarding the Design System please click on this link Design for Wear OS.

Examples: The following screenshots show a few illustrated examples of Wear OS apps that follow the principles described in this guide

Wear OS versus Mobile Development

Designing for Wear OS presents unique challenges, notably in optimizing battery life and ensuring offline functionality. Given the device’s limited power reserves, designers must prioritize energy-efficient practices, minimizing background activity and optimizing resource-intensive features. Additionally, incorporating offline functionality is crucial, allowing users to maintain core app functionality even when disconnected from their smartphones or the internet. These considerations not only enhance the user experience by reducing reliance on constant connectivity but also improve the device’s overall utility and convenience, aligning with the on-the-go nature of wearable technology.

To find out which API or other features are different between Wear OS and Mobile please click over here.

User interface for Wear OS

Wear OS makes it easy for users to engage with apps optimized for a watch. Ensure that content is displayed on the appropriate surface.

App surfaces on Wear OS are designed with jobs in mind. For example, if you have a single unit of information that users are likely to want to glance at multiple times a day, consider providing a complication. If your content is high-value and highly contextual, consider a notification instead.

Another useful way to design app content intuitively on Wear OS is to consider the priority of information across surfaces, elevating the most valuable content to Wear OS’s glanceable surfaces.

Display the highest-priority content in complications and notifications, and then use the larger space on tiles and your app to display more content appropriately.

There are following sections cover each of the surfaces.

1. App -

An app is a focused view that can serve a complex or less-common task or a cluster of tasks. An app is immersive, and it’s similar to a mobile app’s main user interface (UI)

2. Tiles -

Tiles provide quick, predictable access to information and actions to solve user needs.

While apps can be immersive, tiles are fast-loading and focus on the user’s immediate needs. If users want more information, they can tap tiles to open an app on the watch.

3. Complications -

A complication is a single, often-repeated action or a highly glanceable unit of information on the watch face. As with tiles, users can tap complications to open an app on the watch for a deeper experience.

4. Notifications -

A notification provides glanceable, time-sensitive information and actions for the user. Notifications on Wear OS are similar to mobile notifications.

5. Watch faces

Watch faces are dynamic, digital canvases where users can express their style. Most apps don’t need to create a custom watch face. However, if creating a watch face makes sense for your app, Wear OS lets you customize the surface as much as you want.

Accessibility on Wear OS

Accessibility on Wear OS, Google’s operating system for wearable devices, has been an essential aspect of its development, ensuring that users of all abilities can fully utilize and enjoy the functionalities offered by wearable technology. As wearable devices become increasingly integrated into daily life, it is imperative to make sure that they are accessible to everyone, regardless of any physical or cognitive limitations they may have.

Wear OS apps have some additional considerations when it comes to accessibility due to the following factors:

• Different input types on Wear OS, such as rotary input.
• Additional UI surfaces such as tiles and complications.
• Small screen sizes.

Rotary Input -

Many Wear OS devices feature a physical rotating side button (RSB), rotating bezel, or touch bezel, known as rotary input. This functionality allows users to adjust media app volume, scroll through content, and perform other actions with ease.

Given the smaller size of Wear OS devices compared to mobile devices, users facing dexterity challenges may find it difficult to navigate accurately on the screen. Additionally, screen reader users may struggle with the two-finger interactions required for scrolling. Rotary input addresses these challenges by offering a more convenient scrolling method, enhancing accessibility for users with diverse needs.

Tiles and complications -

Wear OS offers various UI surfaces like tiles and complications for displaying information and performing actions conveniently.

Complications on the watch face provide quick access to essential information from apps, such as the date or weather forecasts. Tiles, accessible with a simple swipe from the watch face, offer shortcuts to tasks like checking the weather or setting a timer.

Similar to Compose visual elements, you can enhance accessibility by setting content descriptions for tiles and complications. These descriptions are used by Talkback to provide verbal descriptions for content without textual representation. When setting content descriptions:

• Use setContentDescription method to set descriptions for tiles and their elements like buttons.
• Set contentDescriptions during complication creation using the appropriate builders, such as SmallImageComplicationData.Builder.

By implementing content descriptions effectively, you improve the accessibility of Wear OS for users relying on screen readers like Talkback.

Minimum Touch Targets -

Touch targets refer to the areas of the screen that respond to user input, which can extend beyond the visual boundaries of an element. For instance, while an icon may visually appear as 24dp x 24dp, its touch target could encompass the larger 48dp x 48dp area, including padding.

Following Android Material guidance, a touch target size of 48dp x 48dp is recommended. However, considering the smaller screen size of Wear OS devices, situations may arise where a touch target size of 40dp x 40dp is acceptable.

Resources

I am confident that you will find this blog extremely helpful! In the next part, we will learn how we can create a simple UI in Wear OS. 😀 Please give feedback and leave a comment below ⬇️.

If you like this write-up, do share it 😉, because…

“Sharing is Caring”

Thank you! 😄

Let’s catch up on Twitter or LinkedIn to know more about me 😁

Bye 👋

Stackademic 🎓

Thank you for reading until the end. Before you go:

• Please consider clapping and following the writer! 👏
• Follow us X | LinkedIn | YouTube | Discord
• Visit our other platforms: In Plain English | CoFeed | Venture | Cubed
• More content at Stackademic.com