SCREEN BASED CONTROLS

 Screen-based controls, simply called controls and sometimes

called widgets, are the elements of a screen that constitute its
body.
 They are graphic objects that represent the properties or
operations of other objects. 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.
 Three extremely important principles
regarding controls should be noted:
 A control must:

 Look the way it works.

 Work the way it looks.
 A control must be used exactly as its design intended.

 A control must be presented in a standard manner.

 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.
 Classes include buttons, text entry/read-only, selection,
combination entry/selection, and other specialized controls.
 BUTTONS
Description:
— A square or rectangular-shaped control with a label inside
that indicates action to be accomplished.
— The label may consist of text, graphics, or both.
■ Purpose:

Thaseen B JNNCE
— To start actions.
— To change properties.
— To display a pop-up menu.
■ Advantages:
— Always visible, reminding one of the choices available.
— Convenient.
— Can be logically organized in the work area.
—Can provide meaningful descriptions of the actions that will be
performed.
— Larger size generally provides faster selection target.
— Can possess 3-D appearance
 Command buttons

Toolbar buttons without labels

 • Adds an aesthetically pleasing style to the screen.
• 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 the number that may be displayed.
— Requires looking away from main working area to
activate.
— Requires moving the pointer to select.
■ 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.
 COMMAND BUTTONS

Command button guidelines include the following.

 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.
 Provide a rectangular shape with the label inscribed
within it.
■ Give the button a raised appearance.
■ Maintain consistency in style throughout an
application.
Labels:
■ Use standard button labels when available.
■ Provide meaningful descriptions of the actions that will
be performed.
■ Use single-word labels whenever possible.
— Use two-three words for clarity, if necessary.
■ Use mixed-case letters with the 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, leaving
at
least two pixels between the text and the button border.
■ Provide consistency in button labeling across all screens.
Size:
■ Provide as large a button as feasible.
■ Maintain consistent button heights and widths.
Number:
■ Restrict the number of buttons on a window to six or fewer.
Improper and proper button sizes.
Organization
■ Organize standard buttons in the manner recommended by the
platform being used.
■ For other buttons, organize them in common
and customary grouping schemes.

Thaseen B JNNCE
— 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.
Button with contingent relationship to a
grouping.
Intent Indicators:
■ When a button causes an action to be immediately
performed, no intent indicator is necessary.
■ When a button leads to a cascading dialog, include
an ellipsis (...) after the label.

■ 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
that must be indicated, include a single arrow (->) pointing at
the control.

Expansion Buttons
■ Gray them 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.
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.
■ Procedures:
— The default can be changed as the
user
interacts with the window.
—When the user navigates to a button, it
can temporarily become the default.
Unavailable Choices:
■ Temporarily unavailable choices should be dimmed
or grayed out.
Keyboard Equivalents and Accelerators:
■ 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 it.
—Maintain the same mnemonic on all identical
buttons on other screens.
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.
—If a button can be pressed continuously, permit the user to
hold the mouse button down and repeat the action.
TEXT ENTRY/READ-ONLY CONTROLS
 A Text Entry/Read-Only control contains text that
is
exclusively entered or modified through the keyboard.
 It may also contain entered text being presented for reading or
display purposes only.
Text Boxes
■ Description:
— A control, 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.
■ Advantages:
— Very flexible.
— Familiar.
— Consumes little screen space.
■ Disadvantages:
— Requires use of typewriter 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.
Single-Line and Multiple-Line Text Boxes
 Single line:

— Description:
• A control consisting of no more than one line of
text.
— Purpose:
•To make textual entries when the information can be
contained within one line of the screen.
— Typical uses:
• Typing the name of a file to save.
• Typing the path of a file to copy.
• Typing variable data on a form.
• Typing a command.
■ Multiple line:
— Description:
• A control consisting of a multiline rectangular box for
multiple lines of text.
— Purpose:
• To type, edit, and read passages of text.
— Typical uses:
• Creating or reading an electronic mail message.
• Displaying and editing text files.
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.
 SELECTION CONTROLS
 A selection control presents on the screen all the possible
alternatives, conditions, or choices that may exist for an entity,
property or value.
 The relevant item or items are selected from those displayed.

 Some selection controls present all the alternatives together,

visibly on a screen; others may require an action to retrieve the
entire listing and/ or scrolling to view all the alternatives.
 Selection controls include radio buttons, check boxes, list
boxes, drop-down/pop-up list boxes, and palettes.
 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 (2to8).
■ Advantages:
— Easy-to-access choices.
— Easy-to-compare choices.
— Preferred by users.
■ Disadvantages:
— Consume screen space.
— Limited number of choices.
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 to one another.
• Never changed in content.
Do not use:
• For commands.
• Singly to indicate the presence or absence of a state.
Choice Descriptions
 Provide meaningful, fully spelled-out choice descriptions
clearly describing the values or effects set by the radio
buttons.
 Display in a single line of text.

 Display using mixed-case letters, using the sentence

style.
 Position

descripti
ons
to
the
right
of
the

button.
Separate
them by at
least one
space
from the
Defaults
 When the control possesses a state or affect 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.
 When the control includes choices whose states cannot be
predetermined, display all the buttons without setting a dot, or
in the indeterminate state.
 When a multiple selection includes choices whose states vary,
display the buttons in another unique manner, or in the mixed
value state.
Structure
 A columnar orientation is the preferred manner
