principles of interaction design and user testing

user testing & interaction design

Agenda

• Interaction design• User testing

Use

Usability Meaning

How are thesebroken?

What makes a good, highly

usable experience?

Good interaction design should …

• Let you easily figure out what to do to reach your goal• Tell you what is going on• Let you enjoy the experience

Elements of good design

1. Be designed to meet specific goals2. Make it easy to determine possible

actions to get to those goals3. Make things visible4. Make it easy to evaluate current

state5. Follow natural mappings6. Reduce mental load and increase

delight

What’s the goal here?

Identifying goals

1. Interviewing Imperatives



actions to get to those goals3. Make things visible4. Make it easy to evaluate current state5. Follow natural mappings6. Reduce mental load and delight

What is it? How does it work?

How did you figure that out?

What is this?

How can you figure it out?

1. Transfer knowledge based on something similar you dealt with in the past: mental models

2. Take signals from product of how it should be used: affordances and constraints

3. Read instructions

How does this work?

How do the elements work?

Affordances

How properties of an object give clues as to it’s use

How does this work?

How do you put this together?

• Come get a lego set• Spend the next five

minutes putting it together

• Try to do it withoutlooking at the pictureOR the instructions

How did you figure out how the

pieces fit together?

Types of constraints

• Physical: Shape of legos


• Physical: Shape of legos• Semantic: Meaning of the

situation controls outcomes



situation controls outcomes • Cultural: Symbols and

expectations



situation controls outcomes • Cultural: Symbols and

expectations• Logical: No other solution

Constraints

Limit the possible actions that can be performed on a system

Mental Models

People understand and interact with systems based on mental representations developed from experience.

How system actually works vs. How user thinks the system works

Interaction model for brakes

On slick surface:• Depress brake pedal

smoothly• Pump breaks to prevent

lock up• Do not steer while braking

except to counter steer• Noise and vibration = BAD

Model for ABS brakes

On slick surface:• Depress brake pedal fast

and hard• Do not pump breaks• Steer while breaking• Noise and vibration =

System is working!

ABS brakes

No reduction in frequency or cost in traffic accidents

Mental models

Match expectations of user AND communicate how

system works

Refrigerator control

Mental models

Model A

Mental models

Model A Model B





delight

When is the toast done?

What just happened?

Visible (obvious) feedback

When you or the system does something, there is a logical response:•Sight•Sound•Touch•Motion





delight

Is this document saved?

What is going on here?

Is this hot?

Make it easy to evaluate current state

• Clearly communicate current state• Be forgiving of errors

– Avoidance through state, affordances, & constraints

– Minimize negative impact– Undo Undo Undo





delight

Can someone help adjust the

lights?

How does this work?

Natural mapping

Natural mapping

• Take advantage of physical, cultural, and biological standards

• Heavier line = more• Louder = more




state5. Follow natural mappings6. Reduce mental load and

increase delight

Which do you want to use?

Simplify to reduce mental load

• Features• Steps• Discrete items• Organization

Feng’s CaseStudy

Discrete organization

Grouping

Categorization: 5 Hat racks

Where do you want to go?

Progressive disclosure

Anticipation of needs

Increase delight

• Fun, animation• Emotional, visual appeal• Humor, novelty• Familiarity• <insert video of chevron experience>





delight

More Quick References

Design of Everyday Things Donald Norman

Universal Principles of Design, William Lidwell, Kristina Holden, and Jill Butler

Don’t Make Me ThinkSteve Krug

agenda

• Interaction design• User testing

let’s do a test

What were the differences?

What should you do?

• Have a plan of what you’re testing• Plan realistic tasks for realistic scenarios• Introduce what you expect the user to do• Do not introduce yourself as the designer• Observe quietly• Ask open questions and lot’s of WHY• Don’t lead the user or ask leading

questions

What should you do?

• Ask about this protoype, not some other hypothetical design

• Ask the user to think for their own situation, not someone else’s

• Encourage thinking out loud

What should you do?

• Always blame the prototype never the user

• Stay neutral: don’t explain, defend the design, or contradict the user

• Try to really understand what people expected and what is actually going on

Let’s makea test plan

Example prototype

Polycom Phone (existing)

Step 1: Goal setting

• What was your prototype OR prototypes focused on?

• What do you want to learn?• Features? Target audience? Usability?

Compare ideas?

Example: Possible Goals

• See how this compares to their current conference room phone

• Check if we have the right buttons• Test the usability of basic tasks• Understand if the right calling

features are available

Now you do it

• Decide on a potential protype you will test

• Discuss your possible goals for testing

• Select 1-2 goals and write them down

Now you do it

• Decide on a potential protype you will test

• Discuss your possible goals for testing

• Select 1-2 goals and write them down

What are some goals peoplecame up with?

Step 2: Target audience

• Who do you want to test with?• Where will you find them?• How many? 3-6

Example: Target audience

• People who work in an office with a conference room and have teleconferences

• People who have a big office with a dedicated space for teleconferences

• Mix of start-up and large company• Recruited through Stanford

