User Interface Design Guidelines for Galaxy Wearables

Overview

Galaxy Wearables include devices with a bezel and without a bezel (bezel-less). The user interface for a Galaxy Wearable must be designed to support both types of devices: a device that has a bezel and a device that is bezel-less.

On a device with a bezel, the bezel is a physical controller that rotates along the outer edge of the display and the user interface reacts to the rotation of the bezel. The user interacts with the device by rotating the bezel or touching the screen.

On a device without a bezel, the user interacts with the device by touching the screen (touch interaction).

This guide provides the following:

  • Description of the types of touch interactions that can be provided in the design of your user interface for a Galaxy Wearable without a bezel

  • Comparison of the touch interactions to the interactions for a Galaxy Wearable with a bezel

  • Updates to interactions for a Galaxy Wearable with a bezel (more options and rotary selector)

Screen views

Screen views are designed to accommodate more information and show content most effectively on a wearable’s display. The types of screen views described in this guide include vertical/horizontal, anchored, and freeform.

For more information, see Screen Views.

Vertical/Horizontal views

Vertical views allow navigation up and down. Horizontal views allow navigation left and right.

Vertical/Horizontal views, by touch

Swipe the screen up/down or left/right to scroll through and focus on an item.

Vertical view, by touch Vertical view, by touch
Horizontal view, by touch Horizontal view, by touch
Vertical/Horizontal views, with bezel

Rotate the bezel to scroll through and focus on an item.

Vertical view, with bezel Vertical view, with bezel
Horizontal view, with bezel Horizontal view, with bezel
Anchored views

Anchored views allow navigation through multiple layers of screens.

Anchored view, by touch

Swipe the screen to the left or right to navigate among multiple screens.

Anchored view, by touch Anchored view, by touch
Anchored view, with bezel

Rotate the bezel to navigate among multiple screens.

Anchored view, with bezel Anchored view, with bezel
Freeform views

Freeform views display content that can be panned or zoomed, allowing the user to see more or less details on the screen.

Freeform view, by touch

Spread or pinch your fingers on the screen to zoom in or out.

Freeform view, by touch Freeform view, by touch
Freeform view, with bezel

Rotate the bezel to zoom in or out.

Freeform view, with bezel Freeform view, with bezel

Pattern and UI Component

Patterns and UI components are function and design that allow users to interact with your app in an expected and intuitive manner. Pattern and UI components include the picker, more options, slider and rotary selector.

Pickers

A picker allows the user to set a single, specific value from a given set of values (for example, selecting the day when setting the date). For more information, see Pickers.

Picker, by touch

Swipe up or down to scroll up or down to set the desired value.

Picker, by touch Picker, by touch
Picker, with bezel

Rotate the bezel to scroll up or down to set the desired value.

 Picker, with bezel Picker, with bezel
More options

More options display additional functions in a list. For more information, see More Options.

More options, by touch

Swipe up/down to focus on an option. The options are displayed in a five-line list. The option in focus is enlarged and centered.

More options, by touch More options, by touch
More options, with bezel

Rotate the bezel to focus on an option. The options are displayed in a five-line list. The option in focus is enlarged and centered.

 More options, with bezel More options, with bezel
Sliders

A slider allows the user to quickly adjust values within a given range (for example, adjusting the volume). For more information, see Sliders.

Slider, by touch

Tap the + or – sign or drag the handle to adjust values.

Slider, by touch (tap) Slider, by touch (tap)
Slider, by touch (drag) Slider, by touch (drag)
Slider, with bezel

Rotate the bezel to adjust values.

Slider, with bezel Slider, with bezel
Rotary selectors

A rotary selector displays multiple options around the circular edge of the screen of which only one option is in focus. For more information, see Rotary Selectors.

Rotary selector, by touch

Tap any item that does not have the focus to change the focus to that item. Tap the item in focus to select it.

Rotary selector, by touch Rotary selector, by touch
Rotarary selector, with bezel

Rotate the bezel to focus on an item. Tap the item in focus to select it.

Rotary selector, with bezel (updated) Rotary selector, with bezel (updated)