User Interface Styles
CIS 376
Bruce R. Maxim
UM-Dearborn
User Interface Styles
• Direct manipulation
– GUI (graphical user interface)
– WIMP (windows, icons, mouse, pull-down menus)
• Menus
• Forms
• Command language
Direct Manipulation Interface
Characteristics
• Screen objects resemble physical objects
• Objects arranged in 2-D space
• Trades perceptual motor operations for
linguistic operations
• Use of recognition in place of recall
• Expensive to implement
Direct Manipulation Interface
Examples
•
•
•
•
•
•
•
•
Display editors and word processors
Spreadsheet programs
Spatial and geographic databases
Video games and educational simulations
CAD and paint type applications
Hypertext
Office automation software
Virtual reality
Direct Manipulation Interfaces
Allow
• Novices to learn basic fundamentals quickly
• Experts to carry out new tasks
• Knowledgeable intermittent users to retain operational
concepts
• Error messages are rarely needed
• Users can assess progress to goals and make changes
instantly
• Users experience less anxiety because systems is
understood and actions are reversible
• Users gain confidence and mastery through their sense of
control over the system
Direct Manipulation Concerns
•
•
•
•
•
Increased system resources
Cumbersome actions
Weak macro techniques
History tracing is hard to log
Visually impaired users at risk
GOMS Model for Direct Manipulation
Interfaces
• Basic goal - minimize learning using a metaphoric
device
• Basic method - find relevant object on screen and
manipulate
Step 1. Search screen for an object to operate on
Step 2. Select it for manipulation
Step 3. Move object on screen to destination
For direct manipulation interfaces
you must ensure:
• Visual search (steps 1 and 3) works easily to
find objects and their destinations
• Steps 2 and 3 must be fast consistent and
easy to learn
• There must be a direct manipulation
metaphor or analogy that is familiar to the
user (e.g. desktop)
Problems with Direct Manipulation
Interfaces
• Visual representations are more spread out than
simple text - causing "off page" problems
• Users must learn meaning of components (e.g.
icons) which are meaningful to designer and not
user
• Visual representation may be misleading
• Touch typists do better with a keyboard than with
a mouse
• The debate concerning text versus icons is
an emotional one.
• The usefulness of icons depends on how
quickly user can figure out their meanings.
Icon Design Guidelines - part 1
•
•
•
•
•
Represent object/action in recognizable form
Limit number of icons
Make icon stand out from background
Be careful when using 3-D icons
Selected icons must be easily distinguished from
unselected icons
Icon Design Guidelines - part 2
•
•
•
•
•
Icons unique from one another
Ensure harmony with family of icons
Design animation movement
Add detailed information if possible
Explore use of icon combinations to create new
objects or operations
Five Challenges of Direct Manipulation
Programming
•
•
•
•
Sufficient computational generality
Access to appropriate data
Ease in programming and editing
Simplicity in subprogram invocation and
assignment of arguments
• Low risk
Growth Areas for Direct Manipulation
Interfaces
• Home automation
• Remote direct manipulation
• Virtual reality
Components for a Successful Virtual
Reality Application
•
•
•
•
•
•
•
Visual display
Head positioning and sensing
Hand positioning and sensing
Force feedback
Sound input/output
Other sensation
Cooperative and competitive VR requires
networking
Menu Architectures
•
•
•
•
•
Single
Linear sequence
Tree
Acyclic network
Cyclic network
Menu Screen Display Types
•
•
•
•
•
•
•
Text - single key
Text - pointing device
Icon - pointing device
Radio buttons
Check boxes
Pull-down or pop-up
Permanent (e.g. command bars)
GOMS Model for Menu User Task
Step1. Search screen for item matching part of task
description.
Step2. if match then
choose menu item
else
go to appropriate place in menu structure
Step3. if task accomplished then
return with goal accomplished
Step4. go to Step1.
For menu interfaces you must ensure:
•
•
•
•
Search and matching (Step1) is easy
Items must be recognizable in terms of task goals
Menu structure must reflect task structure
Minimum learning required for navigation
knowledge required (Step2)
• Choosing items must be consistent and easy
• Dealing with failure to match or other error must
be consistent and easy
• Must have only one good navigation method
Menu Architectural Guidelines
• Breadth preferred over depth for submenus
• Provide means to move back up menu
hierarchy (esp. to top level)
Menu Item Design Guidelines
• Command set small enough to fit within single menu
• User always have access to all possible menu items
without having to refer to a manual
• Logical presentation sequences (time, numeric, alphabetic,
physical properties, function/task organization, frequency
of use, most important first)
• Icons harder to recognize than words for abstract concepts
• Avoid screen clutter
• Don’t assume user will notice subtle cues (e.g. color or
border changes)
Making Selection Easy
• Provide command key bypasses for frequent
commands
• Ensure consistent selection and navigation
methods throughout
• Be aware of Fitt's law considerations for
pointing devices
Fitt’s Law
• Formal statement of relationship between
the size of a target and distance that user
must move pointing device to hit the target
– big targets are hit more quickly than small
targets
– users move quickly at first and slow down as
they home in on the target
Supporting Learning in Menu Interfaces
• Don’t automatically rearrange menus (e.g.
gray out inactive items instead)
• User mnemonic identifiers
• Allow BLT type ahead (single key strokes
as well as use of pointing devices)
Menu Interface Design Guidelines - part 1
•
•
•
•
•
•
Use task semantics to organize menu
Prefer breadth over depth
Show position using graphic, numbers, titles, etc.
Use menu titles in trees
Use meaningful item grouping
Use meaningful item sequencing
Menu Interface Design Guidelines - part 2
•
•
•
•
•
Make items brief, begin with keyword
Use consistent grammar, layout, terminology
Allow type ahead, jump ahead, or shortcuts
Allow jumps to previous or main menus
Consider on-line help and novel selection or
display devices
GOMS Model for Form Fill-in User Task
Step1. Search screen for next field to be filled in
Step2. Move cursor to next field
Step3. Figure out what to type and type it in
Step4. if all fields correct then
indicate you are finished
else
move cursor to incorrect field and change entry
Step5. go to Step1
For form fill-in interfaces you must
ensure that:
• Search (Step1) and thinking (Step3) are
easy
• Cursor movement (Step2) and finished
signal (Step4) are consistent and easy to
learn
• Correction methods (Step4) are simple and
easy to learn
Form Fill-in Design Guidelines
•
•
•
•
•
•
Preserve similarities with existing paper forms
Do not force entry order
Provide on-screen navigation instructions
Use good graphic layout
Describe special entry formats
Apply validity checks and provide clear feedback
on errors
GOMS Model for Command Language
Interface User Task
Step1. Think of and enter command verb
Step2. Think of and enter next argument
Step3. if more arguments then
go to Step2
Step4. if command is incorrect then
correct the command
Step5. Signal computer to process the command.
Step6. go to Step1
What makes a command language
easy to learn and use?
• Easy command synthesis
• User can think up command by analogy from
previously learned commands
• Commands conform to simple rules rather than
lots of unique special cases
Command Language Design Guidelines
• Make command terms easy to remember
• Provide easy command synthesis method and abbreviation
strategy
• Provide simple, consistent command structure
• Commands should be right grain size
• Parsimony (no more commands than really needed)
• Studies show a few commands are used a lot by most users
• Provide for command reuse (replay, re-entry, macros)
• Avoid unnecessary distinctions among commands
Command Language Organization
Strategies
•
•
•
•
Simple command set
Commands plus arguments
Commands plus options and arguments
Hierarchical command structure (command action,
object argument, destination)
Command Language Abbreviation
Strategies
•
•
•
•
•
•
•
Simple truncation
Drop vowel and use simple truncation
First and last letters
Standard abbreviations from other contexts
First letter of each word or phrase
Phonics (e.g. XQT for execution)
Cross product languages {verbs} x {objects}
Cross Product Languages
{verbs} x {objects}
{copy, delete, rename} x {files, directories}
cf, df, rf, cd, dd, rd
Dialog Boxes
• Combinations of all four interface styles
(menu, form fill-in, direct manipulation,
command line)
• User task model would also be a composite
model
Dialog Box Design Guidelines
•
•
•
•
•
Meaningful title
Top-left to bottom right sequencing
Proper clustering and emphasis
Consistent language
Consistent terminology, fonts, capitalization,
justification
• Standard buttons
• Error prevention by direct manipulation
Dialog Box External Relationship
Design Guidelines
•
•
•
•
•
•
•
Smooth appearance and disappearance
Distinguishable boundaries
Sized to reduce overlap problems
Displayed close to appropriate screen objects
No overlap of required items
Easy to make disappear
Clear directions to cancel or complete operations