12. 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
13. Elements of good design
1. Be designed to meet specific goals
2. Make it easy to determine possible
actions to get to those goals
3. Make things visible
4. Make it easy to evaluate current
state
5. Follow natural mappings
6. Reduce mental load and increase
delight
17. Elements of good design
1. Be designed to meet specific goals
2. Make it easy to determine possible
actions to get to those goals
3. Make things visible
4. Make it easy to evaluate current state
5. Follow natural mappings
6. Reduce mental load and delight
21. 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
27. How do you put this together?
• Come get a lego set
• Spend the next five
minutes putting it
together
• Try to do it without
looking at the picture
OR the instructions
28. How did you figure
out how the
pieces fit
together?
30. Types of constraints
• Physical: Shape of legos
• Semantic: Meaning of the
situation controls outcomes
31. Types of constraints
• Physical: Shape of legos
• Semantic: Meaning of the
situation controls outcomes
• Cultural: Symbols and
expectations
32. Types of constraints
• Physical: Shape of legos
• Semantic: Meaning of the
situation controls outcomes
• Cultural: Symbols and
expectations
• Logical: No other solution
34. 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
35. 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
36. 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!
42. Elements of good design
1. Be designed to meet specific goals
2. Make it easy to determine possible
actions to get to those goals
3. Make things visible
4. Make it easy to evaluate current
state
5. Follow natural mappings
6. Reduce mental load and increase
delight
46. Elements of good design
1. Be designed to meet specific goals
2. Make it easy to determine possible
actions to get to those goals
3. Make things visible
4. Make it easy to evaluate current
state
5. Follow natural mappings
6. Reduce mental load and increase
delight
51. 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
52. Elements of good design
1. Be designed to meet specific goals
2. Make it easy to determine possible
actions to get to those goals
3. Make things visible
4. Make it easy to evaluate current
state
5. Follow natural mappings
6. Reduce mental load and increase
delight
59. Natural mapping
• Take advantage of physical,
cultural, and biological standards
• Heavier line = more
• Louder = more
60. Elements of good design
1. Be designed to meet specific goals
2. Make it easy to determine possible
actions to get to those goals
3. Make things visible
4. Make it easy to evaluate current
state
5. Follow natural mappings
6. Reduce mental load and
increase delight
72. Elements of good design
1. Be designed to meet specific goals
2. Make it easy to determine possible
actions to get to those goals
3. Make things visible
4. Make it easy to evaluate current
state
5. Follow natural mappings
6. Reduce mental load and increase
delight
73. More Quick References
Design of Everyday Things
Donald Norman
Universal Principles of Design,
William Lidwell, Kristina Holden, and
Jill Butler
Don’t Make Me Think
Steve Krug
77. 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
78. 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
79. 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
83. Step 1: Goal setting
• What was your prototype OR
prototypes focused on?
• What do you want to learn?
• Features? Target audience? Usability?
Compare ideas?
84. 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
85. 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
86. 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 people
came up with?
87. Step 2: Target audience
• Who do you want to test with?
• Where will you find them?
• How many? 3-6
88. 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
89. Now you do it
• Decide on a your target audience
• Write down a description and
criteria
• Decide where you’ll find them
90. 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?
91. 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
92. Example: Tasks/Scenarios
Task 1: Explore phone
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. 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?
93. Example: Tasks/Scenarios
Task 2: Place and add a call
Imagine 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).
94. Engineered scenarios and skits
Engineered Scenario
Prototyping waiting for an emergency room visit with glasses
of water and a bathroom
95. Successful design for emerging markets…
demands culturally sensitive and
sometimes unorthodox approaches that
can throw a designer off balance.
(Chavan et. al, 2009)
96. 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?
97. 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
98. 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
99. 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
100. 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?
101. Now you do it
• Create a plan for the location
• Set target dates
102. 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
103. 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.
104. 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?
105. 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!
106. 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?
107. 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
108. 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
Rider faces forward; windshield protects the rider’s face
Word police is right side up
Red is for stop lights and for tail lights
Might know that blue is on top of police cars in the US
Alphabetic
Time – chronological
Location – geographical or spatial reference
Continuum - magnitude – high to low, worst to best, etc…compare things using a common, culturall appropriate measure
Category - relatedness
Storyboards, Skits, Videos
Apala Chavan, for example, has developed the Bollywood method for use in India.
She was trying to get feedback on a train ticket kiosks, but couldn’t get people to say anything negative about it.
In the Bollywood method Apala described a dire fantasy situation. The participant’s beautiful, young, and innocent niece is about to be married. But suddenly he gets news that the prospective groom is a member of the underground. He is a hit man! His whole life story is a sham, AND HE IS ALREADY MARRIED! The participant has the evidence and must book an airline ticket for himself and the groom's current wife to Bangalore. Time is of the essence!!!
With this familiar type of story, Indian users engaged and provided commentary on the system.