Mod-5

Select the Proper Device-Based Controls

Device-based controls, often called input devices, are the mechanisms through
which people communicate their desires to the system.

Identify the characteristics and capabilities of device-based control

• Trackball
• Joystick
• Graphic tablet
• Light pen
• Touch screen
• Voice
• Mouse
• Keyboard

Trackball
• Description
– A ball that rotates freely in all directions in its socket
• Advantages
– Direct relationship between hand and pointer movement in terms of
direction and speed
– Does not obscure vision of screen
– Does not require additional desk space (if mounted on keyboard)
• Disadvantage
– Movement indirect, in plane different from screen
– Requires hand to be removed from keyboard keys
– Requires different hand movements
– May be difficult to control
– May be fatiguing to use over extended time

Joystick
• Advantages
– Direct relationship between hand and pointer movement in terms of
direction and speed
– Does not obscure vision of screen
– Does not require additional desk space (if mounted on keyboard)
• Disadvantage
– Movement indirect, in plane different from screen
– Requires hand to be removed from keyboard keys
– Requires different hand movements
– May be difficult to control
– May be fatiguing to use over extended time
– May be slow and inaccurate.
Graphic (Touch) Tablet
• Description
– Pressure-,heat-,light-, or light-blockage-sensitive horizontal surfaces that
lie on the desktop or keyboard
– May be operated with fingers, light pen, or objects like pencil
• Advantages
– Direct relationship between hand and pointer movement in terms of
direction and speed
– Does not obscure vision of screen
– More comfortable horizontal operating plane
• Disadvantage
– Movement is indirect, in a plane different from screen
– Requires hand to be removed from keyboard
– Requires different hand movements to use
– Finger may be too large fro accuracy with small objects

Touch Screen
• Advantages
– Direct relationship between hand and pointer movement in terms of
direction and speed
– Movement is direct, in the same plane as screen
– Requires no additional desk space
• Disadvantage
– Finger may obscure part of screen
– Finger may be too large for accuracy with small objects
– Requires moving the hand far from the keyboard to use
– Very fatiguing to use for extended period of time
– May Damage the screen

Light Pen
• Description
– A special surface on a screen sensitive to the touch of a special stylus or
pen
• Advantage
– Direct relationship between hand and pointer movement in terms of
direction, distance, and speed
– Movement is direct, in the same plane as screen
– Requires minimal additional desk space
– Stands up well in high-use environments
– More accurate than finger touching
• Disadvantage
– Hand may obscure part of screen
– Requires picking it to use
– Requires moving the hand far from the keyboard to use
– Very fatiguing to use for extended period of time
 Voice
• Description
– Automatic speech recognition by the computer
• Advantage
– Simple and direct
– Useful for people who cannot use a keyboard
– Useful when the user’s hands are occupied
• Disadvantage
– High error rates due to difficulties in
• Recognizing boundaries between spoken words
• Blurred word boundaries due to normal speech patterns
– Slower throughput than with typing
– Difficult to use in noisy environment
– Impractical to use in quiet environment
Mouse
• Advantage
– Direct relationship between hand and pointer movement in terms of direction,
distance, and speed.
– Permit a comfortable hand resting position
– Selection mechanisms are included on mouse
– Does not obscure vision of the screen
• Disadvantage
– Movement is indirect, in a plane different from screen
– Requires hand to be removed from keyboard
– Requires additional desk space
– May require long movement distances
– Requires a degree of eye-hand co ordination

Mouse Usage Guidelines

• Provide a “hot zone” around small or thin objects that might require extremely
fine mouse positioning
• Never use double-clicks or double-drags as the only means of carrying out
essential operations
• Do not use mouse plus keystroke combinations
• Do not require a person to point at a moving target

Keyboard
• Advantage
– Familiar
– Accurate
– Does not take up additional desk space
– Very useful for
• Entering text and alphanumeric data
• Inserting in text and alphanumeric data
• Keyed shortcuts accelerators
• Keyboard mnemonics equivalents

• Disadvantage
– Slow for non-touch-typists
 – Slower than other devices in pointing
– Requires discrete actions to operate
– No direct relationship between finger or hand movement.

Keyboard Guidelines
• Provide keyboard accelerators
– Assign single keys for frequently performed, small-scale tasks
– Use standard platform accelerators
– Assign Shift-key combinations for actions that extend or are
complementary to the actions of key or key combination used without
the Shit-key
– Assign Ctrl-key combinations for
• Infrequent actions
• Tasks that represent larger-scale versions of the task assigned to the unmodified
key
• Provide keyboard equivalents
– Use standard platform equivalents
– Use the first letter of the item description
– Provide window navigation through use of keyboard keys
Selecting the Proper Device-Based Control
• Provide keyboard accelerators
– Assign single keys for frequently performed, small-scale tasks
– Use standard platform accelerators
– Assign Shift-key combinations for actions that extend or are
complementary to the actions of key or key combination used without the
Shit-key
– Assign Ctrl-key combinations for
• Infrequent actions
• Tasks that represent larger-scale versions of the task assigned to the unmodified
key
• Provide keyboard equivalents
– Use standard platform equivalents
– Use the first letter of the item description
– Provide window navigation through use of keyboard keys

