SlideShare a Scribd company logo
1 of 25
Download to read offline
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

More Related Content

What's hot

Developer's Guide to Marketing and Monetization of Windows Phone Apps
Developer's Guide to Marketing and Monetization of Windows Phone AppsDeveloper's Guide to Marketing and Monetization of Windows Phone Apps
Developer's Guide to Marketing and Monetization of Windows Phone Apps
Alan Mendelevich
 

What's hot (20)

Speed and Simplicity: Design and Usability for Multi-device Websites
Speed and Simplicity: Design and Usability for Multi-device WebsitesSpeed and Simplicity: Design and Usability for Multi-device Websites
Speed and Simplicity: Design and Usability for Multi-device Websites
 
Jan Kroon's talk @mdevcon 2012
Jan Kroon's talk @mdevcon 2012Jan Kroon's talk @mdevcon 2012
Jan Kroon's talk @mdevcon 2012
 
Appcelerator mobile. the doppelgänger to XPages
Appcelerator mobile. the doppelgänger to XPagesAppcelerator mobile. the doppelgänger to XPages
Appcelerator mobile. the doppelgänger to XPages
 
Mobile Usability
Mobile UsabilityMobile Usability
Mobile Usability
 
iOS design: a case study
iOS design: a case studyiOS design: a case study
iOS design: a case study
 
The New Era of (Non-) Discoverability
The New Era of (Non-) DiscoverabilityThe New Era of (Non-) Discoverability
The New Era of (Non-) Discoverability
 
The Next Generation of Flash User Experience
The Next Generation of Flash User ExperienceThe Next Generation of Flash User Experience
The Next Generation of Flash User Experience
 
Why Do Mobile Projects Fail?
Why Do Mobile Projects Fail?Why Do Mobile Projects Fail?
Why Do Mobile Projects Fail?
 
6 ways to refine iPhone and iPad Apps
6 ways to refine iPhone and iPad Apps6 ways to refine iPhone and iPad Apps
6 ways to refine iPhone and iPad Apps
 
Developer's Guide to Marketing and Monetization of Windows Phone Apps
Developer's Guide to Marketing and Monetization of Windows Phone AppsDeveloper's Guide to Marketing and Monetization of Windows Phone Apps
Developer's Guide to Marketing and Monetization of Windows Phone Apps
 
Silverlight won't save your user experience - you will!
Silverlight won't save your user experience - you will!Silverlight won't save your user experience - you will!
Silverlight won't save your user experience - you will!
 
7 User Experience Lessons from the iPhone (Introducing UX)
7 User Experience Lessons from the iPhone (Introducing UX)7 User Experience Lessons from the iPhone (Introducing UX)
7 User Experience Lessons from the iPhone (Introducing UX)
 
Csun 2016 inclusive design workshop
Csun 2016 inclusive design workshopCsun 2016 inclusive design workshop
Csun 2016 inclusive design workshop
 
Wireless Wednesdays: Part 1
Wireless Wednesdays: Part 1Wireless Wednesdays: Part 1
Wireless Wednesdays: Part 1
 
Adapting To Change (Owner Summit 2015)
Adapting To Change (Owner Summit 2015)Adapting To Change (Owner Summit 2015)
Adapting To Change (Owner Summit 2015)
 
How to be an Independent Mobile Dev by TJ Grant
How to be an Independent Mobile Dev by TJ GrantHow to be an Independent Mobile Dev by TJ Grant
How to be an Independent Mobile Dev by TJ Grant
 
Mobile-first, a quick introduction
Mobile-first, a quick introductionMobile-first, a quick introduction
Mobile-first, a quick introduction
 
Funsize Sprint School: Product Design Sprints Workshop
Funsize Sprint School: Product Design Sprints WorkshopFunsize Sprint School: Product Design Sprints Workshop
Funsize Sprint School: Product Design Sprints Workshop
 
