The rotary selector arranges multiple items around the circular edge of the screen, and switches the focus between items as users rotate the bezel.

The rotary selector displays multiple items in a circle.

Usage

• Present multiptle items to be selected

  The rotary selector can be used on any screen that includes multiple items. The title of an item is only displayed when the item is in focus.

• Provide more options

  More options are revealed with the rotary selector when users tap the visual cue on the right side of the screen. More options appear as a temporary view over the current screen and provide additional functions available for a list item.

Elements

• Option icon

  The rotary selector can present up to 11 option icons on a page. Option icons are ordered clockwise from the top.

• Option detail

  When an option item comes into focus as users rotate the bezel, its title, subtext, and icon are shown in the center of the screen. If the item is a toggle button, the current state is displayed as subtext.

• Previous/Next icon

  Previous/next icons are shown when the rotary selector has more than 11 option items to display. Moving in a clockwise direction from the top, the previous icon is placed at the left of the first button and the next icon is placed at the right of the last.

Behavior

• Focus

  Rotating the bezel by one detent brings the next option on the list into focus. An indicator shows which option is currently in focus.

  

  The rotary selector switches the focus to the next item as the bezel rotates by one detent.

• Select

  An option performs its assigned task when users tap it, regardless of whether or not it’s in focus. A tap on the center of the screen triggers the task of the item in focus. If an item is a toggle button, tapping the item or its option detail switches its state.

Design specs

• Icon
  

  Normal                                                                              Selected

  

  2^nd layer icon                                                               3^rd layer icon

  

  The 2^nd layer icon rotates 7 ° from the 1st layer icon.        The 3^rd layer icon rotates 3° from the 2nd layer icon

  

  The center of an icon is used as coordinates.

  A normal icon is reduced to 56x56 from the selected icon size of 68x68.

  Normal                                                                              Selected

  

  Touch Area

  

  Rotary selector icon color More options icon color

  
• Title
  
  

  1 line text                                                       2 line text                                                       Icon only

  

  Icon + Text                                                    1 line text + Subtext                                                   2 line text + Subtext

• More options