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 instrument Panels, 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”

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 Which doors are easy to open? Which doors are hard to open? Why? 6 7

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 figure out how to use it? Are two functions clear and independent?

Bathroom Faucets 2 Can you figure out how to use it? Are two functions clear and independent?

Bathroom Faucets 3 Can you figure out how to use it? Are two functions clear 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 dictate otherwise

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 wrong with 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 Electric plugs What if both sides were “big” and you had to remember which side the “small” one went into?

Knowledge in Head vs. Knowledge in the World 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) Gulf of Execution User Goals Physical System Gulf of Evaluation

Goals, Execution, Evaluation What we want to happen Execution What we do to the world Evaluation Comparing what happened with what we wanted to happen (Gulf of Execution) (Gulf of Evaluation) Physical System

Execution Physical System Goals What we want to happen An intention to act so as to achieve the goal The actual sequence of actions that we plan to do The physical execution of that action sequence Physical System

Evaluation Physical System Goals What we want to happen Evaluation of the interpretations with what we expected to happen Interpreting the perception according to our expectations Perceiving the state of the world Physical System

Seven Stages - All Together Goals What we want to happen An intention to act so as to achieve the goal Evaluation of the interpretations with what we expected to happen The actual sequence of actions that we plan to do Interpreting the perception according to our expectations The physical execution of that action sequence Perceiving the state of the world 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 Gulf of Evaluation 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 unavoidable To err is human Making mistakes is part of learning Designer’s responsibility Understand why errors occur Minimize likelihood Allow for recognition of error and graceful recovery (forward or backward) design, usability engineering, self-explaining system working memory, fatigue, learning, user differences (experience), social pressure

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) Slips (unavoidable) 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: Test format 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 Visual Design 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? Execution-evaluation cycle 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