low fidelity prototyping pearl pu EPFL
Low Fidelity UI Prototyping
Why Do We Prototype?
  Part of the Human Computer Interaction Course Notes
Dr. Pearl PU
Human Computer Interaction Group
Institute for Core Computing Science
Faculty of Communication and Information Sciences
EPFL
Get feedback from users faster
   saves money
Experiment with alternative designs
Fix problems before code is written
Keep the design centered on the user
Attribution: some of the slides have been adapted from
Marti Hearst with permission
Slide adapted from James Landay
low fidelity prototyping pearl pu EPFL
Fidelity in Prototyping
   Advantage of lowfi
Fidelity refers to the level of detail
High fidelity
?
 low fidelity prototyping pearl pu EPFL
prototypes look like the final product
    Low fidelity
? (Paper prototyping)
 Cheap = less time and easier to change
Quick feedback
More cycles of testing, more prototype
Widely practiced in industry, even though it
sounds silly in the beginning
artists renditions with many details missing
- Read documents on our website regarding
lowfi prototyping
Slide adapted from James Landay
low fidelity prototyping pearl pu EPFL
How to do a paper prototyping
 Main idea:
     Sketch out prototypes of the interface on
paper
Build interaction flow chart
Potential users “walk through” task
scenarios using the paper interface
A designer “plays computer”
Change the design on-the-fly if helpful
low fidelity prototyping pearl pu EPFL
Paper prototyping in architecture
  Paper models of a house before it’s
built, so that habitants can “walk
through” it;
Similarly, potential users can “walk
through” task scenarios and critique
on the UI
1
low fidelity prototyping pearl pu EPFL
Lofi 6 steps
      low fidelity prototyping pearl pu EPFL
Materials
Review task analysis results
Identify lofi scope
Produce lofi
Produce interaction flow chart
Walk through lofi; redesign
Produce high fidelity prototype
     Poster papers
Paper, pencils, and markers
Glue sticks and scissors
Post-it notes
Transparencies
low fidelity prototyping pearl pu EPFL
Which part of a software to prototype
low fidelity prototyping pearl pu EPFL
In reality
 Horizontal prototype
 Vertical
prototype
 You prototype most frequently
performed tasks from most important
users
Prototype until the rest of the tasks
become similar to what has been
prototyped
The decision to stop prototyping is to
ask yourself whether your major
personas will be able to walk through
it.
2
low fidelity prototyping pearl pu EPFL
Constructing the Paper Model of GUI
 Set a deadline
 don’t think too long - build it!
 Draw a window frame on large paper
Put different screen regions on cards
 Ready response for any user action
 Use photocopier to make many versions
   anything that moves, changes, appears/disappears
e.g., have those pull-down menus already made
Slide adapted from James Landay
low fidelity prototyping pearl pu EPFL
Interaction Flow Chart
   It is a diagram with directed arrows
denoting ordering and steps in user
interaction
Each node of the chart is a GUI
Building interaction flow charts for
main user tasks is part of paper
prototyping
3
low fidelity prototyping pearl pu EPFL
Example
 Interaction
Flow
Example
Example from Last Year: McInterface
  Linda Harjono, Saifon Obromsook, John
Wai
http://www.sims.berkeley.edu/courses/
is213/s01/projects/P2/
 Main idea:
 Main goals
   Walk up kiosk for McDonalds
Easy
Fast
Interaction Flow Example
Interaction Flow Example
Interaction Flow Example
4
5
Interaction
Flow
Example
low fidelity prototyping pearl pu EPFL
Interaction Flow Chart Example
   Some details missing from the
diagram
First branch not labeled correctly
Let’s complete the example
low fidelity prototyping pearl pu EPFL
How to do a walk through
The goal of a walk through is to
discover usability problems
Two methods
  Heuristic evaluation (see another teaching
notes)
Testing lowfi prototype by choosing
someone from a priority user group and
ask him to perform tasks described in
task scenarios.
  low fidelity prototyping pearl pu EPFL
Preparing for an informal test
 Select your participants
  understand background of intended users
low fidelity prototyping pearl pu EPFL
Conducting a Test
  Prepare scenarios that are
  Four testers (preferable)
important according to task analysis
write up a sequence of actions for each of
these tasks according to task scenarios
   Slide adapted from James Landay
facilitator - gives instructions & encourages
thoughts, opinions
computer - knows application logic & controls
it
always simulates the response, w/o explanation
observer(s) - take notes & recommendations
Typical session is approximately 1 hour
 preparation, the Slide
test,
debriefing
adapted
from James Landay
6
low fidelity prototyping pearl pu EPFL
Conducting a Test (cont.)
 Conducting a Test (cont.)
Test
 Debrief
  must be clear & detailed
facilitator keeps getting “output” from
participant
   facilitator hands out written task
scenarios to the user
  low fidelity prototyping pearl pu EPFL
  “What are you thinking right now?”, “Think
aloud”
fill out post-evaluation questionnaire
ask questions about parts you saw
problems on
gather impressions
give thanks
observe -> no “a-ha”, laugh, gape, etc.
Slide adapted from James Landay
Slide adapted from James Landay
low fidelity prototyping pearl pu EPFL
Evaluating Results
    what was important?
lots of problems in the same area?
Create a written report on findings
  Potential difficulties
Sort & prioritize observations
 low fidelity prototyping pearl pu EPFL
gives agenda for meeting on design
changes
Make changes & iterate
Interfaces with large focus on content
 Dynamic or static; both are ill-suited
 For search/database applications
    Use word processor for large sets of text
Have pre-planned searches (not very realistic)
Write up search results on the fly
 Maybe have a printer nearby that can
produced typed results
Bottom line: can only prototype the main
interaction this way; search needs to be
hooked up to really test the search mechanism
Slide adapted from James Landay
low fidelity prototyping pearl pu EPFL
Summary of advantages of Low-fi
 Takes only a few hours
     no expensive equipment needed
Can test multiple alternatives
Can change the design as you test
End
If users are trying to use the interface in
a way you didn’t design it – go with what
they think! Adapt!
Allows designers to work together
Slide adapted from James Landay
7