Fast & easy ways to incorporate paper prototyping and user testing into the iPhone app design process.
Text of An agile approach to iPhone design: Paper prototyping + user testing
An agile approach to iPhone design: Paper prototyping + user
testing Suzanne Ginsburg, Principal [email protected]
Tuesday, April 21, 2009 1
Thanks for your interest in these slides! Full-screen view is
recommended for optimal viewing. Tuesday, April 21, 2009 2
About Me More than thirteen years of experience designing
software Six years in the Communities & Communications group at
Yahoo! Three years consulting on my own (startups, in-house, design
agencies) M.S. in Information Management from UC Berkeleys iSchool
Certified Scrum Master; participated in Agile pilot at Yahoo! 3
Tuesday, April 21, 2009 3
Project Background A few months ago, I started sketching ideas
for an events related iPhone app Before investing time & money
on development, I wanted to get user input on the concept. Were
prospective users interested in the idea? What features &
functionality would make the service most compelling? How would
they respond to the presence of ads? Did the high-level information
architecture make sense? 4 Tuesday, April 21, 2009 4
Approach Develop a paper prototype + Test prototype with
prospective users 5 Tuesday, April 21, 2009 5
What is a Paper Prototype? Format can be hand-drawn sketches or
screenshot printouts Fast & cheap way to incorporate user
feedback into designs. Developer/designer plays the role of
computer & simulates how the UI will behave Posted by
typeweight on Flickr 6 Tuesday, April 21, 2009 6
What is a Paper Prototype? (contd) When compared to
high-fidelity testing, Jared Spool, the founder of User Interface
Engineering, describes it the following way: We think of paper
prototyping as the course-grain sandpaper and electronic-version
testing as the fine grain. Once weve used the paper prototypes to
validate what each screen contains and how it will work, we then
move over to the electronic version to fine tune the look and feel.
7 Tuesday, April 21, 2009 7
What are the benefits? Design changes can be made on the fly
during usability tests Usability participants may be more
comfortable being critical of a paper prototype Making big
conceptual changes early on will save time & money Posted by
typeweight on Flickr 8 Tuesday, April 21, 2009 8
What are the benefits? (contd) The most common estimate is that
its 100 times cheaper to make a change before any code has been
written than it is to wait until after the implementation is
complete. -- Jakob Nielsen Testing ticketing system in Oslo; Posted
by etunko on Flickr 9 Tuesday, April 21, 2009 9
What types of projects are suitable? Consider the project
stage: Great for testing a completely new design Also works for
changing parts of an existing design If you want to test an
existing product, you might as well test the real thing And the
project domain: Works well for most productivity applications Good
for some aspects of content-rich sites Can work for gaming; highly
dependent on game type 10 Tuesday, April 21, 2009 10
What types of issues can you explore? Concepts. Do they
understand the key concepts? Terminology. Do they understand the
terms in the UI? Navigation. Does the flow match what users expect?
Content. Does it provide the right level of information? Page
layout. Is content organized as users expect? Functionality. What
additional features are desired? Harder to address: Technical
feasibility; download time or other response times; scrolling,
swiping; colors Posted by timo on Flickr and fonts 11 Tuesday,
April 21, 2009 11
What tools can you use to build paper prototypes? Options are
endless: Pen + paper: Combine with stickies, markers, & other
readily available office supplies. Sketching applications:
Omnigraffle, BalsamIQ, Visio (Note: Omni & BalsamIQ have nice
iPhone stencils.) iPhone sketch created with Balsamiq 12 Tuesday,
April 21, 2009 12
iPhone Stencils: Graffletopia 13 Tuesday, April 21, 2009
13
Pencil and Paper Prototype: Things iPhone App 14 Tuesday, April
21, 2009 14
Next, User Testing 15 Tuesday, April 21, 2009 15
Paper Prototype: Sample Usability Timeline Planning Recruiting
Study Findings 2 days 3 days 1-2 days 1 day This one-week timeline
is very aggressive & has a number of built-in assumptions:
Planning: Assumes that the prototype has already been developed.
Recruiting: Assumes recruiting requirements are relatively
straightforward. Findings: Assumes that quick findings are
sufficient for team. Note: If you work with an agency or rent lab
space, expect these times to double at minimum. Costs will also be
much higher (recruiting + lab can cost $5000 for 2 days;
facilitation and analysis are separate line items) 16 Tuesday,
April 21, 2009 16
Paper Prototype: Usability Planning Planning Recruiting Study
Findings 2 days 3 days 1 day 1 day Your test plan should include:
Purpose Test environment/equipment User profile Test monitor roles
Evaluation measures Method (test design) Report contents and
presentation Task list List is from, Handbook of Usability Testing,
Jeffrey Rubin Templates can be found at Society for Technical
Communication:
http://www.stcsig.org/usability/resources/toolkit/toolkit.html 17
Tuesday, April 21, 2009 17
Usability Testing Equipment: DIY Style If youre planning to do
testing in-house, here are some tools for recording your session
Voice: iPhone has plenty of recording apps (e.g. iTalk from
Griffin) Photos: Bring camera to capture artifacts and take
participant photo (with permission) Video: Valuable if you need to
report back to team members or executives (also get permission)
Elmo: Used to project paper onto monitor for viewing &
recording; these can be rented. Handy dandy Elmo Or you can go the
basic pen & paper route. 19 Tuesday, April 21, 2009 19
Paper Prototype: Usability Recruiting Planning Recruiting Study
Findings 2 days 3 days 1 day 1 day Recruiting tips: Goal is to find
participants that meet your user profile (5-8 recommended)
Characteristics to consider may include: age, gender, education,
occupation, computer experience, product experience. Can use
outside agency ($200/head) or do it yourself. For my project:
Recruited iPhone users who regularly attend certain local events
and had downloaded at least one iPhone app. Created screener with
SurveyMonkey; posted on Craigs List for $75. Participants were
offered $50 for one hour; over 200 responses in one day. 20
Tuesday, April 21, 2009 20
Paper Prototype: Usability Study Planning Recruiting Study
Findings 2 days 3 days 1 day 1 day Study Tips: Facilitating
sessions is harder than it looks; if you cant do it, hire someone.
Use the think aloud protocol; the goal is to listen and observe,
not demo your product. For my project, participant sessions were
divided into 3 parts: Review participant background (10 minutes):
Go over screener responses and 1. delve deeper into areas of
interest. Scenario based tasks (40 minutes): Evaluate user
experience by asking participants 2. to complete tasks with the
paper prototype. Wrap-up interview (10 minutes): Ask participant
about their overall impressions of 3. the product. (e.g. How would
you describe this product to a friend?) 21 Tuesday, April 21, 2009
21
Paper Prototype: Usability Findings Planning Recruiting Study
Findings 2 days 3 days 1 day 1 day Tips on study findings: Format
will depend on your companys goals & needs; some companys needs
are met with a quick findings, others may need a detailed report
with video clips. Some top findings from my project: Overall:
Participants liked the concept and would use it if free. (Ads were
OK) Navigation : Understood tab structure & navigation between
events. Content: Wanted additional info on list view and detail
view (e.g. text reviews instead of ratings alone). Web Site vs.
iPhone: Some participants expected the app to have a sister web
site; thought certain tasks were more appropriate for desktop. 22
Tuesday, April 21, 2009 22
What I didnt learn While the paper prototype study was
incredibly helpful in evaluating the concept, there are many
aspects of the user experience that werent tested (e.g., size of
targets, scrolling, swiping) As soon as we have a working
prototype, the goal is to do another round of usability testing
with prospective users. 23 Tuesday, April 21, 2009 23
References & Additional Reading Marc Rettig, Prototyping
for Tiny Fingers, Communications of the ACM, April 1994 Jakob
Nielsen, Paper Prototyping: Getting user data before you code,
http:// www.useit.com/alertbox/20030414.html Jared Spool, Looking
back at 16 years of paper prototyping, http://www.uie.com/
articles/looking_back_on_paper_prototyping/ Carolyn Snyder, Using
Paper Prototypes to Manage Risk, http://www.uie.com/
articles/prototyping_risk/ Matthew Klee, Five Paper Prototyping
Tips, http://www.uie.com/articles/ prototyping_tips/ 24 Tuesday,
April 21, 2009 24
email: [email protected] twitter: @suzanneginsburg
Tuesday, April 21, 2009 25