2. SCREEN-BASED CONTROLS
Screen-based controls, often simply called
CONTROLS and sometimes called
WIDGETS, are the elements of a screen that
constitute its body.
By definition, they are graphic objects that
represent the properties/operations of other
objects.
3. SCREEN-BASED CONTROLS
A control may:
◦ Permit the entry or selection of a particular
value.
◦ Permit the changing or editing of a particular
value.
◦ Display only a particular piece of text, value,
or graphic.
◦ Cause a command to be performed.
◦ Possess a contextual pop-up window.
4. SCREEN-BASED CONTROLS
In this step we will:
Identify the characteristics and capabilities of the
various screen-based controls, including:
◦ Buttons.
◦ Text entry/read-only controls.
◦ Selection controls.
◦ Combination entry/selection controls.
◦ Specialized operable controls.
◦ Custom controls.
◦ Presentation controls
◦ Web controls.
Select the proper controls for the user and
tasks.
5. Select the proper controls for the
user and tasks.
The screen designer is presented with an array
of screen-based controls to choose from.
Selecting the right one for the user and the task
is often difficult.
A proper fit between user and control will lead to
fast, accurate performance.
A poor fit will result in lower productivity, more
errors, and dissatisfaction.
6. Principles Regarding Controls
A control must:
◦ Look the way it works
◦ Work the way it looks
The look of a control should make it obvious that it is a
control. In case of MS word
◦ Raised elements can be pressed
◦ Recessed/dipped elements cannot be pressed
◦ Elements on a flat white background can be opened, edited, or
moved
A control must be used exactly as its
design intended
A control must be presented in a standard
manner
7. A control must be presented in a
standard manner and used exactly as
its design intended.
The nonstandard design use of controls
destroys consistency and aggravates and
frustrates users, who have developed
expectations based upon their past
experiences.
Using standard controls allows people to
focus on their tasks or the content of the
screens with which they are interacting,
instead of having to figure out what to do.
8. Step 7
OPERABLE CONTROLS
Operable controls are those that permit
the entry, selection, changing, or editing
of a particular value or Cause a
command to be performed.
Kinds of OPERABLE CONTROLS:
◦ Buttons
◦ Text entry/read-only controls
◦ Selection controls
◦ Combination entry/selection controls
◦ Specialized operable controls
9. Step 7
BUTTONS
Description:
◦ A square or rectangular-shaped control with a
label indicating action to be accomplished
◦ Label may consist of text, graphics, or both
Purpose:
To Start actions
To Change properties
To Display a pop-up menu
Advantages:
◦ Always visible, reminding of choices available
◦ Convenient
◦ Can be logically organized in the work area
◦ Can provide meaningful descriptions of the actions
◦ Larger size generally provides faster selection
10. Step 7
BUTTONS
Advantages (Continued):
◦ Can possess 3-D appearance
Adds an aesthetically pleasing style
Provides visual feedback through button movement when
activated
◦ May permit use of keyboard equivalents and
accelerators
◦ Faster than using a two-step menu bar/pull-down
sequence
Disadvantages:
Consumes screen space
Size limits number that may be displayed
Requires looking away from main work area to activate
Requires moving pointer to select
11. Step 7
BUTTONS
Proper Usage:
◦ Use for frequently used actions that are
specific to a window
To cause something to happen immediately
To display another window
To display a menu of options
To set a mode or property value
◦ In Web page or application design:
Use buttons to perform an action
Use links to show information
13. Command buttons
A button comes in three styles.
The first resembles the control commonly found on
electrical or mechanical devices and is sometimes
called a PUSHBUTTON.
These are most often rectangular, with text that
indicates the action to be taken when they are
selected or pressed.
These buttons are usually placed within a window,
and activating them causes the action or command
described on them to be performed immediately.
They are often referred to as COMMAND BUTTONS.
15. Toolbar Buttons
The second style is square or rectangular in shape with an
icon or graphic inside.
It may have an associated label.
The label may be permanently affixed to the screen within
the button, adjacent to it, or only appear when the pointer is
moved to the button (called ToolTip).
These buttons may appear singly or be placed in groupings
commonly called button bars or toolbars.
They are most frequently used to quickly access
commands, many of which are normally accessed through
the menu bar, or to initiate other actions or functions.
These button groupings are usually placed at the screen’s
top or side. They are usually relocatable and removable by
the user.
16. The Symbol Button
The third style is square or rectangular in
shape with a symbol inscribed inside.
The symbol, when learned, identifies the
button and the action to be performed when
the button is selected.
These buttons, specific to a platform and
provided by it, are located in the borders of
windows and are used to do such things as
obtaining a system menu or resizing a window.
17. Step 7
COMMAND BUTTONS
Usage
For windows with a menu bar, use to provide fast
access to frequently used or critical commands
For windows without a menu bar, use to provide
access to all necessary commands
Structure
Provide a rectangular shape with the label inscribed
within
Give the button a raised appearance
Maintain consistency in style throughout an
application
18. Step 7
COMMAND BUTTONS
Labels
Use standard button labels when available
Provide meaningful descriptions of the action performed
Use single-word labels whenever possible
◦ Use two-three words for clarity, if necessary
Use mixed-case letters with first letter of each significant
label word capitalized
Display labels:
◦ In the regular system font
◦ In the same size font
Do not number labels
Center the label within the button borders
Provide consistency in labeling on all screens
19. Step 7
COMMAND BUTTONS
Size
Provide as large a button as feasible
Maintain consistent button heights and widths
◦ Exception: Buttons containing excessively long labels may be
wider
Number
Restrict the number of buttons on a window to six or
fewer
Location and Layout
Maintain consistency in button location between
windows
Never simply “fit” buttons in available space
20. Step 7
COMMAND BUTTONS
Location and Layout (Continued)
If buttons are for exiting the dialog,
◦ position centered and aligned horizontally at bottom
If buttons are used for invoking a dialog feature or
expanding the dialog,
◦ centered and aligned vertically on right side
If a button has a contingent relationship to another
control,
◦ it adjacent to the related control
If a button has contingent relationship to group of
controls,
◦ it at the bottom or to right of related controls
21. Step 7
COMMAND BUTTONS
Location and Layout (Continued)
If, due to space constraints, exiting and expanding/invoking feature
buttons must be placed together:
◦ If at the bottom, place exiting buttons to the right, separating the
groupings by one button’s width
◦ If along the right side, place exiting buttons at the bottom, separating the
groupings by one button’s height
For exiting and expanding/invoking feature buttons, do not:
◦ Align with the other screen controls
◦ Present displayed within a line border
Provide equal and adequate spacing between adjacent buttons
Provide adequate spacing between buttons and the screen body
controls
For Web pages spanning more than one screen:
◦ Repeat buttons at page top and bottom
22. Location and Layout
Command buttons should be positioned in consistent
positions within a window.
This enables a person to memorize button locations and
predict where they will appear when a window is
presented.
For an experienced user this permits faster pointing and
activation because a button may be identified simply by
its location without its label having to be read, and a
mouse movement to that location may be commenced
before a window is even displayed.
Consistent locations also aid in quickly discriminating
the different kinds of buttons described below.
24. Guidelines for exiting and
expanding
Do not provide alignment with the other screen controls.
Maintain alignment and spacing only within the buttons
themselves.
Trying to align the buttons to other screen controls will
most often create variable spacing between the buttons
themselves, which is visually distracting.
Also, do not display buttons within a line border; instead
present them on the background of the window itself.
The unique physical look of the buttons is strong
enough for them to create their own visual grouping.
Reserve line borders for individual controls or groups of
controls that are in greater need of closure.
Too many borders can also create visual clutter.
27. Step 7
COMMAND BUTTONS
Organization
Organize standard buttons in the manner recommended by the
platform being used
Organize other buttons in common and customary grouping
schemes
◦ For buttons ordered left to right, place those for most frequent actions to
the left
◦ For buttons ordered top to bottom, place those for most frequent actions
at the top
Keep related buttons grouped together
Separate potentially destructive buttons from frequently chosen
selections
Buttons found on more than one window should be consistently
positioned
The order should never change
For mutually exclusive actions, use two buttons; do not dynamically
change the text
28. Windows recommends the following:
Follow the standard, consistent ordering
schemes recommended by the platform
being use:
◦ An affirmative action to the left (or above).
◦ The default first.
◦ OK and Cancel next to each other.
◦ Help last, if supported.
Other platforms may suggest a different
ordering
29. Step 7
COMMAND BUTTONS
Intent Indicators
When button causes an action to be immediately
performed, no intent indicator is necessary.
When button leads to a cascading dialog, include an
ellipsis (...) after the label.
30. Intent Indicators
When a button leads to a menu, include a triangle
pointing in the direction the menu will appear after the
label.
When a button leads to an expanding dialog, include a
double arrow (>>) with the label.
When a button has a contingent relationship to another
control, include a single arrow (->) pointing at the control
31. Step 7
COMMAND BUTTONS
Expansion Buttons
Gray button out after expansion
Provide a contraction button, if necessary
◦ Locate it beneath, or to right of, the expansion button
◦ Gray it out when not applicable
When a button that expands a dialog is activated, and
the dialog is expanded, display the button dimmed or
grayed out.
If the dialog can again be contracted, provide a
contraction button beneath the expansion button or to
the right of it.
Gray this button out when the dialog is contracted;
display it at normal intensity when the dialog is
expanded.
32. COMMAND BUTTONS
Defaults
Intent:
◦ When a window is first displayed, provide a default
action, if practical
Selection:
◦ A default should be the most likely action:
A confirmation
An application of the activity being performed
A positive action such as OK, unless the result is catastrophic
◦ If a destructive action is performed (such as a
deletion), the default should be Cancel
Presentation:
◦ Indicate the default action by displaying the button
with a bold or double border
33. Step 7
COMMAND BUTTONS
Defaults (Continued)
Procedures:
◦ The default can be changed as user interacts
◦ When user navigates to a button, it can temporarily become the
default
◦ Use the Enter key to activate a default button
◦ If another control requires use of the Enter key:
Temporarily disable default while focus is on other control
◦ Permit double-clicking on a single selection control in a window
to also carry out the default command
Unavailable Choices
Temporarily unavailable choices should be dimmed or
grayed out
34. Step 7
COMMAND BUTTONS
Keyboard Equivalents
Assign a keyboard equivalent mnemonic to each button
to facilitate keyboard selection
The mnemonic should be the first character of the
button’s label
◦ If duplication exists in first characters, for duplicate items, use
another character in the label
◦ Preferably, choose the first succeeding consonant
Designate the mnemonic character by underlining
Maintain the same mnemonic on all identical buttons on
other screens
Keyboard Accelerators
Assign a keyboard accelerator to each button to
facilitate keyboard selection
35. Step 7
COMMAND BUTTONS
Scrolling
If a window can be scrolled, do not scroll command buttons
◦ Exception: if the screen cannot scroll independently of the buttons
Use buttons to move between multipage forms, not scroll
bars
◦ Label buttons Next and Previous
Button Activation
Pointing:
◦ Highlight the button in some visually distinctive manner when the
pointer is resting on it
Activation:
◦ Call attention to the button in another visually distinctive manner
when it has been pressed
◦ If a button can be pressed continuously, permit user to hold mouse
button down and repeat action
36. Step 7
TOOLBARS
Usage
To provide easy and fast access to most
frequently used commands or options across
multiple screens
To invoke a subapplication within an application
To use in place of certain menu items
37. Step 7
TOOLBARS
Structure
Images:
◦ Provide buttons of equal size
◦ Create a meaningful and unique icon
Use icon design guidelines
◦ Center the image within the button
◦ Give the button a raised appearance
◦ Ensure that toolbar images are discernible from Web page
graphical images
Text:
◦ Create a meaningful label, adhering to label guidelines for
command buttons
◦ Create toolbar buttons of equal size, following the size guidelines
recently described
Consistency:
◦ Use the same icon throughout an application and between
applications
38. Step 7
TOOLBARS
Size
Button:
◦ 24 (w) by 22 (h) pixels, including border
◦ 32 (w) by 30 (h) pixels, including border
◦ Larger buttons can be used on high-resolution displays
Label:
◦ 16 (w) by 16 (h) pixels
◦ 14 (w) by 24 (h) pixels
Default:
◦ Provide the smaller size as the default size with a user option to
change it
Image:
◦ Center the image in the button
39. Step 7
TOOLBARS
Organization
Order the buttons based on common and
customary grouping schemes
◦ For buttons ordered left to right, place those for the
most frequently used actions to the left
◦ For buttons ordered top to bottom, place those for the
most frequently used actions at the top
◦ Keep related buttons grouped together
Separate potentially destructive buttons from
frequently chosen selections
Permit user reconfiguration of button
organization
40. Step 7
TOOLBARS
Location
Position main features and functions bar horizontally across top of
window just below menu bar
Position subtask and subfeatures bars along sides of window
Permit the location of the bar to be changed by the user
Permit display of the bar to be turned on or off by the user
◦ Also provide access through standard menus
Active Items
Make only currently available toolbar items available
Temporarily unavailable items may be grayed
Customization
Permit toolbars to be turned off by the user
Allow the customizing of toolbars
◦ Provide a default, however
41. Step 7
TOOLBARS
Keyboard Equivalents
Assign keyboard equivalents to facilitate KB selection
Maintain the same mnemonic on all identical buttons
Keyboard Accelerators
Assign a keyboard accelerator to facilitate KB selection
Button Activation
Pointing:
◦ Highlight the button in some visually distinctive manner when the
pointer is resting on it and the button is available for selection
Activation:
◦ Call attention to the button in another visually distinctive manner
when it has been activated or pressed
42. Step 7
TEXT ENTRY/READ-ONLY CONTROLS
Contain text that is exclusively entered or
modified through the keyboard
May also contain entered text being
presented for reading or display purposes
only
Text Box Kinds
◦ Single line
◦ Multiple line
43. Step 7
TEXT BOXES
Description:
◦ A control, usually rectangular in shape, in which:
Text may be entered or edited
Text may be displayed for read-only purposes
◦ Usually possesses a caption describing the kind of information
contained within it
◦ An outline field border:
Is included for enterable/editable text boxes
Is not included for read-only text boxes
◦ Two types exist:
Single line
Multiple line
◦ When first displayed, the box may be blank or contain an initial
value
Purpose:
◦ To permit the display, entering, or editing of textual information
◦ To display read-only information
44. Step 7
TEXT BOXES
Advantages:
◦ Very flexible
◦ Familiar
◦ Consumes little screen space
Disadvantages:
◦ Requires use of keyboard
◦ Requires user to remember what must be keyed
Proper usage:
◦ Most useful for data that is:
Unlimited in scope
Difficult to categorize
Of a variety of different lengths
◦ When using a selection list is not possible
45. Step 7
TEXT BOXES
Single-Line Text Box
Description:
◦ A control consisting of no more than one text line
Purpose:
◦ To make textual entries when the information can be
contained within one line of the screen
Multiple-Line Text Box
Description:
◦ A control consisting of a multiple-line rectangular box
Purpose:
◦ To type, edit, and read passages of text
46. Step 7
TEXT BOXES
Captions
Structure and Size:
◦ Provide a descriptive caption to identify the kind of information to be
typed, or contained within, the text box
◦ Use a mixed-case font
◦ Display the caption in normal intensity or in a color of moderate
brightness
Formatting - Single Fields:
◦ Position the field caption to the left of the text box
Place a colon (:) following the caption
Formatting - Multiple Occurrence Fields:
◦ For entry/modification text boxes:
Left-align the caption one line above the column of entry fields
◦ For display/read-only boxes:
Center or left-align the caption to the data field depending upon the size and
content of the data
47. Step 7
TEXT BOXES
Fields
Structure:
◦ Identify entry/modification text boxes with a line border or reverse
polarity rectangular box
Present the box in a recessed manner
Present display/read-only text boxes on background
◦ Break up long text boxes through incorporation of slashes ( / ),
dashes (-), spaces, or delimiters
Size:
◦ Size to indicate the approximate length of the field
◦ For fixed-length data, large enough for entire entry
◦ For variable-length data, large enough for majority of entries
48. Step 7
TEXT BOXES
Fields
Size (Continued)
◦ For entries larger than the entry field, provide scrolling to permit
keying into, or viewing, the entire field
◦ Employ word wrapping for continuous multiple-line text
Highlighting:
◦ Call attention to text box data through a highlighting technique
Unavailable fields:
◦ Gray-out temporarily unavailable text boxes
Fonts:
◦ To support multiple fonts, use Rich-Text Box
49. Step 7
SELECTION CONTROLS
Present all the possible alternatives, conditions, or
choices that may exist for an entity, property, or value
Relevant item or items are selected from those
displayed
Selection controls may:
◦ Present all the alternatives together, visibly
◦ Require an action to retrieve the entire listing and/or scrolling to
view all the alternatives
Kinds:
◦ Radio buttons
◦ Check boxes
◦ List boxes
◦ Drop-down/pop-up list boxes
◦ Palettes
50. Step 7
RADIO BUTTONS
Description:
◦ A two-part control consisting of the following:
Small circles, diamonds, or rectangles
Choice descriptions
◦ When a choice is selected:
The option is highlighted
Any existing choice is automatically unhighlighted and deselected
Purpose:
◦ To set one item from a small set of mutually exclusive options (2 to 8)
Advantages:
◦ Easy-to-access choices
◦ Easy-to-compare choices
◦ Preferred by users
Disadvantages:
◦ Consume screen space
◦ Limited number of choices
51. Step 7
RADIO BUTTONS
Proper Usage:
◦ For setting attributes, properties, or values
◦ For mutually exclusive choices (that is, only one can be selected)
◦ Where adequate screen space is available
◦ Most useful for data and choices that are:
Discrete
Small and fixed in number
Not easily remembered
In need of a textual description to meaningfully describe the alternatives
Most easily understood when the alternatives can be seen together and
compared
Never changed in content
Do not use:
◦ For commands
◦ Singly to indicate the presence or absence of a state
52. Step 7
RADIO BUTTONS
Significant Guidelines
Choice Descriptions
◦ Provide meaningful, fully spelled-out choice descriptions clearly
describing the values or effects set
◦ Display in a single line of text
◦ Display using mixed-case letters, in sentence style
◦ Include a None choice if it adds clarity
Size
◦ Show a minimum of two choices, a maximum of eight
Defaults
◦ When the control possesses a state or effect that has been
predetermined to have a higher probability of selection than the
others, designate it as the default and display its button filled in
53. Step 7
RADIO BUTTONS
SIGNIFICANT GUIDELINES
Structure
◦ A columnar orientation is the preferred manner of
presentation
Organization
◦ Arrange selections in expected order or patterns
Caption
◦ Provide a caption for each radio button control
54. Step 7
CHECK BOXES
Description:
◦ A two-part control consisting of a square box and choice
description
◦ Each option acts as a switch and can be either “on” or “off ”
When an option is selected (on), a mark such as an “X” or “check”
appears within box
Otherwise the box is unselected or empty
◦ Each box can be:
Switched on or off independently
Used alone or grouped in sets
Purpose:
◦ To set one or more options as either on or off
Advantages
◦ Easy-to-access choices
◦ Easy-to-compare choices
◦ Preferred by users
55. Step 7
CHECK BOXES
Disadvantages:
◦ Consume screen space
◦ Limited number of choices
◦ Single check boxes difficult to align with controls
Proper Usage:
◦ For setting attributes, properties, or values
◦ For nonexclusive choices
◦ Where adequate screen space is available
◦ Most useful for data and choices that are:
Discrete
Small and fixed in number
Not easily remembered
In need of a textual description to describe
Most easily understood when the alternatives can be seen together
and compared
Never changed in content
◦ Can be used to affect other controls
◦ When both states of a choice are clearly opposite and
unambiguous
56. Step 7
CHECK BOXES
Significant Guidelines
Choice Descriptions
◦ Provide meaningful, fully spelled-out choice descriptions clearly
describing the values or effects set
◦ Display in a single line of text
◦ Display using mixed-case letters, using the sentence style
◦ Include a None choice if it adds clarity
Size
◦ Show a minimum of one choice, a maximum of eight
Defaults
◦ When the control possesses a state or affect that has been
preset, designate it as the default and display its check box
marked
57. Step 7
CHECK BOXES
Significant Guidelines (Continued)
Structure
◦ Provide groupings of related check boxes
◦ A columnar orientation is the preferred manner of presentation
Organization
◦ Arrange selections in expected order or patterns
Caption
◦ Provide a caption for each grouping of check boxes
58. Step 7
PALETTES
Description:
◦ A control consisting of graphical alternatives
The choices themselves are descriptive, being composed of colors, patterns, or
images
◦ In addition to being a standard screen control, a palette may also be
presented on a pull-down or pop-up menu or a toolbar
Purpose:
◦ To set one of a series of mutually exclusive options presented graphically
or pictorially
Advantages:
◦ Pictures aid comprehension
◦ Easy-to-compare choices
◦ Usually consume less screen space than textual
Disadvantages:
◦ A limited number of choices can be displayed
◦ Difficult to organize for scanning efficiency
◦ Requires skill and time to design meaningful and attractive graphical
representations
59. Step 7
PALETTES
Proper Usage:
◦ For setting attributes, properties, or values
◦ For mutually exclusive choices
◦ Where adequate screen space is available
◦ Most useful for data and choices that are:
Discrete
Frequently selected
Limited in number
Variable in number
Not easily remembered
Most easily understood when the alternatives may be seen together and
compared
Most meaningfully represented pictorially
Can be clearly represented pictorially
Rarely changed in content
Do Not Use:
◦ Where the alternatives cannot be meaningfully represented pictorially
◦ Where words are clearer than images
◦ Where the choices are going to change
60. Step 7
PALETTES
Significant Guidelines
Graphical Representations
◦ Provide meaningful, accurate, and clear illustrations or representations of
choices
◦ Create images large enough to:
Clearly illustrate the available alternatives
Permit ease in pointing and selecting
◦ Create images of equal size
◦ Always test illustrations before implementation
Layout
◦ Create boxes large enough to:
Effectively illustrate the available alternatives
Permit ease in pointing and selecting
◦ Create boxes of equal size
◦ Columnar orientation is the preferred presentation
◦ Arrange palettes in expected or normal order
Organization
◦ Arrange palettes in expected or normal order
61. Step 7
LIST BOXES
Description:
◦ A permanently displayed box-shaped control containing a list
of attributes or objects from which:
A single selection is made
Multiple selections are made
◦ The choice may be text or graphics
◦ Selections are made by using a mouse
◦ Capable of being scrolled to view large lists
◦ No text entry field exists in which to type text
◦ May be may be associated with Summary List Box
Permits the selected choice to be displayed or an item added
to the list
Purpose:
◦ To display a collection of items containing:
Mutually exclusive options
Non-mutually-exclusive options
62. Step 7
LIST BOXES
Advantages:
◦ Unlimited number of choices
◦ Reminds users of available options
◦ Box always visible
Disadvantages:
◦ Consumes screen space
◦ Often requires an action (scrolling) to see all list choices
◦ The list content may change, making items hard to find
◦ The list may be ordered in an unpredictable way, making items
hard to find
63. Step 7
LIST BOXES
Proper Usage:
◦ For selecting values or setting attributes
◦ For choices that are:
Mutually exclusive
Non-mutually exclusive
◦ Where screen space is available
◦ For data and choices that are:
– Best represented textually
– Not frequently selected
– Not well known, easily learned, or remembered
– Ordered in an unpredictable fashion
– Frequently changed
– Large in number
– Fixed or variable in list length
◦ When screen space or layout considerations make radio buttons
or check boxes impractical
64. Step 7
LIST BOXES
Significant Guidelines
Selection Descriptions
◦ Clearly and meaningfully describe the choices available
◦ Present in mixed case, using the sentence style structure
◦ Left-align into columns
List Size
◦ No actual limit in size
◦ Present all available alternatives
◦ Require no more than 40 page-downs to search a list
◦ If more are required, provide a method for using search criteria or
scoping the options
65. Step 7
LIST BOXES
Significant Guidelines (Continued)
Box Size
◦ Long enough to display 6 to 8 choices without scrolling
If more items available than visible provide scrolling
◦ Wide enough to display the longest possible choice
If box cannot be wide enough to display longest entry:
Widen box to permit distinguishable entries
Break long entries with an ellipsis (...) in middle
Organization
◦ Order in a logical and meaningful way
Consider using separate controls to enable user to change sort order
or filter items displayed
66. Step 7
LIST BOXES
Single Selection
Purpose:
◦ To permit selection of only one item from a large listing
Significant Design Guidelines:
◦ Related text box
If presented with an associated text box control:
Position the list box below and as close as possible to the text box
Word the list box caption similarly to the text box caption
◦ Follow other relevant list box guidelines
67. Step 7
LIST BOXES
Extended and Multiple-Selection
Purpose:
◦ Permit selection of more than one item in long list
Extended list box: Optimized for individual item or range selection
Multiple-selection list box: Optimized for independent item selection
Significant Design Guidelines:
◦ Mark the selected choice with an X or check mark to the left of
the entry
◦ Consider providing a summary list box
Provide summary list box command buttons:
Add (one item) or Add All
Remove (one item) or Remove All
◦ Consider providing a display-only text control indicating how
many choices have been selected
◦ Provide command buttons to accomplish fast Select All and
Deselect All actions
◦ Follow other relevant list box guidelines
68. Step 7
LIST VIEW CONTROLS
Description
A special extended-selection list box that displays collection of items
consisting of an icon and label
Contents can be displayed in four different views:
◦ Large Icon: Items appear as a full-sized icon with a label below
◦ Small Icon: Items appear as a small icon with label to the right
◦ List: Items appear as a small icon with label to the right
Arrayed in a columnar, sorted layout
◦ Report: Items appear as a line in a multicolumn format
Leftmost column includes icon and label
Subsequent columns include application-specific information
Purpose and Usage
Where representation of objects as icons is appropriate
To represent items with multiple columns of information
69. Step 7
DROP-DOWN/POP-UP LIST BOX
Description
A single rectangular control that shows one item with a small button
to the right side
◦ Button provides visual cue that an associated selection box is hidden
When the button is selected, a larger associated box appears,
containing a list of choices
Text may not be typed into the control
Purpose
To select one item from a large list of mutually exclusive options
when screen space is limited
70. Step 7
DROP-DOWN/POP-UP LIST BOX
Advantages
Unlimited number of choices
Reminds users of available options
Conserves screen space
Disadvantages
Requires an extra action to display list of choices
When displayed, all choices may not always be visible
The list may be ordered in an unpredictable way, making
it hard to find items
71. Step 7
DROP-DOWN/POP-UP LIST BOX
Proper Usage
For selecting values or setting attributes
For choices that are mutually exclusive
Where screen space is limited
For data and choices that are:
◦ Best represented textually
◦ Infrequently selected
◦ Not well know, easily learned, or remembered
◦ Ordered in a unpredictable fashion
◦ Large in number
◦ Variable or fixed in list length
Use drop-down/pop-up lists when:
◦ Screen space or layout considerations make radio buttons or single-
selection list boxes impractical
◦ The first, or displayed, item will be selected most of the time
◦ Do not use a drop-down list if it important that all options be seen
together
72. Step 7
DROP-DOWN/POP-UP LIST BOX
Significant Guidelines
Prompt Button
◦ Provide a visual cue, a button, that a box is hidden
Position the button to right directly against the selection field
Selection Descriptions
◦ Clearly and meaningfully describe the choices available
List Size
◦ Not limited in size
◦ Present all available alternatives
Box Size
◦ Long enough to display 6 to 8 choices without scrolling
◦ If more than 8, provide vertical scrolling to display all items
◦ Wide enough to display the longest possible choice
◦ When box cannot be made wide enough to display longest entry:
Make it wide enough to permit entries to be distinguishable, or
Break long entries with ellipses (...) in the middle
73. Step 7
COMBINATION
ENTRY/SELECTION CONTROLS
Possess the characteristics of both a text
field and a selection field
Information may either be keyed into the
field or selected and placed within it
Kinds:
◦ Spin boxes
◦ Attached combination boxes
◦ Drop-down/pop-up combination boxes
74. Step 7
SPIN BOXES
Description:
◦ A single-line field followed by two small, vertically arranged buttons
Top button has an arrow pointing up
Bottom button has an arrow pointing down
◦ Selection/entry is made by:
Using the mouse to point at one of the directional buttons and clicking. Items
will change by one unit or step with each click
Keying a value directly into the field itself
Purpose:
◦ To make a selection by either scrolling through a small set of meaningful
predefined choices or typing text
Advantages:
◦ Consumes little screen space
◦ Flexible, permitting selection or typed entry
Disadvantages:
◦ Difficult to compare choices
◦ Can be awkward to operate
◦ Useful only for certain kinds of data
75. Step 7
SPIN BOXES
Proper Usage:
◦ For setting attributes, properties, or values
◦ For mutually exclusive choices
◦ When the task requires the option of either key entry or selection
from a list
◦ When the user prefers the option of either key entry or selection
from a list
◦ Where screen space is limited
◦ Most useful for data and choices that are:
Discrete
Infrequently selected
Well known, easily learned and meaningful
Ordered in a predictable, customary, or consecutive fashion
Infrequently changed
Small in number
Fixed or variable in list length
76. Step 7
SPIN BOXES
Significant Guidelines
List Size
◦ Keep the list of items relatively short
◦ To reduce the size of potentially long lists, break the listing into
subcomponents, if possible
List Organization
◦ Order the list in the customary, consecutive, or expected order of the
information contained within it
Ensure that the user can always anticipate the next (not-yet-visible) choice
◦ Entry and selection methods:
Permit completion by:
Typing directly into the box
Scrolling/selecting with a mouse
Scrolling/selecting with the up/down keys
For alphabetical values:
Move down the order using down arrow
Move up the order using up arrow
For numeric values or magnitudes:
Show larger value using up arrow
Show smaller value using down arrow
77. Step 7
COMBO BOXES
Description
A single rectangular text box entry field, beneath which is a larger
rectangular list box displaying a list of options
The text box permits a choice to be keyed within it
The larger box contains a list of mutually exclusive choices from
which one may be selected for placement in the entry field
◦ Selections are made by using a mouse to point and click
As text is typed into the text box, the list scrolls to the nearest match
When an item in the list box is selected, it is placed into the text box,
replacing the existing content
Information keyed may not necessarily have to match the list items
Purpose
To allow either typed entry in a text box or selection from a list of
options in a permanently displayed list box attached to the text box
78. Step 7
COMBO BOXES
Advantages
Unlimited number of entries and choices
Reminds users of available options
Flexible, permitting selection or typed entry
Entries not necessarily restricted to items selectable from list box
List box always visible
Disadvantages
Consumes some screen space
All list box choices not always visible, requiring scrolling
Users may have difficulty recalling sufficient information to type
entry, making text box unusable
The list may be ordered in an unpredictable way, making it hard to
find items
79. Step 7
COMBO BOXES
Proper Usage
For entering or selecting objects or values or setting attributes
For information that is mutually exclusive
When users may find it practical to, or prefer to, type information
rather than selecting it from a list
When users can recall and type information faster than selecting it
from a list
When it is useful to provide the users a reminder of the choices
available
Where data must be entered that is not contained in the selection
list
Where screen space is available
For data and choices that are:
◦ Best represented textually
◦ Somewhat familiar or known
◦ Ordered in an unpredictable fashion
◦ Frequently changed
◦ Large in number
◦ Variable or fixed in list length
80. Step 7
DROP-DOWN / POP-UP
COMBO BOXES
Description
A single rectangular text box with a small button to the side and an
associated hidden list of options
◦ The button provides a visual cue that an associated selection box is
hidden
When requested, a larger associated rectangular box appears,
containing a scrollable list of choices from which one is selected
Selections are made by using the mouse
Information may also be keyed into the field
As text is typed into the text box, the list scrolls to the nearest match
When an item in the list box is selected, it is placed into the text box,
replacing the existing content
The information keyed does not necessarily have to match list items
Combines the capabilities of both a text box and a drop-down/pop-
up list box
81. Step 7
DROP-DOWN / POP-UP
COMBO BOXES
Purpose
To allow either typed entry or selection from a list box that may be closed
and retrieved as needed
Advantages
Unlimited number of entries and choices
Reminds users of available options
Flexible, permitting selection or typed entry
Entries not restricted to items selected from list box
Conserves screen space
Disadvantages
Requires an extra step to display the list of choices
When displayed, all box choices may not always be visible, requiring
scrolling
User may have difficulty in recalling what to type
List content may change making hard to find items
The list may be ordered in an unpredictable way, making it hard to find
items
82. Step 7
DROP-DOWN / POP-UP
COMBO BOXES
Proper Usage
For entering or selecting objects or values or setting attributes
For information that is mutually exclusive
When users may find it practical to, or prefer to, type information rather than
selecting it from a list
When users can recall and type information faster than selecting from a list
When it is useful to provide the users with an occasional reminder of the
choices available
Where data must be entered that is not contained in the selection list
Where screen space is limited
For data and choices that are:
◦ Best represented textually
◦ Somewhat familiar or known
◦ Ordered in an unpredictable fashion
◦ Frequently changed
◦ Large in number
◦ Variable or fixed in list length
83. Step 7
OTHER OPERABLE CONTROLS
Other Kinds of Controls
Slider
Tab
Date-picker
Tree view
Scroll bar
Media controls
84. Step 7
SLIDER
Description
A scale exhibiting degrees of a quality on a continuum
◦ A shaft or bar
◦ A range of values with appropriate labels
◦ An arm indicating relative setting through its location on the shaft
◦ Optionally, a:
Pair of buttons to permit incremental movement of the slider arm
Text box for typing or displaying a value
May be oriented vertically or horizontally
Selected by using the mouse to:
◦ Drag a slider across the scale until the desired value is reached
◦ Point at the buttons at one end of the scale and clicking to change the
value
◦ Keying a value in the text box
85. Step 7
SLIDER
Purpose
To make a setting when a continuous qualitative adjustment is
acceptable
When it is useful to see the current value relative to the range of
possible values
Advantages
Spatial representation of relative setting
Visually distinctive
Disadvantages
Not as precise as an alphanumeric indication
Consumes screen space
Usually more complex than other controls
86. Step 7
SLIDER
Proper Usage
To set an attribute
For mutually exclusive choices
When an object has a limited range of possible settings
When the range of values is continuous
When graduations are relatively fine
When the choices can increase or decrease in some well-known,
predictable, and easily understood way
When a spatial representation enhances comprehension
When using a slider provides sufficient accuracy
87. Step 7
SLIDER
Significant Guidelines
General
◦ Use standard sliders whenever available
Labels
◦ Provide meaningful and descriptive labels to aid in interpreting the scale
Scale
◦ Show a complete range of choices
◦ Mark the low, intermediate, and high ends of the scale
◦ Provide scale interval markings, where possible
◦ Provide consistent increments
◦ Permit the user to change the units of measure
◦ If the precise value of a quantity represented is important, display the
value set in an adjacent text box
Proportions
◦ To indicate the proportion of a value being displayed, fill the slider shaft
in some visually distinctive way
Fill horizontal sliders from left to right
Fill vertical sliders from bottom to top
88. Step 7
TABS
Description
A window containing tabbed dividers that create pages or sections
Navigation is permitted between pages or sections
Purpose
To present information that can be logically organized into pages or
sections within window
Advantages
Resembles their paper-based cousins
Visually distinctive
Effectively organize repetitive, related information
Disadvantages
Visually complex
Proper Usage
Present discrete, structured, related, information
Present setting choices to be applied to an object
When a short tab label can meaningfully describe the tab’s contents
When the order of information use varies
89. Step 7
TABS
Significant Guidelines
Sections and Pages
◦ Place related information within a page or section
◦ Order meaningfully
◦ Arrange pages so they appear to go deeper
Left to right and top to bottom
◦ Provide pages of equal size
Location, Size, and Labels
◦ Place the tabs at the top of the page or section
◦ Provide fixed-width tabs for related information
◦ Provide textual labels
◦ Center the labels within the tabs
◦ Restrict tabs to only one row
◦ Arrange tabs so that they appear to go deeper
Left to right and top to bottom
Command Buttons
◦ If they affect only a page or section, locate the buttons on the page or
section
◦ If they affect the entire tabbed control, locate the buttons outside the
tabbed pages
90. Step 7
DATE-PICKER
Description
A drop-down list box that displays a one month calendar
The displayed month can be changed through pressing
command buttons with left- and right-pointing arrows
◦ The left arrow moves backward through months
◦ The right arrow moves forward through months
A date for the list box can be selected from the drop-
down calendar
Purpose
To select a date for inscribing in a drop-down list box
91. Step 7
DATE-PICKER
Advantages
Provides a representation of a physical calendar
Calendar listing is ordered in a predictable way
Visually distinctive
Disadvantages
Requires an extra step to display the calendar
When displayed, all month choices are not visible,
requiring a form of scrolling to access choice
Proper Usage
To select and display a single date in close monthly
proximity to the default month presented on the drop-
down list box
92. Step 7
TREE VIEW
Description
A special list box control that displays a set of objects as
an indented outline, based on the objects’ logical
hierarchical relationship
Includes, optionally, buttons that expand and collapse the
outline
◦ Button inscribed with a plus sign expands outline
◦ Button inscribed with a minus sign collapses outline
Elements that can optionally be displayed are:
◦ Icons
◦ Graphics, such as a check box
◦ Lines to illustrate hierarchical relationships
Purpose and Proper Usage
To display a set of objects as an indented outline to
illustrate their logical hierarchical relationship
93. Step 7
SCROLL BARS
Description
An elongated rectangular container consisting of:
◦ Scroll area
◦ Slider box or elevator inside
◦ Arrows or anchors at either end
Available, if needed, in primary and secondary windows, some controls,
and Web pages
May be oriented vertically or horizontally at the window or page edge
Purpose
To find and view information that takes more space than the allotted
display space
Advantages
Permits viewing data of unlimited size
Disadvantages
Consumes screen space
Can be cumbersome to operate
Proper Usage
When more information is available than space
Do not use to set values
94. Step 7
SCROLL BARS
Significant Guidelines
Location
◦ Position a vertical scroll bar to right of window
◦ Position a horizontal scroll bar at bottom of window
Current State Indication
◦ Whenever the window’s size or the position of the information
changes, the scroll bar components must also change, reflecting
the current state
◦ Include scroll bars in all sizable windows
Scroll Bar Style
◦ Stick with standard, proven design styles
Directional Preference
◦ Use vertical (top-to-bottom) scrolling
◦ Avoid horizontal (left-to-right) scrolling
95. Step 7
MEDIA CONTROLS
Provide the following controls for all playable files:
Play
Pause/Resume
Stop
Rewind
Fast Forward
Volume
96. Step 7
CUSTOM CONTROLS
Implement custom controls with caution
If used, make the look and behavior of
custom controls different from that of
standard controls
97. Step 7
PRESENTATION CONTROLS
Informational
Provide details about other screen elements or controls
Assist in giving the screen structure
Kinds:
◦ Static text fields
◦ Group boxes
◦ Column headings
◦ ToolTips
◦ Balloon tips
◦ Progress indicators
◦ Sample box
◦ Scrolling tickers
98. Step 7
STATIC TEXT FIELDS
Description:
◦ Read-only textual information
Purpose:
◦ Identify a control by displaying a control caption
◦ Clarify a screen by providing instructional or prompting
information
◦ Present descriptive information
Proper Usage:
◦ Display a control caption
◦ Display instructional or prompting information
◦ Display descriptive information
99. Step 7
STATIC TEXT FIELDS
Guidelines
Captions
◦ Include a colon (:) as part of the caption
◦ When the associated control is disabled, display it dimmed
◦ Follow all other presented guidelines for captions, presentation
and layout
Instructional or prompting information
◦ Display in a unique and consistent font style for easy recognition
and differentiation
◦ Follow all other presented guidelines for prompting and
instructional information
Descriptive information
◦ Follow all other guidelines for required screen or control
descriptive information
100. Step 7
GROUP BOXES
Description:
◦ A rectangular frame that surrounds a control or group
of controls
◦ An optional caption may be included in the frame’s
upper-left corner
Purpose:
◦ Visually relate the elements of a control
◦ Visually relate a group of related controls
Proper Usage:
◦ Provide a border around radio button or check box
controls
◦ Provide a border around two or more functionally
related controls
101. Step 7
GROUP BOXES
Guidelines
Label or heading
◦ Typically, use a noun or noun phrase for the label or heading
◦ Provide a brief label or heading, preferably one or two words
◦ Relate label or heading’s content to the group box’s content
◦ Capitalize the first letter of each significant word
◦ Do not include and ending colon (:)
Follow all other guidelines presented for control and
section borders
102. Step 7
COLUMN HEADINGS
Description:
Read-only textual information that serves as a heading above columns of
text or numbers
Can be divided into two or more parts
Purpose:
Identify a column of information contained in a table
Proper Usage:
Display a heading above a column of information contained in a table
Guidelines:
Heading:
◦ Provide a brief heading
◦ Can include text and a graphic image
◦ Capitalize first letter of each significant word
◦ Do not include an ending colon (:)
The width of the column should fit the average size of the column entries
Does not support keyboard access
103. Step 7
TOOLTIPS
Description:
A small pop-up window containing descriptive text appearing when pointer
is moved over control or element:
◦ Not possessing a label
◦ Needing additional information
Purpose:
Provide descriptive information about a control or screen element
Advantages:
Identifies an otherwise unidentified control
Reduces possible screen clutter caused by control captions and descriptive
information
Enables control size to be reduced
Disadvantages:
Not obvious, must be discovered
Inadvertent appearance can be distracting
Proper Usage:
Identify a control that has no caption
Provide additional descriptive or status information about a screen element
104. Step 7
TOOLTIPS
Guidelines
Display after a short time-out
For toolbars, provide a brief word as a label
◦ Use mixed case in the headline style of presentation with no ending punctuation
For other elements, provide a brief phrase presenting descriptive or
status information
◦ Use mixed case in the sentence style of presentation
Present ToolTips at the lower-right edge of the pointer
◦ Display fully on the screen
◦ For text boxes, display ToolTips centered under the control
Display in the standard system ToolTip colors
Remove the ToolTip when the control is activated or the pointer is
moved away
Don’t substitute ToolTips for good design
105. Step 7
BALLOON TIPS
Description:
A small pop-up window containing information in a balloon
Components can include:
◦ Title
◦ Body text
◦ Message Icons
Appear adjacent to the item to which they apply
Only one tip, the last posted, is visible at any time
Tips are removed after a specified time period
Purpose:
To provide additional descriptive or status information
106. Step 7
BALLOON TIPS
Advantage:
Provides useful reminder and status information
Disadvantages:
If overused they lose their attention-getting value
If overused in situations considered not very important, their
continual appearance can be aggravating
Proper Usage
To display noncritical:
◦ Reminder information
◦ Notification information
Do not use tips to display critical information
107. Step 7
BALLOON TIPS
Guidelines
General:
• Use a notification tip to inform about state changes
• Use a reminder tip for state changes that the user might not usually
notice
• Point the tip of the balloon to the item it references
• Do not use to replace ToolTips
• Do not overuse balloon tips
Content:
◦ Restrict to a length of 100 characters
◦ Title text should be bold and:
If the tip refers to an icon or other image representing a specific object, include:
The object’s name, using its normal capitalization
The object’s status, using sentence-style presentation without ending punctuation
◦ Body text should:
Include brief description of situation
Include brief suggestion for correcting situation
Be presented using mixed-case sentence style
108. Step 7
PROGRESS INDICATORS
Description:
A rectangular bar that fills as a process is being performed,
indicating the percentage of the process that has been completed
Purpose:
To provide feedback concerning the completion of a lengthy
operation
Proper Usage:
To provide an indication of the proportion of a process completed
Guidelines:
When filling the indicator:
◦ If horizontally arrayed, fill from left to right
◦ If vertically arrayed, fill from bottom to top
Fill with a color or a shade of gray
Include descriptive text for the process, as necessary
Place text outside of the control
109. Step 7
SAMPLE BOX
Description:
A box illustrating what will show up on the screen based upon the
parameter or parameters selected
May include text, graphics, or both
Purpose:
To provide a representation of actual screen content based upon the
parameter or parameters selected
Guidelines:
Include a brief label
Use mixed case in the headline style
Locate adjacent to the control upon which it is dependent
110. Step 7
SCROLLING TICKERS
Description:
Text that scrolls horizontally through a container window
Advantage:
Consumes less screen space than full text
Disadvantages:
Hard to read
Time-consuming to interpret
Distracting
Guideline:
Do not use
111. Step 7
SELECTING THE PROPER CONTROLS
Choose familiar controls
Consider the task
Reduce the number of “clicks”
Display as many control choices as possible
Study:
◦ People tend to select from the options first presented
and seen
◦ Rarely effort made to find additional options by
scrolling
Couper at. al., 2004
112. Step 7
SELECTING THE PROPER CONTROLS
Entry Versus Selection
Choosing a Type of Control
◦ For familiar, meaningful data, choose the technique that, in
theory, requires the fewest number of keystrokes to complete
◦ If the data is unfamiliar or prone to typing errors, choose a
selection technique
Aided Versus Unaided Entry
◦ Provide aided entry whenever possible
Absorb any extra and unnecessary keystrokes
Provide an auditory signal that autocompletion has been performed
113. Step 7
SELECTING THE PROPER
CONTROLS
Comparison of GUI Controls
Direct Manipulation
1. Drag and drop on
2. Drag and drop between
Selection
3. Icons
4. Radio buttons
5. Menus (drop-down list boxes)
Entry
6. One entry area
7. Four entry areas
- Tullis and Kodimer (1992)
114. Step 7
SELECTING THE PROPER
CONTROLS
Fastest Methods
◦ Radio buttons
◦ One entry field
Preferred Methods:
◦ Radio buttons
◦ Drop-down list boxes
◦ One entry field
- Tullis and Kodimer (1992)
Selection decisions made according to
convention and intuition may not necessarily
yield the best results
- Tullis (1993)
115. Step 7
SELECTING THE PROPER CONTROLS
Comparison of GUI Controls
Check boxes
Drop-down list boxes
Drop-down combination boxes
Text boxes
List boxes
Radio buttons
Sliders
Spin boxes
- Johnsgard et al. (1995)
116. Step 7
SELECTING THE PROPER CONTROLS
Mutually Exclusive Choice Controls
◦ For a:
Small set of options (5)
Medium set (12)
Large set (30)
Radio buttons significantly faster
Nonexclusive Choice Controls
◦ For a:
Small set of options (5) with two selected choices
Medium set (12) with three selected choices
Large set (30) with eight selected choices
Check boxes significantly faster
Combination Selection and Entry Controls
◦ For:
Drop-down combination box
Radio buttons, with a text entry field
Radio buttons with text entry field fastest, most accurate, and preferred
- Johnsgard et al. (1995)
117. Step 7
SELECTING THE PROPER CONTROLS
Controls for Selecting a Value within a Range
Spin button
Text entry field
Slider
◦ Spin button most accurate
◦ Text entry field fastest and most preferred
Study General Conclusions
Making all options always visible will enhance performance
Requiring additional actions to make further options visible slows
performance
For longer lists, scrolling tends to degrade performance more than
the action associated with retrieving a hidden list
As set size increases, performance times increase more for controls
that require scrolling than for those that do not
- Johnsgard et al. (1995)
118. Step 7
SELECTING THE PROPER CONTROLS
Control Selection Criteria
Data Considerations
◦ Is the property or data mutually exclusive or nonexclusive?
◦ Is the property or data discrete or continuous?
◦ Is the property or data limited or unlimited in scope?
◦ Is the property or data fixed or variable in length?
◦ Is the property or data ordered in a predictable or unpredictable
fashion?
◦ Can the property or data be represented pictorially?
119. Step 7
SELECTING THE PROPER
CONTROLS
Control Selection Criteria (Continued)
Task Considerations:
◦ How often is an item entered or selected?
◦ How often is an item changed?
◦ How precisely must the item be entered or selected?
User Considerations:
◦ How much training in operation will be provided?
◦ How meaningful or known is the property or data to the user?
◦ How easily remembered or learned by the user is the property or
data?
◦ How frequently used will the system be?
◦ Is the user an experienced typist?
Display Considerations
◦ How much screen space is available to display the various
controls?
120. Step 7
SELECTING THE PROPER CONTROLS
Choosing A Control Form
When to Permit Text Entry
◦ Permit text entry if any of the following questions can be answered Yes:
Is the data unlimited in size and scope?
Is the data familiar?
Is the data not conducive to typing errors?
Will typing be faster than choice selection?
Is the user an experienced typist?
Choosing Between Buttons and Menus for Commands
◦ Considerations:
Whether or not the command part of a standard tool set
The total number of commands in the application
The complexity of the commands
The frequency with which commands are used
Whether or not the command is used in association with another control
121. Step 8
WRITE CLEAR TEXT AND
MESSAGES
Step 8 Overview
General
◦ The concept of readability
◦ Choosing the proper words
◦ Writing sentences and messages
◦ Kinds of messages
◦ Presenting and writing text
◦ Window title, conventions and sequence control
Web
◦ Presenting and writing page text
◦ Writing links and headings
◦ Writing instructions and error messages
122. Step 8
READABILITY
Readability is the degree to which prose can be
understood based upon the complexity of its
words and sentences
The measure derived is a reading level based
upon school grade level (first grade through
college)
The average reading level in North America is
the 8th - 9th grade level
About 1/5 of all adults read 5th grade level or
below
Adults tend to read one or two grades below last
school grade completed
123. Step 8
READABILITY
Guidelines
Write at a level below the reading skill of the
intended audience
Apply all other principles for clear writing and
text presentation
124. Step 8
WRITE CLEAR TEXT AND MESSAGES
Clear and meaningfully crafted words, messages, and
text lead to:
◦ Greatly enhanced system usability
◦ Minimize user confusion
Communications should provide information:
◦ Simply
◦ Clearly
◦ Politely
Design must take into account:
◦ The user’s experience and knowledge
◦ How much information is needed to interact
125. Step 8
CHOOSING THE PROPER WORDS
Do not use:
◦ Jargon
◦ Abbreviations or acronyms
◦ Word contractions, suffixes, and prefixes
Use:
◦ Short, familiar words
◦ Standard alphabetic characters
◦ Complete words
◦ Positive terms
◦ Simple action words; avoid noun strings
◦ The “more” dimension when comparing
◦ Consistent words
Do not:
◦ Stack words
◦ Hyphenate words
◦ Include punctuation for abbreviations, mnemonics, and acronyms
126. Step 8
WRITING SENTENCES & MESSAGES
Sentences and messages must be:
◦ Brief and simple
◦ No more than 20 words per sentence
◦ No more than 6 sentences per paragraph
◦ Directly and immediately usable
◦ An affirmative statement
◦ In an active voice
◦ In the temporal sequence of events
◦ Possess the main topic is near the beginning
◦ Of parallel construction
Sentences and messages must be of the proper tone:
◦ Nonauthoritarian
◦ Nonthreatening
◦ Nonanthropomorphic
◦ Nonpatronizing
◦ Nonpunishing
◦ Cautious in the use of humor
127. Step 8
KINDS OF MESSAGES
System Messages
◦ Generated by the system to keep the user informed of the
system’s current state and activities
◦ Customarily presented within message boxes
◦ System message types:
Status—Provides information concerning the progress of a lengthy
operation
Informational—Provides information about the state of the system
when it is not immediately obvious
Warning—Calls attention to a situation that may be undesirable
Critical—Calls attention to conditions that require a user action before
the system can proceed
Question—Asks a question and offers options
Instructional Messages
◦ Tell the user how to work with, or complete, the screen displayed
128. Step 8
MESSAGES
Writing Message Box Text
Title Bar:
◦ Clearly identify the source of the message
The name of the object to which it refers
The name of the application to which it refers
Do not include an indication of message type
Use mixed case in the headline style
Message Box:
◦ Provide a clear and concise description of the condition causing
the message box to be displayed
Use complete sentences with ending punctuation
State the problem, its probable cause (if known), and what the user
can do about it
Avoid contractions
129. Step 8
MESSAGES
Writing Message Box Text (Continued)
Avoid technical jargon and information
Provide only as much background information as necessary for the
message to be understood
Show only one message box about the cause of condition in a single
message
Make the solution an option offered in message
Avoid multistep solutions
Use consistent phrasing for similar situations
Use the word “please” conservatively
◦ Do not exceed two or three lines
◦ Include the relevant identifying icon to left of text
◦ Center the message text in window
130. Step 8
MESSAGES
Message Box Controls
Command Buttons:
◦ If a message requires no choices to be made but only acknowledgment,
include an OK button
◦ If a message requires a choice be made, provide a command button for
each option:
Include OK and Cancel buttons only when the user has the option of continuing
or stopping
Include Yes and No buttons when the user must decide how to continue
If these choices are too ambiguous, label the buttons with the names of specific
actions
◦ If a message allows initiation of an action to correct the situation
described, include a properly labeled button initiating the corrective
action
◦ If a message describes an interrupted process whose state cannot be
restored, provide a Stop button
131. Step 8
MESSAGES
Message Box Controls (Continued)
If a message offers an opportunity to cancel a process as well as to
perform or not perform an action, provide a Cancel button
If more details about a message topic are needed, provide a Help
button
Designate the most frequent or least destructive option as the
default
Display a message box only when the window of an application is
active
Display only one message box for a specific condition
Close box:
◦ Enable the title bar Close box only if the message includes a Cancel
button
132. Step 8
MESSAGES
Message Location
Use the message line for messages that must not
interfere with screen information
Pop-up windows may be used for all kinds of messages,
if available
Pop-up windows should always be used for critical
messages
Other Message Considerations
Abbreviated, more concise versions of messages should
be available
Something that must be remembered should be at the
beginning of the text
Do not include code numbers with messages
133. Step 8
MESSAGES
Instructional Messages
Provide instructional information at the depth of
detail needed by the user
Locate at strategic positions on the screen
Display in a manner that visually differentiates it
from other screen elements
In writing, follow all relevant writing guidelines
for words, sentences, and messages
134. Step 8
TEXT
Presenting Text
Display prose text in mixed letters
Fonts:
◦ Use plain and simple fonts
◦ Choose a minimum point size of 12 to 14
◦ Use proportional fonts
Alignment:
◦ Left-align
◦ Do not right-align
◦ Do not hyphenate words
Line length:
◦ If fast reading required: 75-100 characters
◦ If user preference important: 50 60 characters
◦ Avoid very narrow columns
135. Step 8
TEXT
Presenting Text (Continued)
Line Endings:
◦ Coincide with grammatical boundaries
Line Spacing:
◦ Increase spacing to enhance legibility, readability
Content:
◦ Increase spacing ro enhance legibility, readability
◦ Use headings to introduce a new topic
◦ Separate paragraphs by at least one blank line
◦ Start a fresh topic on a new page
◦ Use lists to present facts
◦ Emphasize important things by:
Positioning, Boxes
Bold typefaces, Indented margins
◦ Provide design philosophy consistent with other parts of the
system
136. Step 8
TEXT
Writing Text
Sentences and paragraphs:
◦ Use short sentences composed of familiar, personal words
Cut excess words
Keep number of words in any sentence to 20 or less
◦ Cut the number of sentences
◦ Use separate sentences for separate ideas
◦ Keep the paragraphs short
◦ Restrict a paragraph to only one idea
Style:
◦ Use the active writing style
◦ Use the personal writing style, if appropriate
◦ Write as you talk
◦ Use subjective opinion
◦ Use specific examples
◦ Read out loud
137. Step 8
TEXT
Window Title
All windows must have a title located in a
centered position at the top
◦ Exception: Windows containing messages
Clearly and concisely describe the purpose of
the window
Spell out fully using an uppercase or mixed-case
font
If title truncation necessary, truncate it from right
to left
If presented above a menu bar, display with a
background that contrasts with the bar
138. Step 8
TEXT
Conventions
Establish conventions for referring to:
◦ Individual keyboard keys
◦ Keys to be pressed at the same time
◦ Field captions
◦ Names supplied by users or defined by the system
◦ Commands and actions
139. Step 8
TEXT
Sequence Control Guidance
Consider providing a guidance message telling
how to continue at points in the dialog when:
◦ A decision must be made
◦ A response needs to be made to continue
Consider indicating what control options exist at
points in the dialog where several alternatives
may be available
Permit these prompts to be turned on or off by
the user
140. Step 8
WEB CONTENT AND TEXT
Words
Minimize words calling attention to Web
Presentation
Provide text that contrasts highly with the background
Writing
Style:
◦ Use a style reflecting the needs of the site users
◦ Write objectively
◦ Use the inverted pyramid organization
◦ Be concise, using only about half the number of words of
conventional text
◦ Each paragraph should:
Be short
Contain only one main idea
141. Step 8
WEB CONTENT AND TEXT
Writing (Continued)
Links:
◦ Minimize within-text links
◦ Place at beginning or end of paragraphs or sections of text
Scanning:
◦ Make text scannable by using:
Bulleted listings
Tables
Headings and subheadings
Highlighed and emphasized important issues
Short paragraphs
International Audiences:
◦ Consider internationalization needs
Testing:
◦ Test for legibility and readability
142. Step 8
WEB CONTENT AND TEXT
Writing Link Labels
Create meaningful labels:
◦ Descriptive, differentiable
◦ Predictive, Active wording
◦ Keyword at beginning
◦ Concise
◦ Clearly indication destination or action
◦ Names that match destination page
Integrate embedded links smoothly into text
Insure embedded links descriptive
◦ Make only a few words the active link
◦ Do not spread links over two lines
Standalone links should not exceed one sentence in
length
Provide glosses or labels for understanding
143. Step 8
WEB CONTENT AND TEXT
Link Titles
Provide link titles that describe:
◦ The name of site the link will lead to, if different from current site
◦ The name of subsection the link leads to, if staying within current
site
◦ The kind of information to be found at the destination
◦ How the linked information relates to the anchor link and the
current page content
◦ How large the linked information is
◦ Warnings about possible problems to be encountered at the other
end
Restrict to no more than 60 characters
144. Step 8
WEB CONTENT AND TEXT
Page Title
Provide a page title:
◦ That possesses meaningful keywords
◦ Whose first word is its most important descriptor
◦ That makes sense when viewed completely out of context
◦ That is different from other page titles
◦ Is written in mixed case using the headline style
Do not highlight keywords
Headings and Headlines
Create meaningful headings and headlines that quickly
communicate the content of what follows
◦ Make the first word an important information-carrying one
◦ Skip leading articles (the and a)
Create meaningful subheadings to break up large blocks of text
145. Step 8
WEB CONTENT AND TEXT
Instructions
Do not use phrasing that indicates a certain page order or flow
Explain where “Up” leads too
Phrase in a browser-independent manner
Minimize “Click here” instructions
◦ Say “Select this link”
Error Messages
Provide helpful and precise error messages for:
◦ Incomplete or incorrectly keyed, entered, or selected data
◦ Requests for documents that do not exist or cannot be found
Redisplay a message on the page to which it relates
Present in a visually distinctive and noticeable manner
146. Step 9
PROVIDE FEEDBACK, GUIDANCE
AND ASSISTANCE
Step 9 Overview
Feedback
◦ Acceptable response times
◦ Dealing with time delays
◦ Blinking for attention
◦ The use of sound
Guidance and Assistance
◦ Preventing errors and problem management
◦ Types of guidance and assistance:
Instructions or prompting
Help facility
Contextual Help
Task-oriented Help
Reference Help
Wizards
Hints or tips
147. Step 9
PROVIDING FEEDBACK
Response Time
System responsiveness should match the speed and flow of human
thought processes
◦ Less than 1-2 seconds: If continuity of thinking is required and
information must be remembered through several responses
◦ 2 to 4 seconds: If human task closures exist, high levels of
concentration are not necessary, and moderate short-term memory
requirements are imposed
◦ Within 4-15 seconds: Acceptable if major task closures exist, minimal
short-term memory requirements are imposed:
◦ More than 15 seconds: Acceptable when the user is free to do other
things and return when convenient:
Constant are preferable to variable delays
148. Step 9
PROVIDING FEEDBACK
Response Time Study Conclusions
The optimum is dependent upon the task
Satisfaction is a function of expectations
Dissatisfaction is a function of one’s uncertainty about
delay
People will change work habits to conform to response
time
Constant delays are preferable to variable delays
More experienced people prefer shorter response times
Very fast or slow response times can lead to symptoms
of stress
149. Step 9
PROVIDING FEEDBACK
Web Response Time Study Conclusions
Bouch, Kuchinsky, and Bhatti (2000)
◦ High (Good): Up to 5 seconds
◦ Average: From 6 to 10 seconds
◦ Low (Poor): Over 10 seconds
Longer delay times are tolerated by:
◦ Novice users
◦ Older users
◦ People not experienced with high bandwidth connections
◦ New visitors to a site
◦ People performing important tasks
◦ People performing successful tasks
◦ Better content
150. Step 9
PROVIDING FEEDBACK
Web Response Time Study Conclusions
Perceived delays in presentation causes sites to
be evaluated as:
◦ Less interesting
◦ Possessing lower quality content
◦ Interfering with task continuity and flow
◦ Less remerable
◦ Less secure
Exceeding slow sites can lead people to believe
they made an error
151. Step 9
PROVIDING FEEDBACK
Web Response Time Study Conclusions
(Continued)
In general studies seem to indicate that:
◦ The same factors affecting optimum computer
response times in general also operate in the world of
the Web
◦ Longer downloading times may be more readily
accepted due to the graphical nature of the Web’s
content
◦ Other factors have influences as well:
User age
Page content quality
Success in task performance
Differing user expectancies
152. Step 9
PROVIDING FEEDBACK
Page Downloading
Maximum downloading time should be about 10
seconds
◦ Use incremental or progressive image presentation
Images should be:
◦ Small
◦ Lean
◦ Reusable
◦ Contain pixel height/width dimensions in tag
Use thumbnail images to preview larger images
Use simple background images
153. Step 9
PROVIDING FEEDBACK
Dealing with Time Delays
Button click acknowledgement:
◦ Acknowledge all button clicks by visual or aural feedback within
one-tenth of a second
Waits up to 10 seconds:
◦ If an operation takes 10 seconds or less to complete, present a
“busy” signal until the operation is complete
Display, for example, an animated hourglass pointer
Waits of 10 seconds to 1 minute:
◦ If an operation takes longer than 10 seconds to complete, display:
A rolling barber’s pole or other large animated object
Additionally, a progress indicator, percent complete message, or
elapsed time message
154. Step 9
PROVIDING FEEDBACK
Dealing with Time Delays (Continued)
Waits of more than 1 minute:
◦ Present an estimate of the length of the wait
◦ Display a progress indicator, percent complete message, or
elapsed time message
◦ Acknowledge when a long operation is completed:
A significantly changed screen appearance
An auditory tone
If an operation is very time-consuming:
◦ Consider breaking the operation into subtasks and providing
progress indicators for subtasks
◦ Allow users to start a new activity while waiting
Long, invisible operations:
◦ When an operation not visible to the user is completed, present
acknowledgment it is done
A message
An auditory tone
155. Step 9
PROVIDING FEEDBACK
Dealing with Time Delays (Continued)
Progress indicator:
◦ A long rectangular bar that is filled as the operation proceeds
Dynamically fill the bar with a color or shade of gray
Fill it from left to right or bottom to top
Percent complete message:
◦ A message that indicates the percent of the operation that is
complete
◦ Useful if a progress indicator takes too long to update
Elapsed time message:
◦ A message that shows the amount of elapsed time that the
operation is consuming
◦ Useful if:
The length of the operation is not known
A particular part of the operation will take an unusually long time to
complete
156. Step 9
PROVIDING FEEDBACK
Web Page Downloads
For pages requiring download times greater
than five seconds give the user something to do
while waiting
Quickly present at top of downloading page
◦ Image
◦ Text
◦ Links
Advise of long download times
Warn of “time outs”
157. Step 9
PROVIDING FEEDBACK
Blinking for Attention
Attract attention by flashing an indicator when an
application is inactive but must display a message to the
user
◦ If a window, flash the title bar
◦ If minimized, flash its icon
To provide an additional message indication, provide an
auditory signal (one or two beeps)
◦ Very useful if:
The window or icon is hidden
The user’s attention is frequently directed away from the screen
Display the message:
◦ When the application is activated
◦ When requested by the user
158. Step 9
PROVIDING FEEDBACK
Use of Sound
Always use in conjunction with a visual indication
Use no more than six different tones
◦ Ensure that people can discriminate among them
Do not use:
◦ Jingles or tunes
◦ Loud signals
Use tones consistently
◦ Provide unique but similar tones for similar situations
Provide signal frequencies between 500 and 1,000 Hz
Allow the user to adjust the volume or turn the sound off altogether
Test the sounds with users over extended trial periods
159. Step 9
PROVIDING FEEDBACK
Use of Sound (Continued)
Use sounds sparingly because they:
◦ Are annoying to many people, including other users and nonusers in the
vicinity
◦ Can easily be overused, increasing the possibility that they will be
ignored
◦ Are not reliable because:
Some people are hard of hearing
If they are not heard, they leave no permanent record of having occurred
The user can turn them off
Sounds, sometimes called Earcons, are useful for alerting the user:
◦ To minor and obvious mistakes
◦ When something unexpected happens
◦ Where visual attention is directed away from the screen and immediate
attention is required
◦ When a long process is finished
160. Step 9
GUIDANCE AND ASSISTANCE
Preventing Errors
People make errors
Errors must be properly managed
Types of errors
Slip
◦ Automatic behavior gone awry
Mistake
◦ Results from forming a wrong mental model or goal
and then acting upon it
161. Step 9
GUIDANCE AND ASSISTANCE
Problem Management
Prevention of Errors
◦ Disable inapplicable choices
◦ Use selection instead of entry controls
◦ Use aided entry
◦ Accept common misspellings, whenever possible
◦ Before an action is performed:
Permit it to be reviewed
Permit it to be changed or undone
◦ Provide a common action mechanism
◦ Force confirmation of destructive actions
Let expert users disable
◦ Provide an automatic and continuous Save function
162. Step 9
GUIDANCE AND ASSISTANCE
Problem Management (Continued)
Detection of Errors
◦ For conversational dialogs, validate entries as close to point of
entry as possible
At character level
At control level
When transaction is completed or window closed
◦ For high-speed, head-down data entry
When transaction is completed or window closed
◦ Leave window open
◦ Maintain the item in error on the screen
◦ Visually highlight the item in error
◦ Display an error message in a window
Do not obscure item in error
◦ Handle errors as gracefully as possible
The greater the error, more dramatic the warning
◦ Use auditory signals conservatively
163. Step 9
GUIDANCE AND ASSISTANCE
Problem Management (Continued)
Correction of Errors
◦ Preserve as much of the user’s work as possible
◦ At window-level validation, use a modeless dialog box to display
error list
Highlight first error in the list
Place cursor at first control with error
Permit fixing one error and continuing to next error
◦ Always give user something to do when error occurs
Something to enter/save/reverse
A Help button
Someone to call
◦ Provide a constructive correction message saying:
What problem was detected
Which items are in error
What corrective action is necessary
◦ Initiate a clarification dialog if necessary
164. Step 9
GUIDANCE AND ASSISTANCE
Providing Guidance and Assistance
Useful guidance and assistance answers the
following questions:
◦ What is this?
◦ What does it do?
◦ How do I make it do it?
◦ What is its role in the overall scheme of things?
165. Step 9
GUIDANCE AND ASSISTANCE
Problems with Documentation
Organizational factors
Time scale
Theoretical rationale
Resources
166. Step 9
HELP FACILITY
Objective
Assist people in remembering what to do
Benefits
Improving the usability of a system
Providing insurance against design flaws
Accommodating user differences
◦ Novice and expert
167. Step 9
HELP FACILITY
Guidelines
Kind:
◦ Collect data to determine what types of help are
needed
Training:
◦ Inform users of availability and purpose of Help
Availability:
◦ Provide availability throughout the dialog
◦ If no help is available for a specific situation:
Inform user
Provide directions to where relevant help may exist
168. Step 9
HELP FACILITY
Guidelines (Continued)
Structure:
◦ Make as specific as possible
◦ Provide a hierarchical framework
Brief operational definitions and input rules
Summary explanations in text
Typical task-oriented examples
Interaction:
◦ Provide easy accessibility
◦ Leave the Help displayed until:
The user exits
The action eliminating the need for help is performed
◦ Provide instructions for exiting
◦ Return to original position in dialog when Help
completed
169. Step 9
HELP FACILITY
Guidelines (Continued)
Location:
◦ Minimize obscuring screen content
◦ If in a window, position priorities are right, left, above,
and below
Content:
◦ Define unfamiliar terms
◦ Minimize the Help’s length
◦ Develop modular dialogs that can be used to describe
similar and dissimilar procedural elements of the
interface
◦ Provide step-by-step interface procedures to assist the
user with specific problems
◦ Provide procedural demonstrations of interface
procedures to aid quick learning of simple operations
170. Step 9
HELP FACILITY
Help Facility Guidelines (Continued)
Content (Continued):
◦ Provide information to help users select between
multiple interface methods
◦ Provide users with an understanding of representative
tasks to increase their knowledge of when to apply
specific skills
Style
◦ Provide easy browsing and a distinctive format
Contents screens and indexes
Screen headings and subheadings
Location indicators
Descriptive words in margin
Visual differentiation of screen components
Emphasized critical information
171. Step 9
HELP FACILITY
Help Facility Guidelines (Continued)
Style (Continued):
◦ Use concise, familiar, action-oriented wording
◦ Refer to other materials, when necessary
◦ Never use Help to compensate for poor design
Consistency:
◦ Provide a design philosophy consistent with other
parts of the system
Title:
◦ Place the word “Help” in all screen titles
172. Step 9
CONTEXTUAL HELP
Help Command Button
Description:
◦ A command button
Purpose:
◦ To provide an overview of, summary assistance for, or
explanatory information about the purpose or contents
of a window being displayed
Design Guideline:
◦ Present the Help button in a secondary window or
dialog box
173. Step 9
CONTEXTUAL HELP
Status Bar Message
Description:
◦ An abbreviated, context-sensitive message related to the screen
item with the focus
◦ Appears in window’s status bar when primary mouse button
pressed over an item (or KB focus)
Purpose:
◦ To provide explanatory information about the object with the focus
◦ Use to:
Describe the use of a control, menu item, button, or toolbar
Provide context of activity within a window
Present progress indicator or feedback when the view of a window
must not be obscured
◦ Do not use for information or access to functions essential to
basic system operations unless another form of Help is provided
in system
◦ If extended Help is available and must be presented, place “Press
F1 for Help” in bar
174. Step 9
CONTEXTUAL HELP
Status Bar Message (Continued)
Writing Guidelines:
◦ Be constructive, not simply descriptive
◦ Be brief, but not cryptic
◦ Begin with a verb in the present tense
◦ If a command has multiple functions, summarize them
◦ If a command is disabled, explain why
175. Step 9
CONTEXTUAL HELP
ToolTip
Description:
◦ A small pop-up window that appears adjacent to
control
◦ Presented when the pointer remains over a control a
short period of time
Purpose:
◦ Use to display the name of a control when the control
has no text label
Design Guideline:
◦ Make application-specific ToolTips consistent with
system-supplied ToolTips
176. Step 9
CONTEXTUAL HELP
What’s This? Command
Description:
◦ A command located on the Help drop-down menu on a primary window
◦ A button on the title bar of a secondary window
◦ A command on a pop-up menu for a specific object
◦ A button on a toolbar
Purpose:
◦ To provide contextual information about object
Design Guidelines:
◦ Phrase to answer the question “What is this?”
◦ Indicate the action associated with the item
◦ Begin the description with a verb
◦ Include “why,” if helpful
◦ Include “how to,” if task requires multiple steps
◦ For command buttons, use an imperative form: “Click this to.…”
177. Step 9
TASK-ORIENTED HELP
Description
A primary window typically accessed through the Help
Topics browser
Includes a set of command buttons at top; at minimum:
◦ Button to display the Help Topics browser dialog box
◦ Back button to return to the previous topic
◦ Buttons that provide access to other functions such as Copy or
Print
Purpose
To describe the procedural steps for carrying out a task
Focuses on how to do something
178. Step 9
TASK-ORIENTED HELP
Design Guidelines:
Provide one procedure to complete a task, the simplest and most
common
Provide an explanation of the task’s goals and organizational
structure at the start
Divide procedural instructions into small steps
Present each step in the order to be executed
Label each step
Explicitly state information necessary to complete each step
Provide visuals that accurately depict the steps
Accompany visuals with some form of written or spoken instructions
Begin any spoken instructions simultaneously with or slightly after a
visual is presented
Segment any animation to focus attention on specific parts
Delay the opportunity to perform the procedure until all the
procedure’s steps have been illustrated
179. Step 9
TASK-ORIENTED HELP
Presentation Guidelines
The window should consume a minimum amount of screen space,
but be large enough to present the information without scrolling
Normally, do not exceed four steps per window
Use a different window color to distinguish task-oriented Help
windows from other windows
Writing Guidelines
Write simply and clearly, following all previously presented
guidelines
Focus on how information, rather than what or why
Do not include introductory, conceptual, or reference material
Limit steps to four or fewer to avoid scrolling or multiple windows
If a control is referred to by its label, bold the label to set it off
Include the topic title as part of the body
180. Step 9
REFERENCE HELP
Description
An online reference book
Typically accessed through a:
◦ Command in a Help drop-down menu
◦ Toolbar button
Purpose
To present reference Help information, either:
◦ Reference oriented
◦ User guide oriented
181. Step 9
REFERENCE HELP
Design Guidelines
Provide a consistent presentation style, following all previously
presented guidelines
Include a combination of contextual Help, and task-oriented Help,
as necessary
Include text, graphics, animation, video, and audio effects, as
necessary
Make displayed toolbar buttons contextual to the topic being viewed
Provide jumps, a button or interactive area that triggers an event
when it is selected, such as:
◦ Moving from one topic to another
◦ Displaying a pop-up window
◦ Carrying out a command
Visually distinguish a jump by:
◦ Displaying it as a button
◦ Using a distinguishing color or font to identify
◦ Changing the pointer image when it is over it
182. Step 9
REFERENCE HELP
Presentation Guideline
Provide a nonscrolling region for long topics to
keep the topic title and other key information
visible
Writing Guidelines
Write simply and clearly, following all previously
presented guidelines
Provide meaningful topic titles
183. Step 9
WIZARDS
Description
A series of presentation pages displayed in a secondary window
Include:
◦ Controls to collect input
◦ Navigation command buttons
Typically accessed through:
◦ Toolbar buttons
◦ Icons
Purpose
To perform a complex series of steps
To perform a task that requires making several critical decisions
To enter critical data and for use when the cost of errors is high
To perform an infrequently accomplished task
The necessary knowledge or experience to perform a task is lacking
Not suited to teaching how to do something
184. Step 9
WIZARDS
Design Guidelines
Provide a greater number of simple screens with fewer
choices
◦ Rather than a smaller number of complex screens with too many
options or much text
Provide screens of the exact same size
Include on the first page:
◦ A graphic on the left side to establish a reference point or theme
◦ A welcoming paragraph on the right side to explain what the
wizard does
Include on subsequent pages:
◦ A graphic for consistency
◦ Instructional text
◦ Controls for user input
Maintain consistent the locations for all elements
Make it visually clear that the graphic is not interactive
◦ Vary from normal size or render as abstract
185. Step 9
WIZARDS
Design Guidelines (Continued)
Include default values or settings for all controls when
possible
For frequently used wizards, place a check box with the
text “Do not show this Welcome page again” at the
bottom of the Welcome page
Include a Finish button at the point where the task can
be completed
Do not require the user to leave a wizard to complete a
task
Make sure the design alternatives offered yield positive
results
Make certain it is obvious how to proceed when the
wizard has completed its process
186. Step 9
WIZARDS
Presentation Guidelines
Display the wizard window so it is immediately recognized as the
primary point of input
Present a single window at one time
Do not advance pages automatically
Writing Guidelines
Clearly identify the wizard’s purpose in title bar
At the top right of the wizard window, title the Welcome page:
“Welcome to the Wizard Name Wizard”
◦ Use mixed case in headline style and no ending punctuation
Write simply, concisely, and clearly, following all previously
presented guidelines
Use a conversational rather than instructional style
Use words like “you” and “your”
Start most questions with phrases like:
◦ “Which option do you want...”
◦ “Would you like...”
187. Step 9
HINTS OR TIPS
Description
A command button labeled Hints or Tips
Purpose
To provide a few important contextual, but
specific, items of information related to a
displayed screen
Design Guidelines
Provide guidance on only two or three important
points
Locate the button near where its guidance
applies
Write concisely and to the point
Editor's Notes
A control must also be presented in a standard and consistent manner, and used exactly as its design intended.
The nonstandard design use of controls destroys consistency and aggravates and frustrates users, who have developed expectations based upon their past experiences.
Using standard controls allows people to focus on their tasks or
the content of the screens with which they are interacting, instead of having to figure out what to do.