Section 7.2. CONTROL CHOICE


7.2. CONTROL CHOICE

The following charts describe controls and patterns for the kinds of information you might ask from the user, such as numbers and choices from lists. It's not a complete set by any means. In fact, you can probably come up with plenty of others. But the types shown here are common, and the listed controls are among your best choices for clarity and usability.

Consider these factors when choosing among the possible controls for a given information type:


Available space

Some controls take up lots of screen real estate; others are smaller, but may be harder to use than larger ones. Short forms on web pages might be able to spend that screen space on radio buttons or illustrated lists, whereas complex applications may need to pack as much content as possible into small spaces. Toolbars and table-style Property Sheets are especially constraining, since they generally allow for only one text line of height, and often not much width either.


User sophistication with respect to general computer usage

Text fields would be familiar to almost all users of anything you'd design, but not everyone would be comfortable using a double-thumbed slider. For that matter, many occasional computer users don't know how to handle a multiple-selection list-box, either.


User sophistication with respect to domain knowledge

A text field might be fine if your users know that, say, only the numbers 110 and 2030 are valid. Beginners will stumble, but if they're a very small part of your user base (and if the context is readily learned), maybe that's okaya tiny text field might be better than using a big set of interlinked controls.


Expectations from other applications

Bold/Italic/Underline controls are well-known as iconic buttons; it would must be weird to see them as radio buttons instead.


Available technology

As of this writing, HTML provides only a very small subset of the controls in common usage on the desktop: text fields, radio and checkboxes, scrolled lists, and drop-downs you cannot type into. Commercial and open-source GUI toolkits provide richer sets of controls. Their offerings vary, but many of them are extensible via programming, allowing you to create custom controls for specific situations.