iPhone Design Workshop
iPhone Design WorkshopiPhone Design Workshop
iPhone Design Workshop
 
10 Things Every PHP Developer Should Know About Machine Learning
10 Things Every PHP Developer Should Know About Machine Learning10 Things Every PHP Developer Should Know About Machine Learning
10 Things Every PHP Developer Should Know About Machine Learning
 

Viewers also liked

Viewers also liked (20)

Paper Prototyping
Paper PrototypingPaper Prototyping
Paper Prototyping
 
Introduction to Prototyping: What, Why, How
Introduction to Prototyping: What, Why, HowIntroduction to Prototyping: What, Why, How
Introduction to Prototyping: What, Why, How
 
APA Workshop: Writing a Research Paper
APA Workshop: Writing a Research PaperAPA Workshop: Writing a Research Paper
APA Workshop: Writing a Research Paper
 
Basics of Paper Writing and Publishing in TEL (JTEL 2013)
Basics of Paper Writing and Publishing in TEL (JTEL 2013)Basics of Paper Writing and Publishing in TEL (JTEL 2013)
Basics of Paper Writing and Publishing in TEL (JTEL 2013)
 
Ejemplo de paper prototyping
Ejemplo de paper prototypingEjemplo de paper prototyping
Ejemplo de paper prototyping
 
Let’s sketch!! Paper prototype
Let’s sketch!! Paper prototypeLet’s sketch!! Paper prototype
Let’s sketch!! Paper prototype
 
IFI7159 M4
IFI7159 M4IFI7159 M4
IFI7159 M4
 
Basics of research paper publishing
Basics of research paper publishingBasics of research paper publishing
Basics of research paper publishing
 
Low Fidelity Prototyping with Paper
Low Fidelity Prototyping with PaperLow Fidelity Prototyping with Paper
Low Fidelity Prototyping with Paper
 
Paper Prototyping
Paper PrototypingPaper Prototyping
Paper Prototyping
 
Rapid Prototyping Paper
Rapid Prototyping PaperRapid Prototyping Paper
Rapid Prototyping Paper
 
Paper Prototyping
Paper Prototyping Paper Prototyping
Paper Prototyping
 
UCD and low-fidelity prototyping
UCD and low-fidelity prototypingUCD and low-fidelity prototyping
UCD and low-fidelity prototyping
 
Introduction to prototyping
Introduction to prototypingIntroduction to prototyping
Introduction to prototyping
 
Episode 6 : How to write a great research paper
Episode 6 : How to write a great research paperEpisode 6 : How to write a great research paper
Episode 6 : How to write a great research paper
 
Paper Prototyping Workshop
Paper Prototyping WorkshopPaper Prototyping Workshop
Paper Prototyping Workshop
 
User Interface Prototyping - Low- and High-Fidelity Prototyping Today
User Interface Prototyping - Low- and High-Fidelity Prototyping TodayUser Interface Prototyping - Low- and High-Fidelity Prototyping Today
User Interface Prototyping - Low- and High-Fidelity Prototyping Today
 
PROTOTYPING
PROTOTYPINGPROTOTYPING
PROTOTYPING
 
Rapid prototyping seminar
Rapid prototyping seminarRapid prototyping seminar
Rapid prototyping seminar
 
Lecture 4: Human-Computer Interaction: Prototyping (2014)
Lecture 4: Human-Computer Interaction: Prototyping (2014)Lecture 4: Human-Computer Interaction: Prototyping (2014)
Lecture 4: Human-Computer Interaction: Prototyping (2014)
 

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

Inleiding tot CHI
Inleiding tot CHIInleiding tot CHI
Inleiding tot CHI
Erik Duval
 
User Experience Design: 5 Techniques for Creating Better Websites and Applica...
User Experience Design: 5 Techniques for Creating Better Websites and Applica...User Experience Design: 5 Techniques for Creating Better Websites and Applica...
User Experience Design: 5 Techniques for Creating Better Websites and Applica...
nForm User Experience
 
