Skip to main content
Samsung Developer Program

Design Gear 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 Gear apps and widgets for Samsung Gear wearable devices based on the Tizen OS Web API (Web Gear apps) and the Tizen OS Native API (Native Gear apps).

Gear UI and Gear Apps and Widgets

The Gear wearable device screen UI consists of the Home screen (watch face), Notification Board, Widget Board, and App Tray.

Gear_Device_Structure.png

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

Your Gear 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).

Designing Gear Apps

The intent of Gear apps is to provide useful information and actions in one or more scrollable UI screens. Gear app code can be used to perform actions such as launching apps on the Gear device or on a connected mobile device. Gear 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 Gear App Page Images

To help you design your next Gear 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 3 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:

Gear App Architectural Design Factors

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

​Gear Platform Factors

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

  • A companion Gear app can have an app that runs on a connected compatible Android device (companion host app). They exchange data via the Samsung Accessory Protocol. 
  • A Gear app can be a standalone app that does not have a companion host app.
  • Gear apps can based on the Native Tizen OS or the Web Tizen OS.
  • Gear apps can have 1 or more widgets that each support different purposes (see the Design Gear Widgets section).
  • Users can install many Gear apps on their Gear device.
  • When a Gear app is uninstalled, it is removed from the App Tray, and all of its widgets are removed from the Widget Board.

Gear App Information, Display, and Actions

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

  • Gear apps can get information:
    • From the Gear device, including Gear platform and device sensor information.
    • From the Gear app's companion host app running on a connected mobile device via Samsung Accessory Protocol.
  • Gear apps can display 1 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 1 or more actionable UI elements, such as buttons.
  • Gear apps can initiate actions based on:
    • Code logic not in response to user input.
    • Response to user input via the following Gear device hardware features: the bezel (rotate counterclockwise and clockwise), and display screen features (including tap, and swipe left, right, up, and down).|
  • Gear apps can initiate tasks, such as opening apps.
  • Gear apps can redirect users to a mobile device connected to the Gear device.

Designing Gear Widgets

The intent of each widget is to provide important information related to its parent Gear app. Widgets are quickly accessible, have 1 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 Gear app.

Control 

Perform common and popular functions without opening their parent Gear 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 Gear device or on the connected mobile device.

Users can choose to open apps on their Gear 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 Gear 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 Gear app or the parent's companion host app.

Widget Graphic and Text Layout and Style

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

Screens and Screen Layout  
WidgetLayout.PNG

Widget screens must be designed for the Gear 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 Gear device bezel.

    • Border lines between widgets may not be visible.
    • Black is the primary color for the home structure of Gear 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 Gear 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.

  • BreezeSans Condensed or BreezeSans Medium Condensed fonts are recommended.

  • 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 Gear widgets.

​Gear Platform Factor

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

  • A standalone or companion Gear app can have 1 or more widgets to support different purposes.

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

    • When a user downloads and installs a Gear 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 Gear platform does not notify or prompt the user to load widgets. We recommend that your Gear app code prompt your users.

  • On the user's Gear 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 Gear 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 Gear widget:

  • Widget information:
    • Widgets can get information:
      • From the Gear platform and device sensors.
      • From its parent Gear app, redirect to the companion host app of its parent companion Gear 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 an Add button lets users to do this.
  • Widgets must be designed for the initial circular UI display; widgets do not permit vertical scrolling of the Gear screen.
  • Widgets can only display 1 UI page.
  • Widgets can redirect users to a mobile device connected to the Gear device.
  • Widgets can initiate tasks (such as opening an app).
  • A widgets can open its parent Gear app, redirect to the companion host app of its parent companion Gear 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 1 or more UI elements (buttons) to initiate an action.

Gear App and Widget Design Resources

For more information about Gear app and Gear widget design, see the following resources.

Overview      
  Gear S2 Device Introduction 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    
  Gear Device
UX Overview
Gear 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
  Gear UX 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
  Gear UI Components Gear UI elements, such as pages, tabs, circular indicators, pop-up notifications https://developer.tizen.org/design/wearable/ui-components
  Gear Style Guidelines Principles for Gear 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

 

    • Was this article helpful?