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 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:
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
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.
Pre-Defined 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 over 100 Gear S3 app pages and almost 200 Gear S2 app pages in 3 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.
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.
Display key data provided by their parent Gear app.
Perform common and popular functions without opening their parent Gear 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 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.
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.
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 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|
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|
|Text and Typography|
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 can get information:
- 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.
|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 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|