Differences between revisions 12 and 13
Revision 12 as of 2011-03-30 16:47:50
Size: 8885
Editor: shoobe01
Comment:
Revision 13 as of 2011-03-31 00:01:06
Size: 10052
Editor: shoobe01
Comment:
Deletions are marked like this. Additions are marked like this.
Line 33: Line 33:
Line 38: Line 37:
The variants above are classes, and provide guidelines, but there are numerous spaces in the middle where new interfaces, perhaps inspired by machine-era antecedants, may be used.


Should Always accept direct entry of values, type on keypad or if you select the field then a virtual kb comes up...

Increment (and usually decrement)... do not accelerate or key repeat, ever. One click for one movement. Can use these at the ends of the tapes also, much like zoom keys do... See the '''[[Zoom & Scale]]''' pattern for this and other ideas for ways to interact with and display tape meters and controls.

also can usually directly enter values...


Only present the coarsest acceptable values in the thumbwheel... e.g. calendars should only go to 15 minute increments, and if you need more precision, type it.
The variants above are classes, and provide guidelines, but there are numerous spaces in the middle where new interfaces, perhaps inspired by machine-era antecedants, may be used. Consider the standards used by the OS, and the needs of the user to enter data quickly, and to protect entry, when selecting one of these methods or designing another one.
Line 52: Line 41:
tapes are linear, spinners are Circular, yes. Each is subsidiary. Do not have say a minute also change the hour, when it goes across an hour. People get super focused, so will not notice they changed the hour... Tapes are always dead-end, selections. Increasing the level while at the maximum will have no effect. Spinners are circular. Increasing the level while at the maximum value will switch to the minimum value.
Line 54: Line 43:
For scroll-and-select devices, Tapes should be deconflicted from the remainder of the interface. When presented in a page, where other elements can be selected and scrolling is possible, only horizontal tapes should be used, and no selectable items should be placed next to the tape. When the user scrolls using the up/down keys to the tape, it will become in focus without further selection, and immediate use of the left/right keys will change the level. Spinners are frequently presented in groups, for example to set hours and minutes. Group related items into a single control, so that the minutes are displayed and controlled by a single spinner, not one for each digit. Unrelated items are entirely unrelated, even if adjacent. Switching minutes from 59 to 00 will not also change the hour from 3 to 4.

Especially for scroll-and-select devices, tape orientations should be deconflicted from the remainder of the interface. When presented in a page, where other elements can be selected and scrolling is possible, only horizontal tapes should be used, and no selectable items should be placed next to the tape. When the user scrolls using the up/down keys to the tape, it will become in focus without further selection, and immediate use of the left/right keys will change the level.

Increment and decrement buttons, when available on either a Spinner or Tape, are unitary input items. They will not key repeat. One click is required for each increment. The same behavior is encouraged for hardware keypads as well.

See the '''[[Zoom & Scale]]''' pattern for additional details on the use of increment buttons, and indicators of position in Tapes.

Only present the coarsest acceptable values within a Spinner. For example, when setting time for an appointment, the spinner should only have 15 minute increments.

Especially for Spinners, direct entry of values should be allowed as well. When the field is in focus, the keypad can be used to type values directly. This works especially well when coupled with coarse pre-set values; the user may quickly set most values, and still has the option of using any value when more rarely needed.

Custom values are discarded when the field is incremented or decremented. If 17 is entered, and the value is incremented to 30, when decremented it will display 15, not 17.

For touch or pen devices, allowing direct entry may require a more precise touch of the value field in order to display the input panel, and may require more space to be taken up by the Spinner than is acceptable.

Problem

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

Solution

Spinners & Tapes are really just compact, graphically-oriented variants of the single-select Form Selections. For their use with other forms, see that pattern.

These are both derived from machine-era controls, which have contributed to the best-practice design of these elements.

These both have value, especially over other types of selectors, in three key attributes:

  1. They are graphically-oriented, so tend to provide information at a glance.
  2. They provide direct control, when using touch or pen interfaces, or very close coupling of the input to the available display methods for scroll-and-select devices, with an implicit scale. Compare this to a simple list of values, which the user must map to a model of the system.
  3. The manner in which they are controlled is apparent (if well designed), so no instruction, and minimal previous knowledge of computers is required. Even for scroll-and-select devices, as long as the user can control the device to this point, they are likely to be able to use the control.

All of these are in opposition to many typical computing forms, which are usable only to those who have become accustomed to them in other contexts. Mobile devices are so pervasive, however, that they are many people's first exposure to robust computing systems, so more obvious controls are necessary.

Variations

Two distinct types of elements will be discussed, each of which has subvariations. Tapes or "sliders" are vertically or horizontally-oriented indication and control mechanisms. They are used to control levels, such as for volume or zoom level. Zoom & Scale is in fact a specialized subset of these, used live.

  • Continuous - A single strip is shown, and the level can be set anywhere on the tape. Generally this just means a large number of increments (e.g. 100), but the setting is smooth and continuous.
  • Incremental - The strip is divided into increments, and when the indicator is moved it will jump to (or if smoothly dragged, will only lock at) specific intervals. If there are only 8 volume levels, for example, an incremental tape is the right solution.

