design of everyday things. agenda questions? project part 1: now what? test review one last bit on...

Design of Everyday Things

Agenda

Questions? Project Part 1: Now what? Test review One last bit on prototyping Design of Everyday Things

What to do now

Start brainstorming!!– Lots of ideas, then narrow down to 3 or 4

Explore design space– Vary what you can – hardware, forms of input, forms of output,

features, requirement priorities, usability priorities

Be off the wall, crazy– This will lead to less crazy but original ideas

Project poster – October 20 Project report + prototype: Nov. 10

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

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 (primary, secondary, tertiary, facilitating)

How do you gather data? Tradeoffs?– Interview, questionnaire, observation, etc. etc.

Task models– Hierarchical task analysis - how to do it?– Other models – what can they represent?

Humans review

What are issues concerning our senses? Model Human Processor model of memory

– What are pieces of memory (STM, LTM, etc.)– 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?

Interaction Review

Command line WIMP Direction manipulation Pen & mobile Speech & natural language

Issues, advantages, disadvantages, etc.

Prototyping

Prototyping– What’s vertical vs. horizontal?– What’s low vs. high fidelity?– What are various methods?

Scenarios, mockups/sketches, etc. Issues and tradeoffs?

Prototyping Technique

Wizard of Oz - Person simulates and controls system from “behind the scenes”– Use mock interface and

interact with users– Good for simulating

system that would be difficult to build

Can be either computer-based or not

Wizard of Oz

Method:– Behavior should be algorithmic– Good for voice recognition systems

Advantages:– Allows designer to immerse oneself in situation– See how people respond, how specify tasks

Review

Low-fidelity Medium-fidelity High-fidelity

Sketches, mock-ups Slide shows

Simulations

System prototypes

Scenarios

Storyboards

For more: take ITIS 3150

Rapid Prototyping and Interface Building Offered next fall

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?

Fun Examples

Phones

How do you- transfer a call- change volume- store a number- ...

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 …

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

About that VCR…

That old joke - “how many of you have a VCR that is blinking 12:00?” :-)

Still true today :-(

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”

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

Try and Try Again

Norman thinks that it often takes 5 or 6 tries to get something “right”

Simply may not have that luxury in a competitive business environment