Transcript Chapter 0

CS 3366: Human Computer Interaction
Chapter 2: Guidelines Principles and Theories
August 30, 2011
Mohan Sridharan
Based on Slides for the book: Designing the User Interface (5th Edition)
1-1
Chapter Outline
• Specific and practical guidelines that prescribe good practices
and warn against known dangers.
• Middle-level principles to compare and analyze design
alternatives.
• High-level theories and models that describe objects and
actions with consistent terminology to facilitate discussion
and communication. Theories can be predictive.
2-2
Guidelines
• Shared language.
• Best practices.
• Critics:
– Too specific, incomplete, hard to apply, and sometimes
wrong.
• Proponents:
– Encapsulates experience.
2-3
Navigating the interface
• Sample of the National Cancer Institutes guidelines:
– Standardize task sequences.
– Ensure that embedded links are descriptive.
– Use unique and descriptive headings.
– Use check boxes for binary choices.
– Develop pages that will print properly.
– Use thumbnail images to preview larger images.
2-4
Accessibility guidelines
• Provide a text equivalent for every non-text element, e.g.,
larger text, braille, speech.
• For any time-based multimedia presentation synchronize
equivalent alternatives, e.g., captions, audio.
• Information conveyed with color should also be conveyed
without it so that users can see and hear content easily.
• Make web pages predictable. Title frames to facilitate
identification and navigation.
2-5
Organizing the display
• Smith and Mosier (1986) offer five high-level goals:
– Consistency of data display: standardized dictionary of terms.
– Efficient information assimilation by user: familiar, suitable format.
– Minimal memory load on the user: no memory between frames.
– Compatibility of data display with data entry: format linked to data.
– Flexibility for user control of data display: access data conveniently.
2-6
Getting the user’s attention
•
Intensity: use no more than two levels, high intensity for attention.
•
Marking: underline, box, point, indicator.
•
Size: up to four sizes, larger sizes to grab attention.
•
Choice of fonts: up to three different fonts.
•
Inverse video: inverse coloring.
•
Blinking: use blinking displays sparingly.
•
Color: up to four different colors (regular use).
•
Audio: soft tones (normal) and harsh tones (rare conditions).
2-7
Chapter Outline
• Specific and practical guidelines that prescribe good practices
and warn against known dangers.
• Middle-level principles to compare and analyze design
alternatives.
• High-level theories and models that describe objects and
actions with consistent terminology to facilitate discussion
and communication. Theories can be predictive.
2-8
Principles
• Guidelines are good starting points but designers need management.
• More fundamental, widely applicable, and enduring than guidelines.
• Fundamental principles:
– Determine user’s skill levels.
– Identify the tasks.
• Five primary interaction styles.
• Eight golden rules of interface design.
• Human control while increasing automation.
2-9
Determine user’s skill levels
•
•
“Know thy user”.
Age, gender, physical and cognitive abilities, education,
cultural or ethnic background, motivation and personality.
•
Design goals based on skill level:
–
–
–
•
Novice or first-time users: learning-inhibiting anxiety. Smaller and
consistent vocabulary, good instructions and feedback.
Knowledgeable intermittent users: task and interface concepts.
Good menu structure, emphasize recognition, good guides.
Expert frequent users: rapid response times. Non-distracting
feedback, macro generation.
Multi-layer designs: increasing difficulty/complexity.
2-10
Identify the tasks
•
Task analysis:
–
–
•
Long hours observing and interviewing users.
Identify requirements.
Decompose high level tasks:
–
–
•
Appropriate middle-level tasks and atomic actions.
Trade-off ease of use against frustration.
Relative task frequencies:
–
–
Guide design choices.
Easier to do more frequent tasks.
2-11
Choose an interaction style
•
Direct Manipulation
(Chapter 5).
•
Menu selection
(Chapter 6).
Form fill-in (Chapter 6).
•
•
Command language
(Chapter 7).
•
Natural language
(Chapter 7).
2-12
Spectrum of Directness
2-13
The 8 “golden rules” of Interface Design
1.
Strive for consistency: actions, terminology, limited exceptions.
2.
Cater to universal usability: design plasticity for diverse users.
3.
Offer informative feedback: based on action size and frequency.
4.
Design dialogs to yield closure: actions with beginning-end, feedback.
5.
Prevent errors: structure menus, offer suitable feedback.
6.
Permit easy reversal of actions: “undo” option relieves anxiety.
7.
Support internal locus of control: users in-charge, predictability.
8.
Reduce short term memory load: no memory between screens, training.
2-14
Prevent errors
• Make error messages specific, positive in tone, and constructive.
• Mistakes and slips (Norman, 1983) happen.
• Design choices to prevent errors:
– Gray out inappropriate actions.
– Selection rather than freestyle typing.
– Automatic completion.
• Complete sequences:
– Single abstract commands for the sequence.
– Macros and subroutines for ease of use.
2-15
Automation and human control
2-16
Automation and Human Control (cont.)
•
On successful integration:
– Users can avoid:
•
Routine, tedious, and error prone tasks.
– Users can concentrate on:
•
Making critical decisions, coping with unexpected situations, and
planning future actions.
2-17
Automation and Human Control (cont.)
•
Supervisory control needed for real world open systems:
–
E.g. air-traffic controllers involve low frequency, but high
consequences of failure. Several examples in air-travel history.
–
FAA: design should place the user in control and automate only to
improve system performance, without reducing human involvement.
2-18
Automation and Human Control (cont.)
•
Goals for autonomous agents:
–
–
–
–
Knows user's likes and dislikes.
Makes proper inferences.
Responds to novel situations.
Performs competently with little guidance.
•
Tool like interfaces versus autonomous agents?
•
Adaptive interface based on user models: video games.
•
Interfaces representing human users are more successful.
2-19
Automation and Human Control (cont.)
•
User modeling for adaptive interfaces:
–
Keeps track of user performance.
–
Adapts behavior to user's needs and performance.
• Response time, message length, feedback density, menu content,
order of menu items, type of feedback, help screen content.
–
Can be problematic:
• System may make surprising changes.
• User must pause to see what has happened.
• User may not be able to:
– Predict changes.
– Interpret what has happened.
– Restore system to previous state.
2-20
Automation and Human Control (cont.)
• Alternative to agents:
– User control, responsibility, accomplishment.
– Expand use of control panels:
• Style sheets for word processors.
• Specification boxes of query facilities.
• Information-visualization tools.
2-21
Automation and Human Control (concluded)
Features to aid universal
access
Above: Mac OS X system preference settings
Right: Windows Vista Control Panel
2-22
Chapter Outline
• Specific and practical guidelines that prescribe good practices
and warn against known dangers.
• Middle-level principles to compare and analyze design
alternatives.
• High-level theories and models that describe objects and
actions with consistent terminology to facilitate discussion
and communication. Theories can be predictive.
2-23
Theories
• Beyond the specifics of guidelines.
• Principles are used to develop theories.
• Descriptive, explanatory, prescriptive or predictive.
• Motor task, perceptual or cognitive.
• Descriptive: consistent terminology for objects and actions,
support communication and training.
2-24
Explanatory and Predictive Theories
• Explanatory theories:
–
–
–
–
Observing behavior, describing activity and cause-effect.
Conceiving of designs.
Comparing high-level concepts of two designs.
Training.
• Prescriptive theories:
– Give designers precise guidance for design choices.
• Predictive theories:
– Enable designers to compare proposed designs for execution time or
error rates.
2-25
Perceptual, Cognitive and Motor tasks
• Perceptual or Cognitive subtasks theories:
– Predicting reading times for free text, lists, or formatted
displays.
• Motor-task performance times theories:
– Predicting key-stroking or pointing times.
2-26
Taxonomy (explanatory theory)
• Order on a complex set of phenomena.
• Facilitate useful comparisons.
• Organize a topic for newcomers. Guide designers.
• Indicate opportunities for novel products.
• Bottom-line: good theory is very practical but not easy to
come up with 
2-27
Conceptual, Semantic, Syntactic and Lexical
Model
• Separate descriptive concepts according to levels.
• Foley and van Dam four-level approach.
– Conceptual level: User's mental model of the interactive system, e.g., draw and paint.
– Semantic level: Describes the meanings conveyed by the user's input and by the
computer's output display, e.g., deleting drawn objects.
– Syntactic level: Defines how the units (words) that convey semantics are assembled
into a “sentence” that instructs the computer to perform a certain task, e.g., delete
sequence.
– Lexical level: Deals with device dependencies and with the precise mechanisms by
which a user specifies syntax, e.g., mouse clicks.
• Approach is convenient for designers:
– Top-down nature is easy to explain.
– Matches the software architecture.
– Allows for useful modularity during design.
2-28
Stages of action models
• Approach to form explanatory theories: portray stages of action of user.
• Norman's seven stages of action (cyclic pattern):
1.
2.
3.
4.
5.
6.
7.
Forming the goal.
Forming the intention.
Specifying the action.
Executing the action.
Perceiving the system state.
Interpreting the system state.
Evaluating the outcome.
• Norman's contributions:
– Context of cycles of action and evaluation.
– Gulf of execution: Mismatch between user intentions and allowable actions.
– Gulf of evaluation: Mismatch between system's representation and user
expectations.
2-29
Stages of action models (cont.)
• Four principles of good design:
– State and the action alternatives should be visible.
– Should be a good conceptual model with a consistent system image.
– Interface should include good mappings that reveal the relationships between
stages.
– User should receive continuous feedback.
• Four critical points where user failures can occur:
– Users can form an inadequate goal.
– Might not find correct interface object because of incomprehensible label or
icon.
– May not know how to specify or execute a desired action.
– May receive inappropriate or misleading feedback.
• Has been adapted for specific domains, e.g., web design.
2-30
Consistency through grammars
Consistent user interface goal:
– Consistent and ordered terminology for actions and objects makes it
easier for users to learn and retain concepts.
– Sometimes advantageous to be inconsistent! 
Consistent
delete/insert character
delete/insert word
delete/insert line
delete/insert paragraph
Inconsistent A
delete/insert character
remove/bring word
destroy/create line
erase/add paragraph
Inconsistent B
delete/insert character
remove/insert word
delete/insert line
delete/insert paragraph
2-31
Consistency through grammars (cont.)
• Inconsistent action verbs:
– Take longer to learn.
– Cause more errors.
– Slow down (especially new) users.
– Harder for users to remember.
– Turns customers away from product!
2-32
The Disappearance of Syntax
• Users must maintain a profusion of device-dependent details
in their human memory:
– Which action erases a character ?
– Which action inserts a new line after the third line of a text file?
– Which abbreviations are permissible ?
– Which of the numbered function keys produces the previous screen ?
2-33
The Disappearance of Syntax (cont.)
• Learning, use, and retention of this knowledge is hampered
by two problems:
– Details vary across systems in an unpredictable manner.
– Greatly reduces the effectiveness of paired-associate learning.
• Syntactic knowledge conveyed by example and repeated
usage.
• Syntactic knowledge is system dependent.
2-34
The Disappearance of Syntax (concluded)
• Minimizing burdens is the goal of most interface designers:
– Modern direct-manipulation systems.
– Familiar objects and actions representing their task objects and
actions.
– Modern user interface building tools.
– Standard widgets.
2-35
Contextual Theories
• User actions are situated by time and place:
– You may not have time to deal with device dependent syntax or shortcuts on
mobile devices, when hurried.
– Physical space is important in ubiquitous, pervasive and embedded devices,
e.g. a museum guide stating information about a nearby painting.
• A taxonomy for mobile device application development could include:
–
–
–
–
–
Monitor and provide alerts, e.g. patient monitoring systems.
Gather information.
Participate in group collaboration and relate to individuals.
Locate and identify nearby object or site.
Capture information about the object and share that information.
2-36
Summary
• Specific and practical guidelines that prescribe good practices
and warn against known dangers.
• Middle-level principles to compare and analyze design
alternatives.
• High-level theories and models that describe objects and
actions with consistent terminology to facilitate discussion
and communication. Theories can be predictive.
2-37