The term used here is derived from linear "tape" gauges, as for indication purposes they reflect this closely. The closest machine-era term would be a "sliding potentiometer" but when shortened this can be confused with other interface elements, and it discusses technology too closely.

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

  • Click wheel - Like the mechanical thumb wheel, gestures (with finger or pen) up and down are used to move the number directly. This can be combined with the other method below, and should be for all touch interfaces.
  • Hardware buttons - When in focus, using up/down buttons, or some other hardware control can increment and decrement the value.
  • Increment button - A single on-screen button is provided, which increments the value with each button push. This is good for items which are mostly incremented, and for small ranges of values so mistakes can be fixed by going around. An example is a snooze control, where the user may pick from 5, 10 or 30 minutes.
  • Increment and decrement buttons - Instead of one, two buttons are provided, above and below the value indicator. The top one increments, the bottom one decrements.
  • Direct entry - When the field is in focus, entry can be typed directly. This is most useful for numeric values, but can be made to work as the "Live Jumping" variant of the Search Within pattern for text items.

The term here is somewhat used already. The most generic name for a machine era device would be a "thumbwheel" but this implies only the click wheel style of interaction. There is historically no single, non-cumbersome name for such controls.

Rotary dials and other types of continuous, glanceable controls or indicators are related, but are not used enough on mobile devices for patterns to have emerged. In some cases, control may not be obvious or easy, or the interface conceits lead to confusion and mistakes in input.

Interaction Details

The variants above are classes, and provide guidelines, but there are numerous spaces in the middle where new interfaces, perhaps inspired by machine-era antecedants, may be used. Consider the standards used by the OS, and the needs of the user to enter data quickly, and to protect entry, when selecting one of these methods or designing another one.

Values do not have to be at consistent intervals. As in the snooze button example above, they should be sensible and predictable, but do not have to be regularly spaced.

Tapes are always dead-end, selections. Increasing the level while at the maximum will have no effect. Spinners are circular. Increasing the level while at the maximum value will switch to the minimum value.

Spinners are frequently presented in groups, for example to set hours and minutes. Group related items into a single control, so that the minutes are displayed and controlled by a single spinner, not one for each digit. Unrelated items are entirely unrelated, even if adjacent. Switching minutes from 59 to 00 will not also change the hour from 3 to 4.

Especially for scroll-and-select devices, tape orientations should be deconflicted from the remainder of the interface. When presented in a page, where other elements can be selected and scrolling is possible, only horizontal tapes should be used, and no selectable items should be placed next to the tape. When the user scrolls using the up/down keys to the tape, it will become in focus without further selection, and immediate use of the left/right keys will change the level.

Increment and decrement buttons, when available on either a Spinner or Tape, are unitary input items. They will not key repeat. One click is required for each increment. The same behavior is encouraged for hardware keypads as well.

See the Zoom & Scale pattern for additional details on the use of increment buttons, and indicators of position in Tapes.

Only present the coarsest acceptable values within a Spinner. For example, when setting time for an appointment, the spinner should only have 15 minute increments.

Especially for Spinners, direct entry of values should be allowed as well. When the field is in focus, the keypad can be used to type values directly. This works especially well when coupled with coarse pre-set values; the user may quickly set most values, and still has the option of using any value when more rarely needed.

Custom values are discarded when the field is incremented or decremented. If 17 is entered, and the value is incremented to 30, when decremented it will display 15, not 17.

For touch or pen devices, allowing direct entry may require a more precise touch of the value field in order to display the input panel, and may require more space to be taken up by the Spinner than is acceptable.

Presentation Details

Spinners.. Key is how they are grouped, so you have one for minutes next to one for hours, in a single line...

Spinners, Often presented as though they are machinery, with the numbers disappearing on a circular plane. But do not have to...

Spinners should not be able to lock to partial numbers. Use while rotating, but snap to whole values.

tapes, increments if present must be visible, as gaps or ticks...

tapes must show the value, preferably attached to the end of the tape level, or to the indicator... also, talk about tape level and indicators...

use haptics or audio for gestured increments in either case... moving the tape or spinner on a touch device the user will usually obscure the value... if they see the start point, they can count up or down as far as they want, however...

Antipatterns

don't do click wheels without haptics

Either do not obscure the input, or always allow some other feedback of incrementing

Other dedicated level-changing keys the user may have become accustomed to, such as the volume control, may also be useful for changing the level of Spinners & Tapes. However this advice may conflict with other interface expectations or the OS standards. If the volume keys are reserved for volume only, or are used in some cases to scroll the page, do not use them to change other levels.

Examples

The following are machine-era items discovered during research. These are obscure, and more directly relevant than most, so are included here.

Taking my admonition to find new ideas: For example, mixing the click-wheel and two buttons could result in a springing toggle switch to the side of the indicator. On-screen gestures move this control, which may be more easy to understand than a thumbwheel, or may be easier to use. This is in fact used on this excellent thumbwheel from the Space Shuttle (you'll have to scroll to see it): http://www.space1.com/Artifacts/Space_Shuttle_Artifacts/Controls___Displays/controls___displays.html

Up and down buttons. There were both unidirectional and bidirectional ones. The document is long, so keep scrolling. http://www.digitran-switches.com/specsheets/pushbutton.pdf

The leverswitch is not dissimilar from the concept of the first one, again, though I am not sure putting the lever below would be so clear to a digital interface. http://www.digitran-switches.com/specsheets/leverswitch.pdf

These are just some examples of how in the machine era multiple interfaces existed to meet specialized needs. Feel free to explore interactive design alternatives, as long as you meet the principles in this pattern and good design in general.

Mechanical Style Controls (last edited 2012-09-27 21:18:46 by shoobe01)