An agile approach to iPhone design:  Paper prototyping + user testing
Upcoming SlideShare
Loading in...5
×
 

An agile approach to iPhone design: Paper prototyping + user testing

on

  • 25,037 views

Fast & easy ways to incorporate paper prototyping and user testing into the iPhone app design process.

Fast & easy ways to incorporate paper prototyping and user testing into the iPhone app design process.

Statistics

Views

Total Views
25,037
Views on SlideShare
23,656
Embed Views
1,381

Actions

Likes
102
Downloads
1,084
Comments
6

26 Embeds 1,381

http://www.iphoneuxreviews.com 927
http://www.slideshare.net 91
http://www.stile.ch 70
http://arslanyard.blogbus.com 62
http://www.userspots.com 56
http://uxthink.wordpress.com 38
http://paper.li 25
http://esouillat.wordpress.com 24
http://meichih.wordpress.com 21
http://www.digitechnobytes.com 21
http://www.touchytalk.com 13
http://www.e-presentations.us 12
http://translate.googleusercontent.com 3
http://web.archive.org 3
http://www.linkedin.com 2
https://uxthink.wordpress.com 2
http://www.blogger.com 2
http://www.blogbus.com 1
http://feeds.feedburner.com 1
http://stile.ch 1
http://www.leadlms.com.sg 1
http://www.twylah.com 1
http://localhost 1
http://us-w1.rockmelt.com 1
http://mobilenthu.tumblr.com 1
http://www.cleeki.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • WOW! Very informative article, thx
    Are you sure you want to
    Your message goes here
    Processing…
  • Superb. App in Seconds would have come in handy for usability testing I'm sure. It's so easy to get prototypes onto a real live iPhone :) http://www.appinseconds.com
    Are you sure you want to
    Your message goes here
    Processing…
  • Check out Apple's New iPod nano with Multi-Touch Product Review
    http://www.slideshare.net/Zanura/i-pod-nano-multi-touch-review
    Are you sure you want to
    Your message goes here
    Processing…
  • Thanks for sharing. Great presentation!

    http://www.baptemeair.com/
    Are you sure you want to
    Your message goes here
    Processing…
  • very helpful presentation thank you
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

An agile approach to iPhone design:  Paper prototyping + user testing An agile approach to iPhone design: Paper prototyping + user testing Presentation Transcript

  • An agile approach to iPhone design: Paper prototyping + user testing Suzanne Ginsburg, Principal suzanne@ginsburg-design.com 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 Berkeley’s 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? (cont’d) 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 we’ve 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? (cont’d) “The most common estimate is that it’s 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: Fancy Lab 18 Tuesday, April 21, 2009 18
  • Usability Testing Equipment: DIY Style If you’re 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 Craig’s 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 can’t 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 company’s goals & needs; some company’s 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 didn’t learn • While the paper prototype study was incredibly helpful in evaluating the concept, there are many aspects of the user experience that weren’t 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: suzanne@ginsburg-design.com twitter: @suzanneginsburg Tuesday, April 21, 2009 25