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
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