Selecting the Proper Device-Based Controls

• Provide keyboards for tasks involving

– Heavy text entry and manipulation
– Movement through structured arrays consisting of few discrete objects
• Provide an alternative pointing device for graphical or drawing tasks
– Mouse: pointing, selecting, drawing, and dragging
– Joystick: selecting and tracking
– Trackball: pointing, selecting and tracking
– Touch screen pointing and selecting
 – Graphic tablet pointing selecting, drawing, and dragging
• Provide touch screens under the following conditions
– The opportunity for training is minimal
– Targets are large, discrete and spread out
– Frequency of use is low
– Desk space is at a premium
– Little or no text input requirement exists
• Consider user characteristics and preferences
Provide keyboards for touch typists
• Minimize eye and hand movements between devices

Pointer Guidelines

• The pointer
– Should be visible at all times
– Should contrast well its background
– Should maintain its size across all screen locations and during movement
• Shape of pointer
– Should clearly indicate its purpose and meaning
– Should be constructed of already defined shapes
– Should not be used for any other purpose other than its already defined
meaning
• Use only as many shapes as necessary to inform the user about
current location and status
• Animation should not distract

Choose the Proper Screen Based Controls

Screen Based controls, often simply called controls and sometimes called widgets. By
definitions, they are graphic objects that represent the properties or operations of other
objects.

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.
– Buttons
– Text entry/read-only, selection, combination entry/selection
– 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
• Command Buttons
• Toolbars

Command Buttons (Usage and Label)

• Use to provide fast access to frequently used or critical commands (for

windows with a menu bar)
• Use to provide access to all necessary commands (for windows without a
menu bar)
• 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.
• Do not number labels
• Center the label within the button borders
• Provide consistency in button labeling across all screens
• Restrict the number of buttons on a window to six or fewer
• Provide as large as button as feasible and maintain consistent button heights
and widths

Command Buttons (Location and Layout)

• Buttons exiting a dialog, and usually closing the window, should be

positioned horizontally and centered across the lower part of the window
• For a button invokes a dialog or expands the dialog, position it centered
and aligned vertically along the right side of the window
• Do not provide alignment with other screen controls. Maintain
alignment and spacing only within the buttons themselves
• Position the buttons within windows before locate the other
window controls
Command Buttons
(Location and Layout)

• If a button has a contingent relationship to another control, position it adjacent to

the related control

• Buttons found on more than one window should be consistently positioned

Command Buttons (Organization)

• Most frequent actions to the left or top

• Keep related buttons grouped together
• Exception: Buttons containing excessively long labels may be wider
• Windows Recommends
– An affirmative action the left or above
– The default first
– OK and Cancel next to each other
– Help last

Command Buttons (Intent Indicators)

• No intent indicator is necessary, when a button causes an action to be
immediately performed

• When a button leads to a cascading dialog, include and ellipsis (…)

• 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 and expanding dialog, include a double arrow (>>)

• When a button has a contingent relationship to another control, include a

single arrow pointing at the control

Command Buttons (Expansion and Defaults)

• Gray buttons after Expansion or when not applicable
• When a window is first displayed, provide a default action, if practical
• A default should be the most likely action:
– A confirmation
– An application of the activity being performed
– A positive action such as OK
– If a destructive action is performed (such as a deletion) the default
should be Cancel
• Indicate the default action by displaying the buttons with a bold or double border

Command Buttons (Keyboard Equivalents, Accelerators)

• The mnemonic should be the first character of the button’s label

• If duplication exists in first characters, use another character in the label
• Designate the mnemonic character by underlining it
 • Assign a keyboard accelerator to each button to facilitate keyboard selection

Command Buttons (Scrolling and Button Activation)

• Use buttons to move between multi-page forms, not scroll bars

Label buttons Next and Previous
• Highlight the button in some visually distinctive manner when the point
is resting on it and the button is available for selection

Toolbars (Usage, Structure and size)

• Provide easy and fast access to most frequently used commands or

options across multiple screens
• Provide buttons of equal size
• Create a meaningful and unique icon
• Center the image within the button
• Create a meaningful label
• Provide the smaller size as the default size with a user option to change it

