Differences between revisions 5 and 6
Revision 5 as of 2011-03-30 04:42:24
Size: 3526
Editor: shoobe01
Comment:
Revision 6 as of 2011-03-30 15:44:06
Size: 6991
Editor: shoobe01
Comment:
Deletions are marked like this. Additions are marked like this.
Line 18: Line 18:
A simple, space-efficient method must be provided for users to easily make changes to a setting level or value.
Line 20: Line 22:
'''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:
 # They are graphically-oriented, so tend to provide information at a glance.
 # 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.
 # 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.



Line 30: Line 46:
See the hardware. maybe:
 * Click wheel - by gesture
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.
 * Continuous
 * Incremental
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:
 * Click wheel - by gesture. can be combined with the others, and should be for all touch interfaces.
Line 36: Line 58:
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.
Line 37: Line 60:
Click wheel gesture can be combined with the increment buttons...
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.
Line 45: Line 69:
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 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...

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.
Line 57: Line 83:
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.

Or, more likely, their alternatives. The Galaxy has some nice ones. The gist is that we think that obscuring the number is dumb, and you need alternative methods (up/down arrows, direct entry... click and get numpad even if softkb only) and scrolling as machine-era interface should be left as secondary; also, if you must scroll, click detents; ALSO: here and select list above, make sure the list is the right choice (can it be a series of buttons instead, to reduce number of clicks?), and pick good values. E.g. scroller for minutes on a calendar should usually be at 15 min intervals, and direct entry required for any odd numbers. This is not with select lists, because it's evolved to a special case only on mobile. So: a mobile pattern!

See the excellent thumbwheel on this page: http://www.space1.com/Artifacts/Space_Shuttle_Artifacts/Controls___Displays/controls___displays.html

Note how it works. VERY discrete clicks, vs. the vague rolling of many of them. Use the concept of an ideal machine-era thumbwheel, for all gestures. Even to suggesting haptic feedback for individual clicks.

As far as pushbutton to go up and down, those also existed in machine era! http://www.digitran-switches.com/specsheets/pushbutton.pdf Reference the difference between bidirectional and uni-directional. Use unidirectional if you are only going to increase, generally (e.g. snooze in incremental minutes, starts at minimum size). Either reduce the size of the other direction, allow direct input, or just assume circular input will work fine.

And even this: (the space shuttle one is not dissimilar) http://www.digitran-switches.com/specsheets/leverswitch.pdf Just as an example 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...

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:

  • # They are graphically-oriented, so tend to provide information at a glance. # 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. # 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.

basically a special version of the previous form element, pick from a list. Used here as it was in the machine era antecedant thumbwheel (find the generic machine name) for space concerns.

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

Increment (and usually decrement)... usually numeric only...

also can usually directly enter values...

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.

  • Continuous
  • Incremental

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:

  • Click wheel - by gesture. can be combined with the others, and should be for all touch interfaces.
  • Hardware up/down -
  • Increment button (good for say snooze. Goes around, but no decrement button)
  • Increment and decrement buttons
  • look at hardware links... more types I forgot about???

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

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

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.

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...

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.

Presentation Details

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

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

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