World Usability Day 2006 (Philippines)
World Usability Day 2006 (Philippines)World Usability Day 2006 (Philippines)
World Usability Day 2006 (Philippines)
gaboogle
 
OSCON 2007: Open Design, Not By Committee
OSCON 2007: Open Design, Not By CommitteeOSCON 2007: Open Design, Not By Committee
OSCON 2007: Open Design, Not By Committee
Ted Leung
 
[I3 d]04 interactivity
[I3 d]04 interactivity[I3 d]04 interactivity
[I3 d]04 interactivity
jylee_kgit
 

Similar to An agile approach to iPhone design: Paper prototyping + user testing (20)

Inleiding tot CHI
Inleiding tot CHIInleiding tot CHI
Inleiding tot CHI
 
Iteration and prototyping
Iteration and prototypingIteration and prototyping
Iteration and prototyping
 
Michael Kowalski
Michael KowalskiMichael Kowalski
Michael Kowalski
 
Inleiding tot chi
Inleiding tot chiInleiding tot chi
Inleiding tot chi
 
User Experience Design: 5 Techniques for Creating Better Websites and Applica...
User Experience Design: 5 Techniques for Creating Better Websites and Applica...User Experience Design: 5 Techniques for Creating Better Websites and Applica...
User Experience Design: 5 Techniques for Creating Better Websites and Applica...
 
Incorporating UX into Your Projects
Incorporating UX into Your ProjectsIncorporating UX into Your Projects
Incorporating UX into Your Projects
 
Architecture In An Agile World
Architecture In An Agile WorldArchitecture In An Agile World
Architecture In An Agile World
 
Speed and simplicity
Speed and simplicitySpeed and simplicity
Speed and simplicity
 
Scott mc cormick float mobile learning_prototyping strategy_mlearncon 2012
Scott mc cormick float mobile learning_prototyping strategy_mlearncon 2012Scott mc cormick float mobile learning_prototyping strategy_mlearncon 2012
Scott mc cormick float mobile learning_prototyping strategy_mlearncon 2012
 
The Challenge of Touchscreen Clutter - v2 - 9.26.2012
The Challenge of Touchscreen Clutter - v2 - 9.26.2012The Challenge of Touchscreen Clutter - v2 - 9.26.2012
The Challenge of Touchscreen Clutter - v2 - 9.26.2012
 
World Usability Day 2006 (Philippines)
World Usability Day 2006 (Philippines)World Usability Day 2006 (Philippines)
World Usability Day 2006 (Philippines)
 
Ux Meets Code Interaction Usability
Ux Meets Code Interaction UsabilityUx Meets Code Interaction Usability
Ux Meets Code Interaction Usability
 
Parents
ParentsParents
Parents
 
UX Design Project
UX Design ProjectUX Design Project
UX Design Project
 
OSCON 2007: Open Design, Not By Committee
OSCON 2007: Open Design, Not By CommitteeOSCON 2007: Open Design, Not By Committee
OSCON 2007: Open Design, Not By Committee
 
Effective prototyping (for Vermont Code Camp)
Effective prototyping (for Vermont Code Camp)Effective prototyping (for Vermont Code Camp)
Effective prototyping (for Vermont Code Camp)
 
Luidia eBeam Edge Intro June 2009
Luidia eBeam Edge Intro June 2009Luidia eBeam Edge Intro June 2009
Luidia eBeam Edge Intro June 2009
 
[I3 d]04 interactivity
[I3 d]04 interactivity[I3 d]04 interactivity
[I3 d]04 interactivity
 
Screen and Context: Usability in the Postdesktop World
Screen and Context: Usability in the Postdesktop WorldScreen and Context: Usability in the Postdesktop World
Screen and Context: Usability in the Postdesktop World
 