Toolbars (Organization and Location)

• Place the most frequently used actions to the left or the top
• Keep related buttons grouped together
• Separate potentially destructive buttons from frequently chosen selections
• Permit user to reconfigure the button organization
• Position main features and functions bar horizontally across top of window just
below menu bar
• Position subtask and sub features bars along sides of window
• Permit the location of the bar to be changed by the user

Toolbars (Active items, Button Activation and Customization)

• Make only currently available toolbar items available
• Temporarily not available items by displaying grayed out
 • Highlight the button in some visually distinctive manner when the pointer is
resting on it
• Call attention to the button in another visually distinctive manner when it has been
activated or pressed
• Permit toolbars to be turned off by user
• Allow the customizing of toolbars

Text Entry/Read-Only Controls (Captions)

For entry boxes

• Place a colon (:) immediately following the caption
• For single fields, caption can be located in front of upper left corner of the box
• For multiple fields, position the caption upper left of the box

For read-only boxes

• If the data field is long or about the same length, center the caption above the
displayed text box
• If the data is alphanumeric, short, or quite variable in length, left-justify
the caption above the displayed
• If the data field is numeric and variable in length, right justify the caption
above the displayed

Text Entry/Read-Only Controls (Fields)

• To visually indicate that it is an enterable field, present the box in a recessed

manner
• Present read-only text boxes on the window background
• Break up long text boxes through incorporation of slashes(/), dashes (-), spaces, or
common delimiters
• Call attention to text box data through a highlighting technique
• Gray-out temporarily unavailable text boxes
Selection Controls
• Radio Buttons
• Check Boxes
• Palettes
• List Boxes
• List View Controls
• Drop-down/Pop-up List Boxes

Radio Buttons

• 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 un highlighted and deselected
• Purpose
– To set one item from a small set of option (2 to 8)
• For mutually exclusive choices (that is, only can be selected)
• Most useful for data and choices that are
– Discrete
– Small and fixed in number
– Not easily remembered
– Most easily understood when the alternatives can be seen together and
compared to one another
– Never change in content
• Do not use
– For commands
Radio Buttons (Defaults and Structure)

• If there is a default selection, designate it as the default and display its

button filled in. Else, display all the buttons without setting a dot
• When a multiple selection includes choices, display the buttons in another
unique manner, such as gray shadow
• Left-align the buttons and choice descriptions
• A columnar orientation is the preferred unless vertical space on the screen is
limited
• Enclose the buttons in a border to visually strengthen the relationship

Radio Buttons (Organization, Related Control)

• Arrange selection in expected order or follow other patterns (frequency

of occurrence, sequence of use, or importance)
• Position any control related to a radio button immediately to the right of
the choice description. End the label with an arrow

Radio Buttons (Captions)

• Display full spelled out in mixed-case letters, capitalizing the first letter of
all significant words
• Columnar orientation
– With a control border, position the caption:
• Upper-left-justified within the border
• Alternatively, to the left of the topmost choice description with (:)
– Without a control border position the caption:
• Left-justified above the choice description with (:)
• Alternatively, the caption may be located to the left of the topmost choice
description with (:)
• Horizontal orientation
– Position the caption to the left of the choice
– Alternatively, with a control border, left-justified within the border

Radio Buttons (Keyboard Equivalents and Selection and Indication)

• Assign a keyboard mnemonic to each choice description by underlining the

 applicable letter in the choice description
• Highlight the selection choice in some visually distinctive way when the cursor’s
resting on it
• When a choice is selected, distinguish it visually from the unselected choices
• If there is a default choice, display the selected choice as set in the control

Radio Buttons
Check Boxes

• Each option acts as a switch and can be either “on” or “off”

– When an option is selected, a mark (X) appears within the square box,
or the box is highlighted in some other manner
– Otherwise the square is unselected or empty (off)
• Each box can be
– Switched on or off independently
– Used alone or grouped in sets

!!Other properties are similar to the radio button’s properties!!

Palettes

• A control consisting of a series of graphical alternatives. The choices

themselves are descriptive, being composed of colors, patterns, or images
• To set one of a series of mutually exclusive options presented graphically or
pictorially
• Usually consume less screen space than textual equivalents
 • Do not use
– Where the alternatives cannot be meaningfully and clearly
represented pictorially
– Where words are clearer than images
– Where the choices are going to change
• Create boxes of equal size
• Position the boxes adjacent to, or butted up against another
• A columnar orientation is the preferred manner
• Top to button, Left to right ordering by expected order, frequency of
occurrence, sequence of use or alphabetically
• Display it less brightly than the other choices, if a choice is not available
• Highlight the choice in some visually distinctive way when the pointer is resting
• When a choice is selected, distinguish it visually from the unselected choices

