Screen-Based Controls
Download
Report
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