Transcript Screen-Based Controls

Screen-Based Controls

Primarily ready-made objects
– Standard look and feel across applications
– Available in APIs
• Visual Basic
• Visual C++

Predefined behaviors
– Customizable properties
Copyright 1999 all rights reserved
Predefined Controls
Command buttons
 Text entry/read only
 Selection controls
 Combination entry/selection
 Custom
 Presentation

Copyright 1999 all rights reserved
Design Issues

Labels and graphics

Layout and organization

How activated
Remember Galitz principles! Balance, symmetry...
Copyright 1999 all rights reserved
Buttons
Square or rectangle with a label
 Causes an action to be accomplished
immediately

– Start an action
– Change properties
– Display pop-up menu

For frequently-used actions
Copyright 1999 all rights reserved
Button Styles

Command button
– usually in a window

OK
Bar button
– part of toolbar

Symbol button
– platform-specific
Copyright 1999 all rights reserved
Command Buttons

Initiate an action
– An alternate to menu choice or
command line entry

Always visible
• Convenient access to commands
• Standard screen location for similar commands
• One click activation
• Takes screen space

Text or icon as label
Cancel
Copyright 1999 all rights reserved
Labeling Buttons




Use standard names when appropriate
Use consistent font style
Close
Clearly tie the text to the control
Only use icons on commonly executed tasks
– Make sure that the design maps to the action
– Users have trouble identifying what icons are
used for
– Supplement icons with text descriptions
Copyright 1999 all rights reserved
Button Graphics
Maintain consistent heights, widths and
spacing of buttons
 Use common shapes (rectangles)
 Avoid fancy graphic techniques, e.g.,
3-D buttons

Copyright 1999 all rights reserved
Button Organization and Layout
Provide adequate spacing
 Limit the number of controls on one
screen
 Keep related controls together

– Use visual enclosure of groups where
appropriate
Copyright 1999 all rights reserved
Button Ordering
Affirmative action to left or above
 Default goes first
 OK and Cancel next to each other
 Help last (if available)

OK
Cancel
Apply
Help
Copyright 1999 all rights reserved
Button Intent Indicators

Action performed immediately
Apply

Cascading dialog follows
Open...

Menu follows
Menu >

Expanding dialog follows
Options >>

Contingent relationship to
<- Select all
another control
Copyright 1999 all rights reserved
Button Activation

Provide keyboard equivalents
– Make equivalents consistent,
e.g., <ctrl> <key>
Open...
Allow user to <tab> or <enter> advance
from button to button on display
 Provide feedback for actions
 Gray out unavailable choices

Copyright 1999 all rights reserved
Button bar/Tool bar
Collection of commands, actions, or
functions
 Grouped as a panel for quick access
 Buttons generally same size (square)
 Buttons usually show an icon

Copyright 1999 all rights reserved
Button Bar Purposes
Provide easy access to frequently used
commands or options
 Invoke sub-applications

Copyright 1999 all rights reserved
Button Bar Organization/Layout
Place most common choices at left/top
 Keep related buttons grouped together
 Separate potentially destructive choices
 Permit user reconfiguration

Copyright 1999 all rights reserved
Button Bar Location
Locate the main bar horizontally just
below menu bar
 Position subsidiary bars along the sides
of the window

Copyright 1999 all rights reserved
Text Entry/Read-Only Controls

Contains text
– Entered or modified via keyboard
– May be display-only (no user input)
Usually a rectangle
 Usually has a descriptive caption

Copyright 1999 all rights reserved
Simple Text Boxes

Basic data entry and display
– Data entry form fields

Variations
–
–
–
–
–
Customer Name:
John Q. Public
Editable or read-only
Single line or multiple lines
Fixed size or resizable
Visual or non-visual box
Scrollable or non-scrollable
Copyright 1999 all rights reserved
We have discussed text boxes
in some detail already!
Copyright 1999 all rights reserved
Single-Line Text Boxes

Short textual entries
–
–
–
–
File name
Directory path
Data on a form
Command
Copyright 1999 all rights reserved
Multiple-Line Text Boxes

Longer passages of text
– Messages
– Text file content
– Free-form notes

May have scroll bars
Copyright 1999 all rights reserved
Text Box Captions
Identify the kind of information for the
text box
 Uses mixed-case font, normal intensity
 Place to left or above the text box
 Follow with a colon
Related Customers:

Mary R. Public
Customer Name: John Q. Public
Sam D. Public
Nellie B. Swift
Copyright 1999 all rights reserved
Text Fields

Break up long text boxes using separate
fields or delimiters
Social Security Number:
Telephone:
-
Social Security Number:
Telephone:
(
)
-
Copyright 1999 all rights reserved
Selection Controls

Presents all choices on the screen
– Radio buttons
– Check boxes
– Palettes

Single or multiple selection allowed
Copyright 1999 all rights reserved
Radio Buttons
Use for mutually exclusive choices
 Attributes, values, properties

–
–
–
–

Discrete
Few, fixed options
Hard to remember
Understood in context
Where adequate screen
space is available
Plan Choice:
Limited
Basic
Superior
Premium
Copyright 1999 all rights reserved
Choice Descriptions
Clear and meaningful
 Fully spelled-out
 One text line each
 Gray out if unavailable
 Include None if appropriate

Copyright 1999 all rights reserved
Check Boxes

Independently selectable options
– Set each option on or off
– States are clearly opposite

Attributes, values, properties
– Similar to radio buttons

Can be used to affect other controls
Copyright 1999 all rights reserved
Check Boxes

Related choices
– Each can be selected or not selected
– Similar to menus with toggled choices
Toolbars:
X
X
X
X
X
Standard
Formatting
Animation
Drawing
Pictures
Toolbars >
Standard
Formatting
Animation
Drawing
Pictures
Copyright 1999 all rights reserved
Palettes
Series of graphical alternatives
 Choices are self-describing

– Colors
– Patterns
– Images

Selections are mutually exclusive
Copyright 1999 all rights reserved
Sample Palettes
Copyright 1999 all rights reserved
List Boxes

Text box with scroll bars
– Limits screen space required
– Allows for list of any length


Used for selecting items
from a list
Drop-down list boxes
– Provide permanent display of current choice

Combo boxes
– Text box plus a drop down list
Copyright 1999 all rights reserved