List Boxes

• 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)
• Unlimited number of choices
• If the list content change, items will be hard to find
• Good for data that are
– Best represented textually
 – Not frequently selected
– Large in number
– Fixed in list length
• Clearly and meaningfully describe the choices available
• Present in mixed case
• Left-align into columns
• Require no more than 40 page-downs to search a list
– If more are required, provide a method for using criteria
• Must be long enough to display 6-8 choices
– If it is the major control within a window, the box may be larger
• When box can’t made wide enough to display longest entry
– Break the long entries with an ellipsis (…)
– Provide horizontally scrolling
• Order in a logical and meaningful way to permit easy browsing (allow user
to change the sort order will be great)
• If a particular choices is not available in the current context, omit , gray or dim it
• Enclose the choices in a box with a solid border
• Use mixed-case
• Preferred position of the control caption is above upper-left
• When a list box is disabled, display its caption as gray out
• Highlight the selection choice when the pointer is resting on

Single-Selection List Boxes

• If presented with an associated text box control

– Position the list box below and as close as possible to the text box
– The list box caption should be worded similarly to the text box caption
 – If the related text box and the list box are very close, the caption may
be omitted from the list box
• When the list box is first displayed
– Present the currently active choice highlighted or marked with a circle
or diamond to the left of the entry
– If a choice has not been previously selected, provide a default choice and
display it in the same manner that is used in selecting it

Multiple-Selection List Boxes

• Mark the selected choice with an X or check mark to the left of the entry
• Consider providing a summary list box
– Position it to the right of the list box
– Use the same color for the summary list box
• Consider providing a display-only text control indicating how many choices
have been selected
– Position it justified upper-right above the list box
• Provide command buttons for Select All and Deselect All
• When the list box is first displayed
– Display the currently active choices
– Mark with and X or check mark to the left of the entry
Drop-Down/Pop-up List Boxes

• Unlimited number of choices

• When displayed, all choices may not always be visible, requiring scrolling
• Use drop-down/pop-up when
– Screen space or layout consideration makes radio buttons or
single-selection list boxes impractical
– Do not use a drop-down list if it important that all options be
seen together.

• Provide a visual cue that a box is hidden by including a downward pointing

arrow, or other meaningful image
• !Other properties are the same as List boxes!

Combination Entry/Selection Controls and Other Operable Controls

• Spin Boxes
• Combo Boxes
• Drop-down/Pop-up Combo Boxes
• Slider

Spin Boxes

• A single line field followed by two small, vertically arranged buttons (pointing up
and pointing down arrow)
• Selection/entry is made by
 – Using the mouse to point at one of directional buttons
– Keying a value directly into field itself
• Consumes little screen spaces
• Useful only for certain kinds of data
• Proper usage for
– For mutually exclusive choices
– Where screen is space is limited
– Small in number
– Infrequently changed, selected
• To reduce the size of potentially long lists, break the listing into subcomponents
(break a date into dd mm yy)
• When first displayed, present a default choice in the box
• The spin box should be wide enough to display the longest entry or choice
• Caption is mixed-case letters
• Position the caption to the left of the box
– Alternatively, left-justified above the box
• For numeric values
– Show a larger value using the up arrow

Combo Boxes

• A single rectangular text box entry field, beneath which is a larger rectangular list
box (resembling a drop-down list box)
• The text box permits a choice to be keyed within it
• As text is typed into the text box, the list scrolls to the nearest match
• Also, when an item in the list box is selected, that item is placed within the text
box
Drop-down/Pop-up combo Boxes

• A single rectangular text box with a small button to the side and an
associated hidden list of options
• Selection are made by using the mouse or keyboard
• The information keyed doesn’t not have to match
• Unlimited number of entries and choices
• Flexible, permitting selection or typed entry
• Requiring scrolling
• Proper usage
– Where screen is limited
– For data and choices that are
• Best represented textually
• Frequently changed
• Large in number
Drop-down/Pop-up combo Boxes

• Provide a visual cue that a list box is hidden by including a downward-pointing

• Other properties are the same as Drop-down/Pop-up List Box!!

Slider
• A scale exhibiting degrees of a quality on a continuum
• To make a setting when a continuous qualitative adjustment is acceptable
• Spatial representation of relative setting
• Not as precise as an alphanumeric indication
• Proper usage:
– When an object has a limited range of possible settings
– When the range of values is continuous
– When graduations are relatively fine

Custom Controls

• Presentation controls
– Provide details about other screen elements or controls or assist in giving
the screen structure
• Static Text Fields
• Group boxes
• Column Headings
• ToolTips
• Balloon Tips
• Progress indicators