Skip to main content
Samsung Developer Program

Design Watch Apps

Wearable device size and small screens are two of the greatest design challenges. This section provides information and links to resources to help you design and create watch apps and widgets for Samsung wearable devices based on the Tizen OS web API (web watch apps) and the Tizen OS native API (native watch apps).

Watch UI, apps, and widgets

The Samsung watch screen UI consists of the home screen (watch face), notification board, widget board, and app tray.

Gear_Device_Structure.png

Watches have the following hardware features: two physical buttons, a bezel, and a touch-sensitive display screen.

Your watch apps can initiate actions based on user input from the bezel (rotate counterclockwise and clockwise), and display screen features (including tap, and swipe left, right, up, and down).

Design watch apps

Watch apps are designed to provide useful information and actions in one or more scrollable UI screens. Watch app code can be used to perform actions such as launching apps on the watch or on a connected mobile device. Watch app design factors and principles include the following:

DesignPrinciples1a.png

Glanceable information on the go 

Users often want to decide quickly whether to find out more about a notification or dismiss it.

Information should be compact and informative, and offer concise updates of the most important details.

Use graphical information.

DesignPrinciples1b.png

Draw users to the main idea 

Emphasize key information in a large font.

Provide dynamic information that is directly related to the user’s current situation and requires minimal user interaction.

Put the main idea in the middle.

Keep essential information and remove low-importance features and screens.

GrabAttention.png

Grab attention

Unique and stylish screen designs are essential to successful apps because users consider wearable devices to be fashion items.

Appeal to different users with different needs and interests.

Provide a wide range of customization and display options.

DesignPrinciples2.PNG

Simple and concise

Use simple structure and layout.

Use icons and simple graphical elements to reduce text.

Keep descriptions brief and clear.

  • Use effective writing techniques to convey more information with fewer words.
  • Use exact words that convey the main idea and leave out unnecessary information.
  • Avoid detailed information that requires too much reading.
  • Consider the tone and manner of the entire text.
DesignPrinciples6a.png

Consistent screen designs

Similar design across app screens prevent confusion.

Enable users to identify your app by color, type, and layout design.

DesignPrinciples3.PNG

Design for outdoor use

Wearable devices are designed primarily for outdoor use. Your best designs and content may be useless if they are not visible outdoors.

Use dark-colored themes.

Ensure good contrast.

DesignPrinciples8.PNG

Natural and responsive elements

Provide feedback for each interaction as soon as a user input is received.

Ensure user selections clearly change.

Display the subject of the user interaction during feedback so users know what is happening.

  • Visual effects such as transitional animations provide natural responses to user input.
    For example, a page transition effect naturally presents page movements, and a page end effect informs users that they have reached the end of the page. When you design screen transitions, ensure that you present the screens in a natural and intuitive way. For example, the direction of rotary action must conform to the movement of the screens displayed on the wearable device.
  • Orient users with navigational structures that are consistent, meaningful, and intuitive.
  • Display contextual information such as indicators and visual cues for users to identify the type of information they are accessing and what they need to do next.
  • Physical feedback (such as bezel indents and device vibration) can complement visual and physical changes on the screen.
  • Physical responses (such as auditory feedback) help users complete tasks without needing to focus on the screen and enhances glanceability.
DesignPrinciples7.PNG

Elements with easy interaction

Size UI elements that are easy to interact with. For example, make buttons that are large enough for gloved fingers.

DesignPrinciples5.PNG

Intuitive transactions 

Create intuitive and meaningful connections between major elements and app pages.

DesignPrinciples4.PNG

Design beyond screen boundaries 

Think outside the screen to give your users the bigger picture.

Design your screens in an organically interconnected structure.

Draw bigger screens outside of the physical screen area.

Place buttons or visual cues in the overlapping areas of the screens.

DesignPrinciples9.PNG

Avoid redundancy

Only create necessary interactions. Avoid nonessential procedures that require user interactions.

Measure_HR.png

Fast and responsive 

Minimize user input.

Easy-to-operate UI helps users reach their goals in the simplest and fastest way.

Immediately react to user inputs in an obvious manner.

Predefined watch app page images

To help you design your next watch app, the Samsung TAU Library provides you with JPG or Photoshop (PSD) images for more than 100 Gear S3 app pages and almost 200 Gear S2 app pages in three image sets.

Basic UI components

 

Tau_Basic_UI.png

Home page images

 

Tau_Home.png
Application page images Tau_Applications.png

To download an image set:

Watch app architectural design factors

The following factors can influence the design of your watch app.

​Watch platform factors

The following watch platform operational factors can influence the design of your watch app:

  • A companion watch app can have an app that runs on a connected compatible Android device (companion host app). They exchange data through the Samsung Accessory Protocol. 
  • A watch app can be a standalone app that does not have a companion host app.
  • Watch apps can based on the native Tizen OS or the web Tizen OS.
  • Watch apps can have one or more widgets that each support different purposes (see Design watch widgets).
  • Users can install many watch apps on their watch device.
  • When a watch app is uninstalled, it is removed from the app tray, and all of its widgets are removed from the widget board.

Watch app information, display, and actions

