1. low fidelity prototyping pearl pu EPFL
Why Do We Prototype?
Low Fidelity UI Prototyping
 Get feedback from users faster
Part of the Human Computer Interaction Course Notes
 saves money
Dr. Pearl PU  Experiment with alternative designs
Human Computer Interaction Group
Institute for Core Computing Science  Fix problems before code is written
Faculty of Communication and Information Sciences
EPFL  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 low fidelity prototyping pearl pu EPFL
Fidelity in Prototyping Advantage of lowfi
 Cheap = less time and easier to change
 Fidelity refers to the level of detail  Quick feedback
 High fidelity ?
 More cycles of testing, more prototype
 prototypes look like the final product  Widely practiced in industry, even though it
 Low fidelity ? (Paper prototyping)
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 low fidelity prototyping pearl pu EPFL
How to do a paper prototyping Paper prototyping in architecture
 Main idea:  Paper models of a house before it’s
 Sketch out prototypes of the interface on built, so that habitants can “walk
paper through” it;
 Build interaction flow chart  Similarly, potential users can “walk
 Potential users “walk through” task through” task scenarios and critique
scenarios using the paper interface
on the UI
 A designer “plays computer”
 Change the design on-the-fly if helpful
1

2. low fidelity prototyping pearl pu EPFL low fidelity prototyping pearl pu EPFL
Lofi 6 steps Materials
 Review task analysis results  Poster papers
 Identify lofi scope  Paper, pencils, and markers
 Produce lofi  Glue sticks and scissors
 Produce interaction flow chart  Post-it notes
 Walk through lofi; redesign  Transparencies
 Produce high fidelity prototype
low fidelity prototyping pearl pu EPFL low fidelity prototyping pearl pu EPFL
Which part of a software to prototype In reality
 You prototype most frequently
Horizontal prototype performed tasks from most important
users
 Prototype until the rest of the tasks
become similar to what has been
Vertical prototyped
prototype  The decision to stop prototyping is to
ask yourself whether your major
personas will be able to walk through
it.
2

3. 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
 anything that moves, changes, appears/disappears
 Ready response for any user action
 e.g., have those pull-down menus already made
 Use photocopier to make many versions
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

4. Interaction
low fidelity prototyping pearl pu EPFL
Flow
Example Example
 Example from Last Year: McInterface
 Linda Harjono, Saifon Obromsook, John
Wai
 http://www.sims.berkeley.edu/courses/
is213/s01/projects/P2/
 Main idea:
 Walk up kiosk for McDonalds
 Main goals
 Easy
 Fast
Interaction Flow Example Interaction Flow Example
Interaction Flow Example
4

5. 5

6. Interaction
Flow
Example
low fidelity prototyping pearl pu EPFL low fidelity prototyping pearl pu EPFL
Interaction Flow Chart Example How to do a walk through
 Some details missing from the  The goal of a walk through is to
diagram discover usability problems
 First branch not labeled correctly  Two methods
 Let’s complete the example  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 low fidelity prototyping pearl pu EPFL
Preparing for an informal test Conducting a Test
 Select your participants  Four testers (preferable)
 understand background of intended users  facilitator - gives instructions & encourages
 Prepare scenarios that are thoughts, opinions
 important according to task analysis  computer - knows application logic & controls
it
 write up a sequence of actions for each of
 always simulates the response, w/o explanation
these tasks according to task scenarios
 observer(s) - take notes & recommendations
- Typical session is approximately 1 hour
Slide adapted from James Landay  preparation, the Slide adapted from James Landay
test, debriefing
6

7. low fidelity prototyping pearl pu EPFL low fidelity prototyping pearl pu EPFL
Conducting a Test (cont.) Conducting a Test (cont.)
 Test  Debrief
 facilitator hands out written task  fill out post-evaluation questionnaire
scenarios to the user  ask questions about parts you saw
 must be clear & detailed problems on
 facilitator keeps getting “output” from  gather impressions
participant  give thanks
 “What are you thinking right now?”, “Think
aloud”
 observe -> no “a-ha”, laugh, gape, etc.
Slide adapted from James Landay Slide adapted from James Landay
low fidelity prototyping pearl pu EPFL low fidelity prototyping pearl pu EPFL
Evaluating Results Potential difficulties
 Sort & prioritize observations  Interfaces with large focus on content
 what was important?  Dynamic or static; both are ill-suited
 lots of problems in the same area?  Use word processor for large sets of text
For search/database applications
Create a written report on findings


 Have pre-planned searches (not very realistic)
 gives agenda for meeting on design  Write up search results on the fly
changes  Maybe have a printer nearby that can
produced typed results
 Make changes & iterate  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