Widget Board

Widgets can be found on the right side of the watch face and are accessed by rotating the Gear’s bezel. They offer 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.

Widget Board

The Basics

  • Widgets occupy the watch face and must be designed for use on a single page. Widgets do not allow vertical scrolling.

  • Users can add up to 15 favorite widgets on the Widget Board, which is accessed from the right hand side of the watch face.

  • The only gesture available on widgets is a single tap to perform a task or open an app.

  • Apps can have multiple widgets to support 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.

Widget Board - The Basics


Widgets can be divided into three categories.

Informative widget

Informative widgets that display the key data of a particular app.

Informative widget
Control widget

Control widgets that can perform common and popular functions without opening an app.

Control widget
Shortcut widget

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

Shortcut widget


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

Opening an app

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

Opening an app
Deep linking

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

Deep linking Arrow Deep linking
Deep linking Arrow Deep linking
Interactive control

It is usually used when quick task(s) can be completed without jumping to an app.

Interactive control Arrow Interactive control
Direct action

Tapping on a widget immediately executes a certain command.

Interactive control Arrow Interactive control

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. If you’re creating one of these, make sure you include an Add button that lets users 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 & 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% 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 Color & Background Widget Color & Background Widget Color & Background Widget Color & Background
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 Layout Widget Layout
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 can be used and the weight of the font can be determined according to the importance of the text.

    • For more important information, medium weight font is recommended.

    • Text needs to be displayed within a circular boundary. Font size of no less than 24 point should be used.

Widget Layout
Widget Layout Widget Layout