Design Pattern Library 1.5

General Guidelines

Desktop/Web

Mobile (Tablet & Phone)

Visual Design Guidelines

Mobile - Mechanical Style Controls

Problem

A simple, space-efficient method must be provided for users to easily make changes to a setting level or value.

Solution

Mechanical Style Controls are really just compact, graphically-oriented variants of the single-select Form Selections. Two distinct classes of Mechanical Style Controls have been successful in mobile devices.

Tapes, or Sliders

These are vertically or horizontally-oriented indicators and control mechanisms that are used to control levels, such as volume or zoom, brightness and contrast, etc. Three sub-classes are:

  • Continuous - a single strip allowing the level to be set anywhere on the tape. Generally this means a large number of increments, but the settings are smooth and continuous.
  • Incremental - the strip is divided into visible increments, and when the indicator is moved it will jump to, or lock at, specific intervals. This approach is best used for a control with a small number of increments.
  • Sliding Switch - an incremental switch with only two increments - essentially a toggle switch.

Spinners

Spinners simulate a small-diameter wheel on a horizontal axis. Only the current setting is available through a port in the screen, and moving it rotates the wheel in a vertical direction to reveal other settings.

  • Click Wheel - gestures (with finger or pen) up and down are used to move the number directly.
  • Hardware Buttons - a single on-screen button is provided which increments the value with each button push. This is a solution for items that are mostly incremented, and for small ranges of values so that mistakes can be fixed by going around - for example, a snooze control on an alarm. Each time the user pushes the button, 5, 10, or 30-increments are displayed.
  • Increment and Decrement Button - instead of one, two buttons are provided, above and below the value indicator. The top button increments, and the bottom button decrements.
  • Direct Entry - when the field is in focus the entry can be typed directly.

Examples