Usability Testing by Rajdeep Gupta, Misys
Usability Testing by Rajdeep Gupta, MisysUsability Testing by Rajdeep Gupta, Misys
Usability Testing by Rajdeep Gupta, Misys
 

More from Ginsburg Design

More from Ginsburg Design (9)

Improving Discoverability
Improving DiscoverabilityImproving Discoverability
Improving Discoverability
 
Wrangling Apps in the Smartphone Wild West (January 2011)
 Wrangling Apps in the Smartphone Wild West (January 2011) Wrangling Apps in the Smartphone Wild West (January 2011)
Wrangling Apps in the Smartphone Wild West (January 2011)
 
Wrangling Apps in the Smartphone Wild West
Wrangling Apps in the Smartphone Wild WestWrangling Apps in the Smartphone Wild West
Wrangling Apps in the Smartphone Wild West
 
Upfront User Research for iPhone/iPad Apps: Why bother?
Upfront User Research for iPhone/iPad Apps: Why bother?Upfront User Research for iPhone/iPad Apps: Why bother?
Upfront User Research for iPhone/iPad Apps: Why bother?
 
iPad eReader UX Review: iBooks, Kindle, Kobo
iPad eReader UX Review: iBooks, Kindle, KoboiPad eReader UX Review: iBooks, Kindle, Kobo
iPad eReader UX Review: iBooks, Kindle, Kobo
 
iPhone App UX Review: Gowalla vs. foursquare
iPhone App UX Review: Gowalla vs. foursquareiPhone App UX Review: Gowalla vs. foursquare
iPhone App UX Review: Gowalla vs. foursquare
 
iPhone App Design: A user-centered approach
iPhone App Design: A user-centered approachiPhone App Design: A user-centered approach
iPhone App Design: A user-centered approach
 
iPhone App UX Review: NY Times vs. USA Today
iPhone App UX Review: NY Times vs. USA TodayiPhone App UX Review: NY Times vs. USA Today
iPhone App UX Review: NY Times vs. USA Today
 
iPhone App UX Review: Urbanspoon vs. Yelp
iPhone App UX Review: Urbanspoon vs. YelpiPhone App UX Review: Urbanspoon vs. Yelp
iPhone App UX Review: Urbanspoon vs. Yelp
 

Recently uploaded

Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
panagenda
 
Structuring Teams and Portfolios for Success
Structuring Teams and Portfolios for SuccessStructuring Teams and Portfolios for Success
Structuring Teams and Portfolios for Success
UXDXConf
 

Recently uploaded (20)

WSO2CONMay2024OpenSourceConferenceDebrief.pptx
WSO2CONMay2024OpenSourceConferenceDebrief.pptxWSO2CONMay2024OpenSourceConferenceDebrief.pptx
WSO2CONMay2024OpenSourceConferenceDebrief.pptx
 
Overview of Hyperledger Foundation
Overview of Hyperledger FoundationOverview of Hyperledger Foundation
Overview of Hyperledger Foundation
 
State of the Smart Building Startup Landscape 2024!
State of the Smart Building Startup Landscape 2024!State of the Smart Building Startup Landscape 2024!
State of the Smart Building Startup Landscape 2024!
 
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
 
WebAssembly is Key to Better LLM Performance
WebAssembly is Key to Better LLM PerformanceWebAssembly is Key to Better LLM Performance
WebAssembly is Key to Better LLM Performance
 
Enterprise Knowledge Graphs - Data Summit 2024
Enterprise Knowledge Graphs - Data Summit 2024Enterprise Knowledge Graphs - Data Summit 2024
Enterprise Knowledge Graphs - Data Summit 2024
 
Microsoft CSP Briefing Pre-Engagement - Questionnaire
Microsoft CSP Briefing Pre-Engagement - QuestionnaireMicrosoft CSP Briefing Pre-Engagement - Questionnaire
Microsoft CSP Briefing Pre-Engagement - Questionnaire
 
