Post on 01-Jan-2016
description
Design of Everyday Things
Don Norman on Design & HCI
Today’s agenda
Project scores Poster 8400 topics Design of everyday things Midterm review Next week:
6:30-7:30: web design 7:45-9:15: Midterm
Poster
March 12 (first class after spring break) Present (at least) 3 design possibilities, get
feedback Organization:
General topic, perhaps scenario, users, requirements, etc.
At least 3 DIFFERENT designs – sketches, storyboards, perhaps descriptions or features
You can bring whatever else you have Materials: whatever you like
Summary
Darn these hooves!I hit the wrong switch again!Who designs these instrumentPanels, raccoon?!
Don Norman
Professor at Northwestern and Principal of Nielsen Norman group
Previously Professor at UCSD, senior positions at Apple & HP
ACM/CHI Lifetime Achievement Award
Prolific author http://www.jnd.org/
Discussion
What did you take away from DOET book so far?
Here are some
Affordances are important Minimize the gulf of interpretation and gulf of
execution Use natural mappings Make state visible Use a conceptual model that makes sense Provide feedback
Daily Challenges
How many of you can use all the functionality in your VCR Digital watch Copy machine Stereo system Plumbing fixtures
Hall of Shame Example
Leitz slide projector To move forward, short press To move backward, long press
What happens when you get frustrated?
Changing Ringer Volume
Press “Program” Press “6” Set volume
Low - Press “1” Medium - Press “2” High - Press “3”
Press “Program”
Much better…
Important Concepts
Affordances Visibility Conceptual models Mapping Feedback Constraints
Affordances
Perceived and actual properties of an object that determine how it could be used Chair is for sitting Button is for pushing Door handle is for …. Scroll arrow is for … Icon is for …
Affordances
Affordances
Door Opening Affordances
1 2 3 4 5
6 7
Which doors are easy to open?
Which doors are hard to open?
Why?
Affordances in interfaces
Interfaces are virtual and do not have ‘real’ affordances like physical objects
Interfaces have ‘perceived’ affordances Learned conventions of arbitrary
mappings between action and effect at the interface
Some mappings are better than others
Mantra
Complex things may need explanation, but simple things should not If a simple thing requires instructions, it is
likely a failed design
Norman’s 2 main principles Provide a good conceptual model Make things visible
Affordances is part of this
Conceptual Models
People build their own systems of how things work Example - thermostat
Designer can help user foster an appropriate conceptual model Appearance, instructions, behavior...
Conceptual Models
Mental models are not always right Two Classes:
Functional model Stimulus - response “Press the accelerator once, then turn the key” At surface or superficial level
Structural model Deeper sense of why it happens, not just what
happens “Press the accelerator to engage the automatic choke
on a carburetor”
Visibility
When functionality is hidden, problems in use occur Occurs when number of functions is greater
than number of controls When capabilities are visible, it does not
require memory of how to use Recognition over Recall in the world vs. in the head
Simple Example
Bathroom faucets Two functions
Hot/cold Flow
Bathroom Faucets 1
Can you figureout how to useit?
Are two functionsclear and independent?
Bathroom Faucets 2
Can you figureout how to useit?
Are two functionsclear and independent?
Bathroom Faucets 3
Can you figureout how to useit?
Are two functionsclear and independent?
My parent’s microwave
5:45
My microwave
Which is Faster for Setting Time?
Mapping
Relationship between control and action/result in the world
Take advantage of physical analogies or cultural understandings Good:
Car, various driving controls Mercedes Benz seat adjustment example
Bad Car stereo - Knob for front/back speakers
Which is better?
or
Mapping Example: Euros
Size::value
Mapping Example: Stove
Which controls which?
Why not this?
Yikes!
Why Not Design Better
Stove
Speakers
Physical, monetary,convenience, etc.,constraints dictateotherwise
Feedback
Sending information back to the user about what has been done
Includes sound, highlighting, animation and combinations of these
e.g. when screen button clicked on provides sound or red highlight feedback:
“ccclichhk”
What’s wrongwith this picture?
Constraints
Limitations on what can be done Physical - keys Semantic - menu graying Cultural - Colors Logical - When all above don’t apply
Simple Example
What if both sides were “big” and you had toremember which side the “small” one went into?
Electric plugs
Knowledge in Head vs. Knowledge in the World
Head Not easy to retrieve Learning required, good
conceptual model makes easier
Can be very efficient Not easy first time Aesthetics do not need to
make info visible
World Easy to retrieve No learning, only
interpretation Use slowed by need to
find the info to interpret Easy for first time Can be cluttered or
inelegant
Execution-Evaluation cycle
Norman (DOET, p. 46)
UserGoals
PhysicalSystem
Gulfof
Execution
Gulfof
Evaluation
Goals, Execution, Evaluation
Physical System
GoalsWhat we
want to happen
ExecutionWhat we
do to the world
EvaluationComparing what happened
with what we wanted to happen
(Gulf of Execution) (Gulf of Evaluation)
Execution
GoalsWhat we
want to happen
An intention to actso as to achieve the goal
The actual sequence of actionsthat we plan to do
The physical execution of that action sequence
Physical System
Evaluation
GoalsWhat we
want to happen
Evaluation of the interpretationswith what we expected to happen
Interpreting the perception accordingto our expectations
Perceiving the stateof the world
Physical System
Seven Stages - All Together
GoalsWhat we
want to happen
Evaluation of the interpretationswith what we expected to happen
Interpreting the perception accordingto our expectations
Perceiving the stateof the world
An intention to actso as to achieve the goal
The actual sequence of actionsthat we plan to do
The physical execution of that action sequence
Physical System
Implications – Which Gulf does these Address?
Make current state and action alternatives visible
Need good conceptual model with consistent system image
Interface should include mappings that reveal relationships between stages
User should receive continuous feedback Provide affordances
Goal: Minimize Gulfs
Gulf of Execution Conceptual model Affordances Natural mappings
Gulf of Evaluation Make state visible Feedback
Errors - Three Considerations
Avoiding and preventing Identifying and understanding Handling and recovering
Why errors are important
Errors are unavoidableTo err is humanMaking mistakes is part of learning
Designer’s responsibilityUnderstand why errors occurMinimize likelihoodAllow for recognition of error and graceful
recovery (forward or backward)
Example Studies – Errors Happen! 170 experienced UNIX users over 9 days
Individual commands had error rates of 3-50%
300 security system users over 20 months 12,117 error messages Most common 11 errors -> 65% 2517 involved repeated errors (with no non-errors in
between) within 10 minutes Bad error recovery/help
Kraut et al, CHI ‘83
Mosteller & Ballas, Human Factors ‘89
User-Computer Dialog
Three phases Read-scan phase -- Perceptual errors Think phase -- Cognitive errors Respond phase -- Motor errors
Perceptual Errors
Result from insufficient or poor perceptual cues Display of objects that are visually similar Invisible or poorly expressed states Failure to capture user’s attention Lack of perceivable feedback
Cognitive Errors
Caused by taxing the memory and problem solving capabilities Tax recall memory Lack of or poor mnemonic aids Inconsistency Lack of context or status info
e.g., where came from in a menu Mental calculations and translations
Motor Errors
Taxing the eye-hand coordination and motor skills Awkward motor movements Highly similar motor sequences
e.g., double click, click Pressure for speed Require a high degree of hand-eye
coordination Requiring special types of motor skills (type)
Mistakes and Slips
Mistakes (hopefully avoidable) Wrong intention Incorrect mental model Novice behavior
Slips (unavoidable) Wrong execution Skilled behavior
Moral …
… slips happen
Types of Slips
1. Capture error - Continue frequently done activity instead of intended one (similar starts) Confirm deletion of file instead of cancel
2. Description error - Intended action has much in common with others possible (usually when distracted, close proximity) shift key & caps lock key
Types of Slips
3. Data driven error - Triggered by arrival of sensory info which intrudes into normal action Call to give someone a number, dial that
number instead 4. Associative activation - Internal thoughts
and associations trigger action Phone rings, yell “come in”
Types of Slips
5. Loss of activation - Forgetting goal in middle of sequence of actions Start going into room, then forget why you’re
going there 6. Mode errors - Do action in one mode
thinking you’re in another Delete file, but you’re in wrong directory Scroll wheel in PowerPoint
What to do?
As much as possible Prevent mistakes Allow recovery from slips
Error Prevention Guidelines
Eliminate modes or provide visible cues for modes - no invisible modes
Use consistent representation (color, style) Maximize recognition, minimize recall Design non-similar motor sequences for commands Minimize need for typing Test and monitor for errors and engineer them out Allow reconsideration of action by user (e.g., removing file from
trash) Avoid ambiguous and unclear prompts and messages - as in
next set of examples!
Great Examples
Error Recovery Guidelines
Provide appropriate type of response Gag - Prevent user from continuing
Erroneous login Warn - Warn user an unusual situation is occurring
Bell or alert box Nothing - Don’t do anything (Careful, user must
determine problem) move file to bad place
Self-correct - Guess correct action & do it Spell-check correction
Dialog - System opens dialog with user Go into debugger on run-time crash
Error Recovery Guidelines
Provide undo function Provide cancel function from operations in
progress Require confirmation for drastic, destructive
commands Provide reasonableness checks on input data
Did you really mean to order 5000? Return cursor to error field, allow fix Provide some intelligence
Guess what they wanted to do Provide quick access to context-sensitive help
Error Message - What to Say
Error: Error code -37 Description: Disk full Prescription: Disk full; recover disk
space Prescription + aid: Disk full; recover space
by deleting files or defragmenting
Prescription + offer: Disk full; proceed with disk defragmentation? Otherwise delete files.
How Does This Example Fit In?
Error Message Wording - Vocabulary Problem with previous example - some users
will not know what defragmentation means!! Vocabulary
User-oriented Defined in advance for commonality
throughout all messages (in style guide) Alternatives to defragmentation ?
Error Message Wording - Tone
Sorry, command not recognized Command not recognized :-( Command not recognized Command not recognized!!
Implications for design
Scenarios should include errors !!! Distinguish between skilled and learner errors Uncover errors in the existing system
how do people self-monitor (cheat sheets)
Midterm review
How to study: Look at slides for topics, bullets, vocabulary,
etc. Find details and examples in the books as
needed Test format
25-50% true/false, multiple choice, fill-in-blank Rest short answer, probably with one longer
answer
Review
What is usability? What is design? Why is it hard? The user centered design process
General steps various models – high level understanding Waterfall vs. other models
Ethics What concerns in working with people?
History What’s a paradigm? What were the major paradigm shifts? What were the
impacts to HCI/users?
Requirements Review
Functional vs. non functional Summative eval vs. formative eval What pieces are part of this?
User characteristics, task analysis, environment, etc.etc. Persona – what is it and what makes a good one? Scenario – what is it and what makes a good one? Stakeholders
How do you gather data? Tradeoffs? Interview, questionnaire, observation, etc. etc. Contextual Inquiry – what is it, why, tradeoffs…
Task models Hierarchical task analysis - how to do it? Other models – what can they represent?
Humans review
What are issues concerning our senses? What are difficulties or disabilities that could occur? Model Human Processor model of memory
What’s a chunk? Why do we care? What are implications? (recognition over recall, etc.)
Other processes – what are they? (attention, learning) What are the implications?
Other models of human cognition Situation action Activity theory Distributed cognition Basic understanding, Compare/contrast each
Interaction Review
Command line WIMP Direction manipulation Pen & mobile Speech & natural language
Issues, advantages, disadvantages, etc.
Design
Prototyping What’s vertical vs. horizontal? What’s low vs. high fidelity? What are various methods?
Scenarios, mockups/sketches, etc. Wizard of Oz Issues and tradeoffs?
Visual Design Form follows function Graphic design principles?
Clarity, proximity, alignment, etc.
DOET Review
What are Norman’s principles? Affordance, mapping, feedback, etc. What are they? Why needed?
Execution-evaluation cycle Steps of cycle, what helps reduce gulfs?
Errors Perceptual, cognitive, motor Mistake vs. slip
Error prevention and recovery guidelines