Controls and Widgets


Most applications and devices that interaction designers currently design have some sort of visible controls for the user to use to manipulate the features of the producta dial to control volume on a stereo, for example, or a slider to select a date range. Controls provide both the affordances needed to understand what the product is capable of and the power to realize that capability.

This section describes the basic controls that interaction designers use. This isn't a complete list because interaction designers occasionally find new ways of engaging with product functionality. Almost all of these controls have their own standard feedback mechanisms (a switch moves and stays in its new position, for instance) that interaction designers should consider.

  • Switch. A toggle switch (Figure 6.11) is a very simple control. It moves from one setting ("on") to another ("off") and stays there until changed.

    Figure 6.11. A switch is the simplest of controls.

  • Button. Buttons (Figure 6.12) are the interaction designer's best friend. Once you begin to look for them, it's apparent that buttons are everywhere, all over our interfaces. In Microsoft Word alone, there are about 30 buttons visible at any given time. A mobile phone may have about 40 buttons: the number keys for dialing and a keyboard. A button is, at base, an item that is pressed or clicked to activate it. The button can stay pressed (a toggle button), requiring another press to reset it (like most on/off buttons), or it can reset itself automatically (like keys on a keyboard). Buttons can be used for a wide variety of actions: from changing modes (from writing text to drawing, say) to moving an item or a cursor via arrow keys. Buttons can take many forms, from tiny icons to physical squares on a floor that can be stepped on. Buttons, however, are good only for simple actions.

    Figure 6.12. Buttons are an interaction designer's best friend.

  • Dial. A dial (Figure 6.13) provides more control than a button, allowing the user to select a setting along a continuum (such as the amount of heat on a stove's burner) or to choose between different settings or modes (such as the mode for taking pictures and the mode for viewing them on a digital camera. Dials can move freely or simply turn from an established point to other established points on a wheel. Some dials, like those often found on clothes dryers, can be pushed in and pulled out, performing an action (such as turning on or off) that can vary based on the dial's rotation.

    Figure 6.13. Use a dial when users need more control than a button provides.

  • Latch. A latch (Figure 6.14) opens an otherwise tightly closed area. Latches are useful for keeping some areas or items hidden or safe until needed. They are good to use when a button or drop-down menu might be too easy to click or open. For example, latches are frequently used on handheld devices to keep the battery compartment safe.

    Figure 6.14. Latches protect areas that shouldn't be accessed too frequently or easily.

  • Slider. Sliders (Figure 6.15), like dials, are used for subtle control of a feature, often to control output such as speaker volume or the amount of data displayed, such as the number of houses on an interactive map. Sliders with more than one handle can be used to set a range within a range.

    Figure 6.15. Sliders are good for subtle control. Designers seem to love sliders.

  • Handle. A handle (Figure 6.16) is simply a protruding part of an object that allows it to be moved or, in some cases, resized. Handles on the frames of most digital windows allow the windows to be moved around the screen or resized.

    Figure 6.16. Frames of digital windows act as handles.

Physical-Only Controls

Some common controls are found only in the physical world and not on screens (although they can certainly manipulate objects on a screen).

  • Jog dial. A jog dial (Figure 6.17) is a type of dial that can be manipulated with a single finger, usually a thumb. It can be dial-like, or it can be a pad of buttons, typically used on small devices for moving a cursor or moving through menus. Jog dials are somewhat difficult to control, especially for young children and the elderly.

    Figure 6.17. Jog dials are typically found on small devices such as digital cameras and mobile phones.

  • Joystick. A joystick (Figure 6.18) is a physical device typically used in digital gaming or in other applications that require rapid movement and intensive manipulation of remote physical or digital objects. Joysticks can move in any direction or can be constrained to move only left to right or only up and down.

    Figure 6.18. Joysticks allow for control of either physical or digital objects from afar.

  • Trackball. A trackball (Figure 6.19) is a physical device for manipulating a cursor or other digital or physical objects. Trackballs are typically in a stationary base, but the ball itself moves in any direction. A computer mouse is a trackball in a case, usually with buttons.

    Figure 6.19. A mouse is really just a trackball in a case.

Digital-Only Controls

While many controls are found in both the physical, analog world and the digital one, some controls are found only on screens. These digital controls have grown from the original graphical user interface (GUI) vocabulary that was invented at Xerox PARC in the 1970s, reinvented in the 1980s in the Macintosh and PC operating systems, and added to and expanded by Web conventions in the 1990s.

  • Check box. A check box (Figure 6.20) enables users to select items from a short list.

    Figure 6.20. Check boxes allow users to select items from a list.

  • Radio button. Radio buttons (Figure 6.21) enable users to choose a single item from a selection. Typically, these are used to constrain selections, when only one answer is allowed ("Do you have blond hair?" Yes/No).

    Figure 6.21. Radio buttons typically allow selection of only one item at a time.

  • Twist. Twists (Figure 6.22) turn up or down, either revealing or hiding content or a menu in a panel.

    Figure 6.22. A twist is a type of latch that reveals or hides items, such as the contents of a folder.

  • Scroll bar. Scroll bars (Figure 6.23) enable users to move content within a particular window or panel. Scroll bars can be vertical or horizontal. Scroll bars themselves can be manipulated via the cursor or buttons (for instance, by using arrow keys).

    Figure 6.23. Vertical scroll bars are common, but horizontal scroll bars, because they are more difficult to manipulate, have never caught on.

  • Drop-down menu. Drop-down menus (Figure 6.24) allow designers to cluster navigation, functionality, or content together without having to display it all at once. Drop-down menus can be displayed by rolling over them, or they can be opened with a click. They can retract after a selection has been made or the cursor rolls off them, though not necessarily.

    Figure 6.24. Drop-down menus have many variations.

  • Multiple-selection list (or list box). Multiple-selection lists (Figure 6.25) enable users to select multiple items in a list.

    Figure 6.25. A multiple-selection list allows users to select multiple items in long lists.

  • Text box. Text boxes (Figure 6.26) enable users to enter numbers, letters, or symbols. They can be as small as (and constrained to) a single character or as large as the whole screen.

    Figure 6.26. Text boxes are the primary vehicle for (relatively) free input.

  • Spin box. Spin boxes (Figure 6.27) are text boxes with additional controls that enable users to manipulate what is inside the text box without having to type a value. They are good for suggesting values in what otherwise might be an ambiguous text box.

    Figure 6.27. Spin boxes combine text boxes with small buttons.

The combination of one (and usually more) controls plus the system response is called a widget. Widgets are the building blocks of any application or device. An MP3 player, for instance, is made of widgets: one for controlling volume, one for controlling the playing of music files, one for organizing files, one for exporting files, and so on. In each case, the user uses controls to perform an action, and the system responds. All applications and devices are made up of widgets.




Designing for Interaction(c) Creating Smart Applications and Clever Devices
Designing for Interaction: Creating Smart Applications and Clever Devices
ISBN: 0321432061
EAN: 2147483647
Year: 2006
Pages: 110
Authors: Dan Saffer

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net