DISTRIBUTION OF TIZEN-BASED WATCH APPS HAS BEEN DISCONTINUED
Bezel Interactions
Bezel interactions refer to rotating or swiping the bezel to explore the screen. Users can view information by rotating the bezel clockwise or counterclockwise. Bezel interactions can adjust values, answer or end calls, and check alerts. Bezel interactions are for both rotating and touch bezels, unless otherwise noted.
Interaction
Function
Turn the bezel clockwise
Scroll right Down Increase value Accept Zoom in
Turn the bezel counterclockwise
Scroll left Up Reduce value Reject Zoom out
*Accept and Reject actions only apply to rotating bezels.
Basics
The bezel is a controller that rotates around the edge of the watch’s display. Understanding the characteristics of the bezel helps you design better interactions.
Directional interactions
The bezel can rotate to the right and the left. These two directions have consistent meanings in all watch interactions, and you should retain these meanings in your app.
Turning the bezel to the right means an increase, a positive response, or a move to the content on the right or below.
Turning the bezel to the left means a decrease, a negative response, or a move to the content on the left or above.
24 detents
Rotating the bezel by one detent moves it by 15 degrees. This is the distance that users feel when they rotate the bezel. There should be a reasonable connection between the bezel interaction and the movement of screen components. The component should move only as much as feels natural when users rotate the bezel by one detent.
Range of one motion
Users can rotate the bezel four to five detents in one motion. Design interactions so that users can complete actions without readjusting their grip on the bezel.
Speed-to-angle ratio
The watch’s display is small, from 1.2 inches to 1.3 inches. You can use bezel interaction to control a moving target on the watch’s small display. For example, the bezel can control a character in a game. For smoother control, settle on the correct ratio between the speed of the target’s movement and the bezel’s angle and consider how fast the target should move when users move the bezel by one detent.
Feedback
Users feel a slight vibration and hear a click when they rotate the bezel. You can adapt this to create a user experience that includes haptic and audible feedback together. We recommend that you provide enough visual feedback to show how the screen elements change when the bezel is rotated.
Navigate
Turning the bezel can navigate between screens or elements..
Content browsing
Turn the bezel to browse content within one hierarchy or level. Turning the bezel can scroll a page up and down or left and right. Do not use bezel turning for navigation among hierarchies. You should also provide visual feedback on the rotary action with a circular scroll bar or with page indicators.
Indicator control
Turn the bezel in anchored views to bring the next item into focus. Visually enforce this action by using an indicator.
Selecting more options
Turn the bezel to move among items in the More options menu. An option title appears in the center of the screen when it is highlighted.
Control
Bezel interaction can adjust values such as the volume, date, and time.
Assign consistent meanings to each direction
Rotating the bezel clockwise indicates an increase, and rotating it counterclockwise indicates a decrease.
Define the value of one increment considering the whole range of values
The bezel is divided into 24 detents, and rotating it by one detent adjusts values by one increment.
Show the change in values with visual feedback
Indicate the change in values visually on a circular indicator and provide text when users rotate the bezel. You can reinforce changes by using colors on the indicator. For example, you can apply a different color to a recommended volume range.
Use cases
Single value control: Volume
When there is just one value to control, users can adjust it by tapping +/ - buttons or rotating the bezel.
Multi-value control: Date and time
In apps such as alarms or scheduling apps, some screens have multiple sets of adjustable values. In this case, allow users to switch between input fields with a tap, and adjust values with the bezel to avoid confusion between interactions. Indicate which input field the user is adjusting by highlighting it.
Confirm
Use the bezel to accept or reject an alert (this action applies only to rotating bezels). When an alert comes in, it shows options on the right and left side of the screen. Rotating the bezel clockwise selects the option on the left and rotating the bezel counterclockwise selects the option on the right. Users can hover over the options by rotating the bezel by one detent, and select one of the options by rotating it quickly.
Zoom
Use the bezel to zoom in to or out from content on the screen. Zooming is particularly useful when viewing a large image like a photo in the Gallery app. Users zoom in on an image by rotating the bezel clockwise, and zoom out of it by rotating the bezel counterclockwise. To pan the screen, use touch interactions instead.
Customize bezel interactions for your app
You can customize the bezel interactions in your app to create a unique experience. For example, the game Monster Vampire lets users control the bat catcher by rotating the bezel.
Use clockwise rotation for an increase in value, and counterclockwise rotation for a decrease in value
Provide appropriate visual indicators
Select only one item to control with the bezel
Each screen should have only one element controlled by the rotary action. If more than one element needs to be controlled by the bezel, have users tap the element to enter a separate screen first, and then control it with the rotary action.
Customize where your indicator starts
An indicator normally starts from the 12 o’clock position, but you can choose to start from somewhere else if it’s better for your app.
Manage Your Cookies
We use cookies to improve your experience on our website and to show you relevant
advertising. Manage you settings for our cookies below.
Essential Cookies
These cookies are essential as they enable you to move around the website. This
category cannot be disabled.
Company
Domain
Samsung Electronics
.samsungdeveloperconference.com
Analytical/Performance Cookies
These cookies collect information about how you use our website. for example which
pages you visit most often. All information these cookies collect is used to improve
how the website works.
Company
Domain
LinkedIn
.linkedin.com
Meta (formerly Facebook)
.samsungdeveloperconference.com
Google Inc.
.samsungdeveloperconference.com
Functionality Cookies
These cookies allow our website to remember choices you make (such as your user name, language or the region your are in) and
tailor the website to provide enhanced features and content for you.
Company
Domain
LinkedIn
.ads.linkedin.com, .linkedin.com
Advertising Cookies
These cookies gather information about your browser habits. They remember that
you've visited our website and share this information with other organizations such
as advertisers.
Company
Domain
LinkedIn
.linkedin.com
Meta (formerly Facebook)
.samsungdeveloperconference.com
Google Inc.
.samsungdeveloperconference.com
Preferences Submitted
You have successfully updated your cookie preferences.