Empathize
Ideate
Define
Prototype
Test
CS:2520 Human-Computer Interaction. Fall 2016.
Designing Prototypes
From Preece, Rogers & Sharp’s
Interaction Design
CS:2520 Human-Computer Interaction. Fall 2016.
Process
• Conceptual design
– What product will do
– How it will behave
• Physical design
– Actual visual design
• After requirements are established
• Iterative
CS:2520 Human-Computer Interaction. Fall 2016.
What is a prototype?
• Can range from paper-based to
programmed
• Requirements can be used to see what
design will work best
• Save resources by testing out design
ideas before investing major resources in
writing code
CS:2520 Human-Computer Interaction. Fall 2016.
Class discussion
• Why should prototypes be used during the
design process?
CS:2520 Human-Computer Interaction. Fall 2016.
Prototypes
• Many ideas can easily be sketched
• Make it easier to communicate ideas
about how technology will work
• Stakeholders can provide feedback
• Helps in learning about strengths and
weaknesses of alternative designs
CS:2520 Human-Computer Interaction. Fall 2016.
Class discussion
• What do you think are the advantages of
developing low-fidelity prototypes?
CS:2520 Human-Computer Interaction. Fall 2016.
Low-fidelity prototyping
• Advantages
– Simple
– Inexpensive
– Quick to develop
– Quick to modify
– Easy to discard
– Help concentrate on big picture rather than
details
CS:2520 Human-Computer Interaction. Fall 2016.
Paper prototyping
• Underline links
• Text input fields with rectangular boxes
• Check boxes and radio buttons use
correction tape
• Buttons with text inside oval
• Sticky notes for dropdown
• Drag and drop – hard to prototype
CS:2520 Human-Computer Interaction. Fall 2016.
Paper prototyping
• Scrolling: cut a box out of a piece of paper
and lay on top of screen, move as the user
scrolls
• Might be faster to type info and print as
opposed to writing it by hand
CS:2520 Human-Computer Interaction. Fall 2016.
https://youtu.be/B7M0fVXdovM
CS:2520 Human-Computer Interaction. Fall 2016.
Storyboarding
• One type of low-fidelity prototypes
• Sketches showing how user would interact
with technology
• Good for presenting ideas to non-users
• Can be used to sell innovative ideas
• Most useful for early concepts of highly
innovative designs
CS:2520 Human-Computer Interaction. Fall 2016.
Storyboarding
• May not get the best feedback from users
because you show them how the system
should be used
• May not be the best for comparing
different alternatives for same reason
CS:2520 Human-Computer Interaction. Fall 2016.
Storyboarding
•
•
•
•
Setup context
Clear progression
Give a “script” of important events
Leave out the details
CS:2520 Human-Computer Interaction. Fall 2016.
Storyboarding
Five visual elements:
1. Level of detail
2. Inclusion of text
3. Inclusion of people and emotions
4. Number of Frames
5. Portrayal over time
CS:2520 Human-Computer Interaction. Fall 2016.
#1 Level of detail
Comic by Scott McCloud.
https://laurenericksondotcom.files.wordpress.com/2011/09/understanding-comics1.png
CS:2520 Human-Computer Interaction. Fall 2016.
#2 Inclusion of text
Include text, but keep it short
CS:2520 Human-Computer Interaction. Fall 2016.
#3 Inclusion of people and
emotions
• Include people experiencing the system
and their reactions
CS:2520 Human-Computer Interaction. Fall 2016.
#4 Portrayal of Frames
• 4-6 frames ideal
– Present a succinct story
– Less work to illustrate
• If longer
– May lose focus of story or attention
CS:2520 Human-Computer Interaction. Fall 2016.
#5 Portrayal of Time
• Only use passage of time if necessary to
understand
– E.g. a longer break is necessary between two
frames
CS:2520 Human-Computer Interaction. Fall 2016.
Examples
CS:2520 Human-Computer Interaction. Fall 2016.
Storyboarding Tips
• If drawing is too difficult take pictures or
use existing images with credit
• Blur out unnecessary details
CS:2520 Human-Computer Interaction. Fall 2016.
Sketching
• Do not worry about your drawing skills
– Best when they don’t look good
– Avoids concentrating on details, colors
• Helps everyone concentrate on whether
design has the right elements and flows
well
CS:2520 Human-Computer Interaction. Fall 2016.
Sketching
• Does not tell users how to interact
• Could be confusing if ideas are highly
innovative
• Not as useful for physical (non-screen)
design
CS:2520 Human-Computer Interaction. Fall 2016.
Sketching
• Sketch all screens (including variations) involved
in the tasks you want to get feedback on
• Usually useful to use a large sheet of paper
• Pencils better for initial sketches
• Colored pens may be used for more elaborate
sketches
• May use additional pieces of paper/other
materials to show changes on the same screen
(e.g. keep navigation menu, change content)
CS:2520 Human-Computer Interaction. Fall 2016.
Examples
CS:2520 Human-Computer Interaction. Fall 2016.
Index cards
• Use common for developing websites
• Also useful for applications with a large
number of screens
• Each card represents a screen
• Can help organize websites
• Can help with information architecture
CS:2520 Human-Computer Interaction. Fall 2016.
Examples
CS:2520 Human-Computer Interaction. Fall 2016.
When prototyping
•
•
•
•
Start building.
Don’t spend too long on one prototype.
Build with the user in mind
Identify what is being tested
CS:2520 Human-Computer Interaction. Fall 2016.
When prototyping
• Impose Constraints
– Add a constraint while brainstorming (e.g.
what if it were morning?)
– Time (create artificial deadlines to work
efficiently)
CS:2520 Human-Computer Interaction. Fall 2016.
Class discussion
• How do you use low-fidelity prototypes to
get feedback on your design?
CS:2520 Human-Computer Interaction. Fall 2016.
Evaluating prototypes
• Go over user tasks to see how well the
prototype will work
• Evaluate in terms of requirements,
usability goals, user experience goals
• Evaluate using usability principles and
heuristics
CS:2520 Human-Computer Interaction. Fall 2016.
Evaluating prototypes
• Examples
– Can users complete tasks?
– How many steps does it take to complete
tasks?
– Are all the necessary functions available?
– Are the necessary actions easily identifiable?
– Is it easy to recuperate from errors?
– What is the likelihood that users will make
mistakes?
CS:2520 Human-Computer Interaction. Fall 2016.
Evaluating prototypes
• Users can also evaluate low-fidelity
prototypes
• Decide which tasks you want to get
feedback on
• Make sure your low-fidelity prototype
shows every step user would have to go
through in completing those tasks
CS:2520 Human-Computer Interaction. Fall 2016.
Evaluating prototypes
• Ask users to complete a particular task
• For each step in the task
– Ask: what would you do next?
– After they show you what they would do, show
them how the system would react
• Show sketch for another screen
• Use materials to modify current sketch
– Ask: how do you interpret the system’s
response?
CS:2520 Human-Computer Interaction. Fall 2016.
Evaluating prototypes
• Tell users you are not testing them, they
are testing your design
• Do not be defensive about your design
• Document any issues
– Don’t know what to do
– Surprised by response
– Can’t find what they are looking for
• Document what works well
CS:2520 Human-Computer Interaction. Fall 2016.
Class discussion
What can go wrong with evaluating a low
fidelity prototype?
CS:2520 Human-Computer Interaction. Fall 2016.
What can go wrong?
Artificial Constraints
“First, using your account number, make 15
copies of a document. Then, make another
15 copies, but DO NOT use your account
number for these.”
CS:2520 Human-Computer Interaction. Fall 2016.
What can go wrong?
• Artificial sub goals
– Photocopying machine: Tell someone to
photocopy a 2-sided document on 8½” x 11”
paper
– Don’t say “make copies 50% dark”, “use bin
b”, etc.
– Let the user figure out for themselves what to
do
CS:2520 Human-Computer Interaction. Fall 2016.
What can go wrong?
• Artificial ordering
– Enter in 10 copies, with lightness set to 10%.
– Choose 1 sided to 2 sided, use paper source
bin A.
– Cover sheet needed, using paper bin B for
cover sheet.
– Set stapling feature on and collating on.
– Start printing.
CS:2520 Human-Computer Interaction. Fall 2016.
What can go wrong?
Do not make this a data entry task
• Make 23 copies
• With collate
• Cover sheets
• Default darkness
• 1 Sided-> 1 Sided
CS:2520 Human-Computer Interaction. Fall 2016.
What can go wrong?
“You are a teacher and are trying to make 40
copies of a one-sided magazine article that is 10
pages long for your class tomorrow. Due to the
large number of copies, you print the article
double-sided. In other words, the 10 page article
would be printed on 5 sheets of paper. Due to the
high contrast of the article, you must lighten the
copy. In other words, change the contrast. You
then want the copies to be collated and stapled.”
CS:2520 Human-Computer Interaction. Fall 2016.
What should I do?
“It’s your first day in the office, starting a new job.
You would like to make some copies of several
documents that your boss gave you to browse
through. Your colleague in the next cubicle tells
you that you need an access code to make copies.
The code is 5150. You walk over to the copy
machine at the end of the hall and realize that it is
not the Xerox copier that you are accustomed
too... Make 2 copies of the ‘Company Annual
Report’.”
CS:2520 Human-Computer Interaction. Fall 2016.
Class activity
• How would you evaluate storyboards?
• How about index card prototypes?
CS:2520 Human-Computer Interaction. Fall 2016.
Class activity
• Sketch in your notebook, a design for a
peanut butter and jelly sandwich maker
based on your task analysis
• Join your group project team and discuss
everyone’s designs
• Develop a design for the team using large
sheets of paper and markers
• Present to the class
CS:2520 Human-Computer Interaction. Fall 2016.
Class discussion
• What are some drawbacks to low-fidelity
prototypes?
CS:2520 Human-Computer Interaction. Fall 2016.
Low-fidelity prototyping
• Disadvantages
– Computer buggy
– Slower than a computer
– Hard to implement dropdowns, drag and drop,
audio, video
– Won’t look like final product
– Participants cannot use them on their own
CS:2520 Human-Computer Interaction. Fall 2016.
Low-fidelity prototyping
• What you will do for Phase 2 of group
project
• Use low-tech materials
– White and colored paper, medium tip pens,
cardboard, scissors, post its, tape, overhead
transparencies, paper correction tape
CS:2520 Human-Computer Interaction. Fall 2016.
Sketching: Medium Fidelity
• Wireframes are a variation of sketching used for
websites
• Developed in software
• Some may be interactive
• May be used after first round of paper-andpencil prototypes
• See https://balsamiq.com/ for an example
CS:2520 Human-Computer Interaction. Fall 2016.
Examples
CS:2520 Human-Computer Interaction. Fall 2016.
Credits
These slides are adapted from:
1.Juan Pablo Hourcade
2.The University of Washington Introduction
to Human-Computer Interaction (CSE 440):
https://courses.cs.washington.edu/courses/c
se440/
CS:2520 Human-Computer Interaction. Fall 2016.
51