alumni email list

Now you do it

• Decide on a your target audience• Write down a description and

criteria• Decide where you’ll find them

Now you do it

• Decide on a your target audience• Write down a description• Think about where you’ll find them

What are some descriptions people came up with?

Step 3: Tasks/Scenarios

• Are you trying to understand general use OR interaction with specific areas?

• Plan free observation AND specific tasks • Start open ended: What is this? OR

What do you think is going on here?• Is it easy for people to be in the

scenario or will you have to create an environment?

• Keep the test short: 3-4 tasks max

Example: Tasks/Scenarios

Task 1: Explore phoneImagine that you came into your conference room at work and there is a new phone there. I know this is a little rough so imagine it’s a real phone, but with these buttons and screen. I want you to take a look and let me know what you think. And remember to think out loud.

What are your first impressions?

Example: Tasks/Scenarios

Task 2: Place and add a callImagine that you are leading a conference call. There will be two different people on the call, and each of them is in a different location. First you want to call Mary. Once she’s on the line, you want to call Paul. Then you want to make it so that everybody can talk to each other. (avoid use of the word “conference” here in order to prevent biasing the people in favor of hitting the Conference button) Here are their phone numbers (provide phone numbers).

Engineered scenarios and skitsEngineered ScenarioPrototyping waiting for an emergency room visit with glasses

of water and a bathroom

Successful design for emerging markets… demands culturally sensitive and sometimes unorthodox approaches that can throw a designer off balance. (Chavan et. al, 2009)

Now you do it

• Make a list of areas you want to test

• What tasks can you give the user to test those areas?

• What scenario will need to be created to support those task?

• Is the scenario easy to imagine or will it need to be engineered?

Refine: Tasks/Scenarios

• Consider a natural order for the tasks• At a minimum go from general to

specific• If you are doing comparisons, let people

discuss one option, then the second, then compare the two

• For each task, come up with the questions you might want to ask to really understand the user’s behavior BUT REMEMBER – AVOID LEADING

Example: Refinement/Order

• Task 1: Imagine that you came into your conference room at work and there is a new phone there. I know this is a little rough so imagine it’s a real phone, but with these buttons and screen…– What’s you’re first impression?– What can you do on this phone?– How might you use it?– How does it compare to your current phone?

• Task 2: Now I’d like you to try a task with this phone. Place and add a call task…– How did that go?– Anything confusing or frustrating about that?– Is that something that you have done on your current conference

phone?• How did it go for you on your current conference phone?• How did this compare?

• Task 3: Answering an incoming call while connected

Now you do it

• Start with some open ended questions

• Order the tasks from general to specific

• For each task, write down some follow-up questions

Step 4: Location & Date

• Will you test in one location and ask people to go there or go to where people are?

• Do you need to create a special environment to help make your task realistic? Where will that be?

• When will you be ready to test? • Should you reserve people in

advance for iterative testing?

Now you do it

• Create a plan for the location• Set target dates

Step 5: Fill in the details

• Create an intro• Ask some background questions• Add in your tasks/scenarios• Add wrap-up questions at the end

Example: Introduction

• We’re here to get your feedback on some new ideas for conference calling.

• We have a prototype of one of the ideas to show you in its early stages to get your initial impressions and we will give you some tasks to try out.

• As we go through the task, I want to encourage you to think out loud, and if anything is confusing or you don't like it, don't hesitate to let me know.

• I didn't design this product, so you won’t hurt my feelings. My only goal today is to get your feedback on what does and doesn't work for you.

• There is a screen on this product that is in very rough prototype format. If you want to press something on the screen, let me know what you'd like to press and I'll press it for you.

Example: Background Q’s

• Let's start with some background questions

• How many conference calls per week do you have?• Are you generally leading the calls, or are you a

participant?• How long does it take to set up a meeting once you’re in

the conference room? – What’s involved with that?– How long was the setup for your last conference call?

• Are there any tasks you have to perform with your current conference phone that you find confusing or frustrating?

• Does your current conference phone have a hold button?– If so, do you ever use it? – In what situations would you put somebody on hold?

Example: Wrap-up questions

• How'd that go?• What do you think about this device?• Anything especially confusing or that you didn't like?• Anything that you liked?• How do you think it compared to the use of your current

conference phone?• Thanks for your time!

Now you do it

• What do you need to introduce?• List the background questions you

might want to ask your participants• What else needs to be done to get

ready?

What next?

• Take the notes from today and create a discussion guide to share with your US teammates by end of day Monday

• Your US teammates will take that guide and refine it further in class with me on Monday at Stanford

Final Tips

• Be prepared to alter scenarios on the fly in response to what happens

• Leave time to update your prototype to accommodate the tasks you’re testing if needed

• Ask a lot of why• Run a pilot on a teammate or

friend

Example prototype

Which do you want

to try?

The three options

principles of interaction design and user testing

Design

specific goalsmake

goalsmake things visiblemake

possible actions

shape of legossemantic

mental representations

elements work

good interaction design

shape of legostypes