The following sections summarize the various control options for four common input scenarios: lists of items, text, numbers, and dates or times. Each choice is illustrated with a typical example, taken from the Windows 2000 look-and-feel. (Keep in mind that these examples are not necessarily the best possible rendering of these controls! You do have some freedom when you decide how to draw them, especially on the Web. See Chapter 9's introduction for further discussion.)

7.2.1. LISTS OF ITEMS

A wide variety of familiar controls allow users to select items or options from lists. Your choice of control depends on the number of items or options to be selected (one or many), and the number of potentially selectable items (two, a handful, or many).

Controls for selecting one of two options (a binary choice):

Checkbox

  • Pros: simple; low space consumption.

  • Cons: can only express one choice, so its inverse remains implied and unstated. This can lead to confusion about what it means when it's off.

Two radio buttons

  • Pros: both choices are stated and visible.

  • Cons: higher space consumption.

Two-choice dropdown list

  • Pros: both choices are stated; low and predictable space consumption; easily expandable later to more than two choices.

  • Cons: only one choice is visible at a time; requires some dexterity.

"Press-and-stick" toggle button

  • Pros: same as for checkbox; when iconic, very low space consumption.

  • Cons: same as for checkbox; also, not as standard as a checkbox for text choices.

Menu of two radio-button menu items

  • Pros: very low space consumption on the main UI, since it's found on menu bars or pop-up menus.

  • Cons: popup menus might be hard to discover; requires a lot of dexterity.

Controls for selecting one of N items, where N is small:

N radio buttons

  • Pros: all choices are always visible.

  • Cons: high space consumption.

N-item dropdown list

  • Pros: low space consumption.

  • Cons: only one choice is visible at a time, except when the menu is open; requires some dexterity.

N-item set of mutually exclusive iconic toggle buttons

  • Pros: low space consumption; all choices are visible.

  • Cons: icons might be cryptic, requiring tooltips for understanding; user might not know they're mutually exclusive.

Menu of N radio-button menu items

  • Pros: very low space consumption on main UI, since it's found on menu bars or popup menus; all choices are visible.

  • Cons: popup menus might be hard to discover; requires a lot of dexterity.

Single-selection list or table

  • Pros: many choices are visible; frame can be kept as small as three items.

  • Cons: higher space consumption than dropdown list or spinner.

Spinner

  • Pros: low space consumption.

  • Cons: only one choice is ever visible at a time; requires a lot of dexterity; and unfamiliar to naïve computer users. Dropdown list is usually a better choice.

Controls for selecting one of N items, where N is large:

N-item dropdown list, scrolled if necessary

  • Pros: low space consumption.

  • Cons: only one choice is visible at a time, except when menu is open; requires a lot of dexterity to scroll through items on the drop-down menu.

Single-selection list or table

  • Pros: many choices are visible; can be kept small if needed.

  • Cons: higher space consumption than dropdown list.

Single-selection tree or Cascaded List, with items arranged into categories

  • Pros: many choices are visible; organization helps findability in some cases.

  • Cons: may be unfamiliar to naïve computer users; high space consumption; requires high dexterity.

Custom browser, such as for files, colors, or fonts

  • Pros: suited for browsing available choices.

  • Cons: may be unfamiliar to some users; difficult to design; usually a separate window, so it's less immediate than controls placed directly on the page.

Controls for selecting many of N items, in any order:

Array of N checkboxes

  • Pros: all choices are stated and visible.

  • Cons: high space consumption.

Array of N toggle buttons

  • Pros: low space consumption; all choices are visible.

  • Cons: icons might be cryptic, requiring tooltips for understanding; might look mutually exclusive.

Menu of N check-box menu items

  • Pros: very low space consumption on main UI, since it's found on menu bars or popup menus; all choices are visible.

  • Cons: popup menus might be hard to discover; requires a lot of dexterity.

Multiple-selection list or table

  • Pros: many choices are visible; can be kept small if needed.

  • Cons: not all choices are visible without scrolling; high (but bounded) space consumption; user might not realize it's multiple-selection.

List with checkbox items

  • Pros: many choices are visible; can be kept small if needed; affordance for selection is obvious.

  • Cons: not all choices are visible without scrolling; high (but bounded) space consumption.

Multiple-selection tree or Cascaded List, with items arranged into categories

  • Pros: many choices are visible; organization helps findability in some cases.

  • Cons: may be unfamiliar to naïve computer users; requires high dexterity; looks same as single-selection tree.

Custom browser, such as for files, colors, or fonts

  • Pros: suited for browsing available choices.

  • Cons: may be unfamiliar to some users; difficult to design; usually a separate window, so it's less immediate than controls placed directly on the page.

List Builder pattern

  • Pros: selected set is easy to view; selection can be an ordered list if desired; easily handles a large source list.

  • Cons: very high space consumption due to two lists; does not easily handle a large set of selected objects.

Controls for constructing an unordered list of user-entered items:

List or table with "Add" or "New" button

  • Pros: "add" action is visible and obvious.

  • Cons: higher space consumption; visual clutter.

List or table with New Item Row pattern (Chapter 6)

  • Pros: lower space consumption; editing is done in place.

  • Cons: "add" action is not quite as obvious as a button.

List or table that can receive drag-and-dropped items

  • Pros: visually elegant and space-saving; drag-and-drop is efficient and intuitive.

  • Cons: "add" action is not visible, so users may not know the list is a drop target.

Controls for constructing an ordered list of items:

Unordered list with "Up" and "Down" affordances

  • Pros: rearrangement actions are visible.

  • Cons: higher space consumption.

Unordered list that offers internal drag-and-drop for reordering items

  • Pros: visually elegant and space-saving; drag-and-drop is efficient and intuitive.

  • Cons: rearrangement actions are not visible, so user may not know they're available.

7.2.2. TEXT

Collecting text input from a user is one of the most basic form tasks. The controls typically are chosen according to the number of lines to be entered, whether or not the lines are predetermined choices, and whether or not the text will include formatting.

Control for entering one line of text:

Single-line text field

Controls for entering either one line of text, or a one-of-N choice:

Combo box

  • Pros: quicker to use than a separate dialog box; familiar.

  • Cons: limited number of items can reasonably fit in drop-down.

Text field with "More" button (you can also use it with a combo box instead of a text field)

  • Pros: permits the launch of a specialized chooser dialog boxe.g., a file finder.

  • Cons: not as familiar as a combo box to some users; not as immediate.

Control for entering multiple lines of unformatted text:

Multiline text area

Controls for entering multiple lines of formatted text:

Text area with inline tags

  • Pros: skilled users can avoid the toolbar by typing tags directly.

  • Cons: not truly WYSIWYG (what you see is what you get).

Rich-text editor

  • Pros: immediacy, since the edited text serves as a preview.

  • Cons: use of toolbar is required, so it cannot always be keyboard-only.

7.2.3. NUMBERS

Because they often must follow more complex formatting rules, entering numbers on a form is slightly more complex than entering basic text. The choice of input options depends on the type of number you enter and its allowable range.

Controls for entering numbers of any type or format:

Text field using Forgiving Format

  • Pros: visually elegant; permits wide variety of formats or data types.

  • Cons: expected format is not evident from the control's form, so it may cause temporary confusion; requires careful back-end validation

Text field using Structured Format

  • Pros: desired format evident from control's form.

  • Cons: possibly higher space consumption; more visual complexity; does not permit any deviation from the specified format, even if user needs to do so.

Spin box (best for integers or discrete steps)

  • Pros: user can arrive at a value via mouse clicks, without touching the keyboard; can also type directly if desired.

  • Cons: not familiar to all users; you may need to hold down the button long enough to reach the desired value; requires dexterity to use tiny buttons.

Controls for entering numbers from a bounded range:

Slider

  • Pros: obvious metaphor; position of value in range is shown visually; the user cannot enter a number outside the range.

  • Cons: high space consumption; unobvious keyboard access; tick labels can make it very crowded.

Spinner

  • Pros: values are constrained to be in range when buttons are used; low space consumption; supports both keyboard-only and mouse-only access.

  • Cons: not familiar to all users; requires dexterity to use tiny buttons; needs validation; cannot visually see value within range.

Text field with after-the-fact error checking (can have Input Hints, Input Prompt, etc.)

  • Pros: familiar to everyone; low space consumption; keyboard access.

  • Cons: requires validation; no constraints on what can be entered, so you have to communicate the range the range by some other means.

Slider with text field (can take the form of a Dropdown Chooser with a slider on the dropdown)

  • Pros: allows both visual and numeric forms of input

  • Cons: complex; high space consumption when both elements are on the page; requires validation of text field when the user types the value.

Controls for entering a subrange from a larger range:

Double slider (can be used with text fields, as above)

  • Pros: lower space consumption than two sliders.

  • Cons: unfamiliar to most users; no keyboard access unless you also use text fields.

Two sliders (also can be used with text fields)

  • Pros: less scary looking than a double slider.

  • Cons: very high space consumption; no keyboard access unless text fields are used too.

Two spinners (can be linked via Fill-in-the-Blank)

  • Pros: values are constrained to be in range when buttons are used; low space consumption; supports both keyboard-only and mouse-only access.

  • Cons: not familiar to all users; requires dexterity to use tiny buttons; needs validation; cannot visually see value within range.

Two text fields with error checking (can use Input Hints, Input Prompt, Fill-in-the-Blank)

  • Pros: familiar to everyone; much lower space consumption than sliders.

  • Cons: requires validation; no constraints on what can be entered, so you need to communicate the range by some other means.

7.2.4. DATES OR TIMES

Because of the potential formats and internationalization issues, dates and times can be tricky to accept from users. Input options for dates or times include:

Forgiving Format text field

  • Pros: visually simple; permits wide variety of formats or data types; keyboard access.

  • Cons: expected format not evident from control's form, so it may cause brief confusion; requires careful back-end validation.

Structured Format text field

  • Pros: desired format evident from control's form.

  • Cons: possibly higher space consumption; more visual clutter; does not permit deviation from specified format, even if user wants to do so.

Calendar or clock control

  • Pros: obvious metaphor; input is constrained to allowable values.

  • Cons: high space consumption; may not provide keyboard-only access.

Dropdown Chooser with calendar or clock control

  • Pros: combines the advantages of text field and calendar control; low space consumption.

  • Cons: complex interaction; requires dexterity to pick values from a dropdown.




Designing Interfaces
Designing Interfaces: Patterns for Effective Interaction Design
ISBN: 0596008031
EAN: 2147483647
Year: 2005
Pages: 75

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