Powerful Start- the Key to Project Success, Barbara Laskowska
Powerful Start- the Key to Project Success, Barbara LaskowskaPowerful Start- the Key to Project Success, Barbara Laskowska
Powerful Start- the Key to Project Success, Barbara Laskowska
 
Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...
Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...
Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...
 
The Metaverse: Are We There Yet?
The  Metaverse:    Are   We  There  Yet?The  Metaverse:    Are   We  There  Yet?
The Metaverse: Are We There Yet?
 
Syngulon - Selection technology May 2024.pdf
Syngulon - Selection technology May 2024.pdfSyngulon - Selection technology May 2024.pdf
Syngulon - Selection technology May 2024.pdf
 
A Business-Centric Approach to Design System Strategy
A Business-Centric Approach to Design System StrategyA Business-Centric Approach to Design System Strategy
A Business-Centric Approach to Design System Strategy
 
Structuring Teams and Portfolios for Success
Structuring Teams and Portfolios for SuccessStructuring Teams and Portfolios for Success
Structuring Teams and Portfolios for Success
 
Your enemies use GenAI too - staying ahead of fraud with Neo4j
Your enemies use GenAI too - staying ahead of fraud with Neo4jYour enemies use GenAI too - staying ahead of fraud with Neo4j
Your enemies use GenAI too - staying ahead of fraud with Neo4j
 
Long journey of Ruby Standard library at RubyKaigi 2024
Long journey of Ruby Standard library at RubyKaigi 2024Long journey of Ruby Standard library at RubyKaigi 2024
Long journey of Ruby Standard library at RubyKaigi 2024
 
Google I/O Extended 2024 Warsaw
Google I/O Extended 2024 WarsawGoogle I/O Extended 2024 Warsaw
Google I/O Extended 2024 Warsaw
 
Working together SRE & Platform Engineering
Working together SRE & Platform EngineeringWorking together SRE & Platform Engineering
Working together SRE & Platform Engineering
 
IESVE for Early Stage Design and Planning
IESVE for Early Stage Design and PlanningIESVE for Early Stage Design and Planning
IESVE for Early Stage Design and Planning
 
1111 ChatGPT Prompts PDF Free Download - Prompts for ChatGPT
1111 ChatGPT Prompts PDF Free Download - Prompts for ChatGPT1111 ChatGPT Prompts PDF Free Download - Prompts for ChatGPT
1111 ChatGPT Prompts PDF Free Download - Prompts for ChatGPT
 
TopCryptoSupers 12thReport OrionX May2024
TopCryptoSupers 12thReport OrionX May2024TopCryptoSupers 12thReport OrionX May2024
TopCryptoSupers 12thReport OrionX May2024
 

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

  • 1. An agile approach to iPhone design: Paper prototyping + user testing Suzanne Ginsburg, Principal suzanne@ginsburg-design.com Tuesday, April 21, 2009 1
  • 2. Thanks for your interest in these slides! Full-screen view is recommended for optimal viewing. Tuesday, April 21, 2009 2
  • 3. 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
  • 4. 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
  • 5. Approach Develop a paper prototype + Test prototype with prospective users 5 Tuesday, April 21, 2009 5
  • 6. 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
  • 7. 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
  • 8. 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
  • 9. 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
  • 10. 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
  • 11. 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
  • 12. 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
  • 13. iPhone Stencils: Graffletopia 13 Tuesday, April 21, 2009 13
  • 14. Pencil and Paper Prototype: Things iPhone App 14 Tuesday, April 21, 2009 14
  • 15. Next, User Testing 15 Tuesday, April 21, 2009 15
  • 16. 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
  • 17. 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
  • 18. Usability Testing Equipment: Fancy Lab 18 Tuesday, April 21, 2009 18
  • 19. 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
  • 20. 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
  • 21. 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
  • 22. 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
  • 23. 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
  • 24. 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
  • 25. email: suzanne@ginsburg-design.com twitter: @suzanneginsburg Tuesday, April 21, 2009 25