The following factors can influence the design of your watch app:

  • Watch apps can get information:
    • From the watch device, including watch platform and device sensor information.
    • From the watch app's companion host app running on a connected mobile device through Samsung Accessory Protocol.
  • Watch apps can display one or more UI screens.
  • Each initial circular screen can be extended by supporting vertical scrolling.
  • Information can be displayed graphically and by text and symbols.
  • Each app page can have one or more actionable UI elements, such as buttons.
  • Watch apps can initiate actions based on:
    • Code logic not in response to user input.
    • Response to user input through the following watch device hardware features: the bezel (rotate counterclockwise and clockwise) and display screen features (including tap, and swipe left, right, up, and down).|
  • Watch apps can initiate tasks, such as opening apps.
  • Watch apps can redirect users to a mobile device connected to the watch device.

Design watch widgets

The intent of each widget is to provide important information related to its parent watch app. Widgets are quickly accessible, have one unscrollable UI page, and can be a shortcut to their parent app.

InformativeWidget.PNG ControlWidget.PNG ShortcutWidget.PNG

Information

Display key data provided by their parent watch app.

Control 

Perform common and popular functions without opening their parent watch app.

Shortcuts 

Display a range of shortcuts that jump straight to certain app screens.

The following are the most common widget actions:

OpenanAppWidget.PNG

Opening an app 

Users can launch an app that runs on the watch or on the connected mobile device.

Users can choose to open apps on their watch or on their phone if they need to look at information on a bigger screen.

DeepLinkWidget1.PNG

DeepLinkWidget2.PNG

Deep linking to an app screen

Users can jump directly to a particular screen in its parent watch app or the parent's companion host app running on a connected mobile device.

DirectActionWidget.PNG

Direct action 

Users can have the widget execute commands immediately.

InteractiveControlWidget.PNG

Interactive control 

Users can initiate quick task(s) performed by the widget, which can be completed without jumping to the widget's parent watch app or the parent's companion host app.

Widget graphics and text layout and style

The following display screen factors can influence the design of your watch widget:

Screens and screen layout  
WidgetLayout.PNG

Widget screens must be designed for the circular UI display.

Efficient use of the screen area is to enter text and graphic alignment (horizontally and vertically).

Color and background  

WidgetColorAndBackground1.pngWidgetColorAndBackground2.png

  • The color black is recommended for backgrounds to increase readability.

    • Black matches the watch bezel.

    • Border lines between widgets may not be visible.
    • Black is the primary color for the home structure of wearable devices.

  • When using a multicolored background image, it is recommended to add a black-tinted layer (at least 60% opacity) on top of it to make sure text is legible.

  • A color can be used to identify a parent watch app and its widgets (for example, as a background, title text, or common UI elements). However, take text readability into consideration. 

Text and typography  
WidgetTypography.png
  • Text must be displayed within a circular screen boundary.

  • Optimize text color and typeface for readability.
  • Font size of 24 points or larger should be used.

  • We recommend BreezeSans Condensed or BreezeSans Medium Condensed fonts.

  • The importance of specific text can be used to determine the weight of the font.
  • For more important information, a medium-weight font is recommended.

Widget architectural design factors

The following factors can influence the design of your watch widgets.

​Watch platform factor

The following watch platform operational factors can influence the design of your watch widget:

  • A standalone or companion watch app can have one or more widgets to support different purposes.

    • Widgets are extensions of their watch apps and cannot be made separately available in the Galaxy Apps store.

    • When a user downloads and installs a watch app that has widgets, each of its widgets can be loaded into the widget board by the user.

    • To be available for use, a widget must be loaded into the widget board.
      Note: The watch platform does not notify or prompt the user to load widgets. We recommend that your watch app code prompt your users.

  • On the user's watch device, the notification board can contain up to 15 widgets. When 15 are loaded, users must remove widgets in order to load others.

  • When users open a widget, its content is automatically refreshed.

  • When a watch app is uninstalled, all of its widgets are removed from the widget board.

Widget information, display, and actions

The following factors can influence the design of your watch widget:

  • Widget information:
    • Widgets can get information:
      • From the watch platform and device sensors.
      • From its parent watch app, redirect to the companion host app of its parent companion watch app, and communicate with a web server.
    • Widgets can display the information and use it to perform calculations.
    • When your widgets need to be populated with content by the user, ensure that you have an 'add' button to let users to do this.
  • Widgets must be designed for the initial circular UI display; widgets do not permit vertical scrolling of the watch screen.
  • Widgets can only display one UI page.
  • Widgets can redirect users to a mobile device connected to the watch device.
  • Widgets can initiate tasks, such as opening an app.
  • A widgets can open its parent watch app, redirect to the companion host app of its parent companion watch app, and communicate with a web server.
  • Widget can support a tap anywhere in the widget UI page to initiate an action.
  • Widgets can display one or more UI elements (buttons) to initiate an action.

Watch app and widget design resources

For more information about watch app and watch widget design, see the following resources:

Overview      
  Gear S2 device Gear S2 models, designs, bands, functions, compatible Android smartphones, how-to guides, and specifications http://www.samsung.com/global/galaxy/gear-s2/
       
Design Factors and Tools    
  UX Overview Wearable device UX elements, including circular design, navigating views on a circular type wearable device, and gestures https://developer.tizen.org/design/wearable/ux-overview
  Best Practices Getting the most out of the Tizen wearable UI: the header, buttons, app closure, and designs compatible with other devices https://developer.tizen.org/design/wearable/best-practices
  UI Components UI elements, such as pages, tabs, circular indicators, pop-up notifications https://developer.tizen.org/design/wearable/ui-components
  Styles Guidelines and principles for watch basic actions, color schemes, icons, typographic factors, and the design elements that can be incorporated into the wearable apps. https://developer.tizen.org/design/wearable/styles