of presentation.
 Left-align the buttons and choice descriptions.

 If vertical space on the screen is limited, orient

the
buttons horizontally.
 Provide adequate separation between choices so that the
buttons are associated with the proper description.
— A distance equal to three spaces is usually sufficient.
 Enclose the buttons in a border to visually strengthen the
relationship they possess.
 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 the square box, or the box is
highlighted in some other manner.
• Otherwise the square box is unselected or empty (off).
— 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.
■ Disadvantages:
— Consume screen space.
— Limited number of choices.
— Single check boxes difficult to align with
other screen controls.
Choice Descriptions
■ Provide meaningful, fully spelled-out choice descriptions
clearly describing the values or effects set by the check boxes.
■ Display them in a single line of text.
■ Display them using mixed-case letters in sentence
style.
■ Position descriptions to the right of the check
box.
Separate by at least one space from the box.
■ When a choice is unavailable for selection under a certain
condition, display the choice description visually dimmed.
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.
■ When a multiple selection includes choices whose states
vary, display the buttons in another unique manner, or the
mixed value state.
Structure
■ Provide groupings of related check boxes.
■ A columnar orientation is the preferred manner of
presentation for multiple related check boxes.
■ Left-align the check boxes and choice descriptions.
■ If vertical space on the screen is limited, orient the boxes
horizontally.
■ Provide adequate separation between boxes so that the
buttons are associated with the proper description.
— A distance equal to three spaces is usually sufficient.
■ Enclose the boxes in a border to visually strengthen
the relationship they possess.
 PALETTES
Description:
— A control consisting of a series 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 equivalents.
■ 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.
■ 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.
• Frequently selected.
• Limited in number.
• Variable in number.
Captions
■ Provide a caption for each palette.
— On screens containing only one palette, the screen
title may serve as the caption.
■ Display the caption fully spelled out using mixed-case
letters.
■ Columnar orientation:
— The field caption may be positioned left-
aligned
above the palette.

— Alternately, the caption may be positioned to the

left of the topmost alternative.
LIST BOXES
■ Description:
— A permanently displayed box-shaped
control
containing a list of attributes or objects from which:
• A single selection is made (mutually exclusive), or
• Multiple selections are made (non-
mutually-
exclusive).
— The choice may be text, pictorial representations,
or
graphics.
— Selections are made by using a mouse to point
and
click.
— Capable of being scrolled to view large lists of choices.
— No text entry field exists in which to type text.
—A list box may be may be associated with a summary list box
control, which allows 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.
■ Advantages:

Thaseen B JNNCE
— 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 it hard to find items.
— The list may be ordered in an unpredictable way, making
it hard to find items.
■ Proper usage:
— For selecting values or setting attributes.
— For choices that are:
• Mutually exclusive (only one can be selected).
• Non-mutually-exclusive (one or more may
be selected).
List Box General Guidelines
Selection Descriptions
■ Clearly and meaningfully describe the
choices available. Spell them out as fully as possible.
— Graphical representations must clearly
represent

Thaseen B JNNCE
the options.
■ Present in mixed case, using the sentence
style
structure.
■ Left-align into columns.
List Size
■ Not 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.
Box Size
■ Must be long enough to display 6 to 8
choices without requiring scrolling.
— Exceptions:
• If screen space constraints exist, the box may be
reduced in size to display at least three items.
• If it is the major control within a window,
the box may be larger.
 CUSTOM CONTROLS

Many toolkits and interface builders provide the ability to

create custom controls;

■ Implement custom controls with caution.

■ If used, make the look and behavior of custom
controls different from that of standard controls.

Custom controls usage and operation must be learned and

remembered. The addition of custom controls adds to this
learning and increases system complexity. If custom controls
must be developed and implemented, make their look and
behavior as different as possible from the standard controls.

Presentation Controls
 Presentation controls are purely informational. They
provide details about other screen elements or controls,
or assist in giving the screen structure.
 Common presentation controls are static text fields, group
boxes column headings, ToolTips, balloon tips, and
progress indicators.
Static Text Fields
■ Description:
— Read-only textual information.
■ Purpose:
— To identify a control by displaying a control caption.
— To clarify a screen by providing instructional or
prompting information.
— To present descriptive information.
■ Proper usage:
— To display a control caption.
— To display instructional or prompting information.
— To display descriptive information.
Static Text Field Guidelines
■ Captions:
— Include a colon (:) as part of the caption.
— Include a mnemonic for keyboard access.
— When the associated control is disabled, display
it
dimmed.
— Follow all other presented guidelines for
caption
presentation and layout.
■ Instructional or prompting information:
— Display it 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
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:
— To visually relate the elements of a control.
— To visually relate a group of related controls.
■Proper usage:
— To provide a border around radio button or check box controls.
— To provide a border around two or more functionally
related
controls.
■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.
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:
— To identify a column of information contained in a
table.
■ Guidelines:
— Heading:
• Provide a brief heading. Group boxes
• Can include text and a graphic image.
• 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.
Column heading control.
ToolTips
■ Description:
— A small pop-up window containing descriptive text that appears
when a pointer is moved over a control or element either:
• Not possessing a label.
• In need of additional descriptive or status information.
■ Purpose:
— To 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.
Balloon Tips
■ Purpose:
— To provide additional descriptive or status information about a
screen element.
■ Advantages:
— Provides useful reminder and status information.
■ Disadvantages:
— If overused they lose their attention-getting value.
— If overused in situations the user considers 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
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.