Widget Board

Widgets can be found on the right hand side of the watch face and are accessed by rotating the bezel. They deliver important information and access to quick actions without requiring a user to open an app. Because they’re easy to use on the move, they’re a great opportunity to engage with users.


The Basics

  • Widgets occupy the whole watch face and must be designed for use on a single page. They do not allow vertical scrolling.
  • Users can add up to 15 of their favorite widgets on the Widget Board, which is accessed from the right hand side of the watch face.
  • The only gesture available on a widget is a single tap to perform a task or open an app.
  • Apps can have multiple widgets for different purposes. If an app is uninstalled, all related widgets will also be removed.
  • Widgets refresh automatically when they’re open.
  • Widgets are managed by pressing and holding them. Users can reorder them by dragging each icon, and they can be added or removed by tapping the corresponding buttons. 


Widgets can be divided into three categories. 

Informative Widgets

Informative widgets display the key data of a particular app.

Control Widgets

Control widgets perform common and popular functions without needing the user to open an app.

Shortcut Widgets

Shortcut widgets display a range of shortcuts that jump straight through to certain app screens.



Here are the four types of action that are most commonly carried out through a widget: 

Opening an Application

Apps can be launched by simply tapping on a related widget. Users can choose to open apps on their wearable device or their phone if they need to look at information on a bigger screen.  



Deep Linking

Users can jump directly to a particular screen on an app from a widget with a single tap.

Interactive Control

Simple tasks can be completed without jumping to an app.



Direct Action

Tapping on a widget can immediately execute a certain command.



Common Use Cases

When you’re creating widgets, you’ll need to think about and plan for these use cases.


Empty Widgets that Need to be Filled

Some widgets will need to be populated with content by the user. If you’re creating one of these, make sure you include an Add button to let them do this.


Check Your Phone

Widgets can redirect users to another device like a phone. Use the phrase “Check your phone” to indicate this in your design.



Visual Styles


Widget Color and Background

The use of the color black is recommended for widget backgrounds. Black is the primary color for the home structure of a wearable device, and it also increases readability when outdoors.

If black is being used as a background color, border lines between widgets may not be visible. Black is the optimal background color to harmonize the widget with the bezel of wearable devices.

If you’re using a colorful image on your background, add a black tinted layer (at least 60% of opacity) on top of it to make sure the text is legible.

The primary identity color of each app can be applied to title text to maintain a strong visual identity. Each app may have its own identity color, but readability must be taken into consideration. 



Widget Layout

Widgets need to be designed with the circular shape of the display and the absence of a scrolling function in mind. 

Center alignment is recommended, as it is more efficient when displaying text.



Widget Typography
  • If a widget is displaying text, please ensure that the color and typeface are optimized for readability..
  • BreezSans Condensed regular or medium font should be used and the weight of the font is determined according to the importance of the text.
  • For more important information, use a medium weight font.
  • Text needs to be displayed within a circular boundary with a font size of no less than 24 points.