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.
1.Operable Controls
2.Text Entry/Read-Only Controls
3.Selection Controls
4.Combination Entry/Selection Controls
5.Presentation Controls
 The Proper Screen-Based Controls
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
 The Proper Screen-Based Controls
Buttons
• 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 Button’s‡
•Toolbars
ssTheto
Properall
Screen-Based Controls
Command Buttons (Usage and Label)

r windows with
•‡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

els whenever
(for windows without a menu bar)‡
•Use single-word labels whenever possible (Use two -
three words for clarity, if necessary)

words for clarit

•‡Use mixed-case letters with the first letter of each
significant label word capitalized

case letters wit

 The Proper Screen-Based Controls
Command Buttons (Label and Size)
•Do not number labels
•Centre the label within the button borders
•Provide consistency in button labelling across all scre
ens
•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
 The Proper Screen-Based Controls
Command Buttons(Location and Layout)
•Buttons exiting a dialog, and usually closing the window,
should be positioned horizontally and centred across the
lower part of the window
•For a button invokes a dialog or expands the dialog , position
it centred 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
The Proper Screen-Based Controls
 The Proper Screen-Based 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.
 The Proper Screen-Based Controls
•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
 The Proper Screen-Based Controls
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 (…)
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
 The Proper Screen-Based Controls
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
 The Proper Screen-Based Controls
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
 The Proper Screen-Based Controls
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
•Create a meaningful label
•Center the image within the button
•Provide the smaller size as the default size with a user option
to change it
 The Proper Screen-Based Controls
Toolbars (Organization and Location)
•Place the most frequently used actions to the left or the top
•Keep related buttons grouped together
•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
•Permit toolbars to be turned off by user
•Allow the customizing of toolbars
 The Proper Screen-Based Controls
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
 The Proper Screen-Based Controls
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
 The Proper Screen-Based Controls
Selection Controls
•Radio Buttons
•Check Boxes
•Palettes
•List Boxes
•List View Controls
•Drop-down/Pop-up List Boxes
 The Proper Screen-Based Controls
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)
 The Proper Screen-Based Controls
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
 The Proper Screen-Based Controls
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
 The Proper Screen-Based Controls
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
•Single-Selection List Boxes
• Multiple-Selection List Boxes
•Drop-Down/Pop-up List Boxes
 The Proper Screen-Based Controls
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
 The Proper Screen-Based Controls
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
 The Proper Screen-Based Controls
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
•Other properties are the same as Drop-down/Pop-up List Box!!
 The Proper Screen-Based Controls
Slider
•A scale exhibiting degrees of a quality on a content
•To make a setting when a continuous qualitative adjustment
is acceptable
•Spatial representation of relative setting
•Not as precise as an alphanumeric indication
 The Proper Screen-Based Controls
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
•Progress indicators