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.
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:
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.
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.
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.
Simple and concise
Use simple structure and layout.
Use icons and simple graphical elements to reduce text.
Keep descriptions brief and clear.
Consistent screen designs
Similar design across app screens prevent confusion.
Enable users to identify your app by color, type, and layout design.
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.
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.
Elements with easy interaction
Size UI elements that are easy to interact with. For example, make buttons that are large enough for gloved fingers.
Create intuitive and meaningful connections between major elements and app pages.
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.
Only create necessary interactions. Avoid nonessential procedures that require user interactions.
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
Home page images
|Application page images|
To download an image set:
- Go to:
- Basic UI component image set (http://developer.samsung.com/gear/design/resource/basic-ui)
- Home page image set (http://developer.samsung.com/gear/design/resource/home-screen)
- Application page image set (http://developer.samsung.com/gear/design/resource/app)
- Select Gear S3 or Gear S2 images.
- Select the PSD or JPG set to download.
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.
Display key data provided by their parent watch app.
Perform common and popular functions without opening their parent watch app.
Display a range of shortcuts that jump straight to certain app screens.
The following are the most common widget actions:
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.
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.
Users can have the widget execute commands immediately.
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|
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|
|Text and typography|
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 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 can get information:
- 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:
|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|