User Experience Design & Paper Prototyping

User Experience Design & Paper Prototyping
User Experience Design & Paper Prototyping ILONA POSNER User Experience & Usability Consultant www.ilonaposner.com Mobile Accelerator Program (MAP) Mobile Experience InnovaJon Centre (MEIC) OCADU, Toronto, ON February 14, 2013 ILONA POSNER © 2013 1
Bio -‐ ILONA POSNER User Experience & Usability Consultant •  Industries: Telecom, Financial, Web, Mobile, SoTware, Hardware, Healthcare, TransportaJon, EducaJon •  Clients: AMD, Autodesk, Apple, Bell, CIBC, DB, MicrosoT, Pitney Bowes, LA Metro Transit Authority, Human Factors InternaJonal, NaJonal Research Council of Canada, Canada Health Infoway, CIBC, RBC, ScoJa, TD, Visa, & Yahoo! •  Teaching: University of Toronto, Canadian Film Centre, OCADU, Professional Development Courses •  Research: University of Toronto, Computer Science, Human Computer InteracJon, Dynamic Graphics Project •  Educa=on: M.Sc. & B.Sc. Computer Science, U. of Toronto ILONA POSNER © 2013 2
Points of View “A point of view is worth 80 points of IQ.” -‐ Alan Kay “You are NOT the User!” ILONA POSNER © 2013 3 Source www.openmuseum.org/objet/show/1835
Keyhole Impact “I am NOT the User!” ILONA POSNER © 2013 4 Source hfp://s125.beta.photobucket.com/user/alongway99/media/Halloween%20AnimaJons/Scary%20Eye%20AnimaJons/EyeLooksKeyhole.gif.html?sort=4&o=47
History of User Experience •  Human Factors & Ergonomics •  Human Computer InteracJon •  Usability •  User Experience ILONA POSNER © 2013 5
1940’s ILONA POSNER © 2013 6
And Now… ILONA POSNER © 2013 9
Human Impact of Technology Human Impact Devices ApplicaJons Input forms Features InformaJon Time of use Dependence Interdependence Sociability Environmental impact Human Capacities ILONA POSNER © 2013 10
What is User Experience? Interna=onal Standards Organiza=on •  ISO defines user experience as "a person's percep=ons and responses that result from the use or an=cipated use of a product, system or service". So, user experience is subjec=ve and focuses on the use. •  The addiJonal notes for the ISO definiJon explain that user experience includes all the users' emo=ons, beliefs, preferences, percep=ons, physical and psychological responses, behaviors and accomplishments that occur before, during and aMer use. The notes also list the three factors that influence user experience: system, user and the context of use. •  Note 3 of the standard hints that usability addresses aspects of user experience, e.g. "usability criteria can be used to assess aspects of user experience". Unfortunately, the standard does not go further in clarifying the relaJon between user experience and usability. Clearly, the two are overlapping concepts, with usability including pragma=c aspects (geNng a task done) and user experience focusing on users’ feelings stemming both from pragma=c and hedonic aspects of the system. ISO FDIS 9241-‐210:2009. Ergonomics of human system interacJon -‐ Part 210: Human-‐centered design for interacJve systems (formerly known as 13407). InternaJonal OrganizaJon for StandardizaJon (ISO). Switzerland. hfp://en.wikipedia.org/wiki/User_experience ILONA POSNER © 2013 11
User Experience Everything that the user sees, hears, & touches! Share Customize ILONA POSNER © 2013 12
** Balloon Image ** ILONA POSNER © 2013 13
User Experience = Product ILONA POSNER © 2013 14
User Experience = Brand ILONA POSNER © 2013 15
User Experience UX Honeycomb, Peter Moreville ILONA POSNER © 2013 16
Buying Pop with a Cell Phone IDEO researchers test i-‐mode leading edge mobile services plavorm, 2003 Bill Moggridge, Designing InteracJons, February 2, 2007 lecture by Bill Moggridge for the Stanford University Human Computer InteracJon Seminar (CS 547). hfp://www.youtube.com/watch?v=kVkQYvN4_HA ILONA POSNER © 2013 17
User Experience Example … hfp://www.switched.com/2010/12/28/aol-‐free-‐trial-‐cds-‐cost-‐300-‐million/ ILONA POSNER © 2013 18
UX Problem ILONA POSNER © 2013 19
Cost of UX Problem •  Bush won by 537 of 5.8 million votes •  Buchanan 5x > votes in Palm Beach •  19,120 ballots registered 2 votes, 20,000 disqualified ballots •  Law suit claimed: “Ballots were decepJve, misleading, and confusing.” •  Results delayed 37 days! Nov 7 -‐ Dec 13 hfp://costofwar.com/ ILONA POSNER © 2013 20
How to Maximize UX? ILONA POSNER © 2013 21
Trinity for Success Users Business Technology ILONA POSNER © 2013 22
Research Focus Problem Space -‐ Environment -‐ Market -‐ LegislaJon Users Business Users -‐ Goals, Needs -‐ AcJviJes, Tasks -‐ Vision & Goals -‐ Requirements -‐ Requirements -‐ CompeJJon Business ? Technology Technology -‐ Constraints -‐ Requirements ILONA POSNER © 2013 23
UX Success Stories Mazda Miata, 1989 -‐ present ILONA POSNER © 2013 24
$300 Million Bufon eCommerce website changed one bufon label ✗ REGISTER CONTINUE ✓ + 45% sales up aTer renaming of bufon & removal of forced registraJon + $300 Million/year revenue Source: www.uie.com/ar,cles/three_hund_million_bu(on ILONA POSNER © 2013 25
$12 Million – OpJonal Field •  Expedia.com makes $12 Million profit, aTer removing opJonal field “Company” from online purchase form •  Prior, customers who clicked the Buy Now did not complete transacJons… Source: hfp://www.silicon.com/management/sales-‐and-‐markeJng/2010/11/01/ expedia-‐ on-‐how-‐one-‐extra-‐data-‐field-‐can-‐cost-‐12m-‐39746554/ ILONA POSNER © 2013 26
iPod vs Zune ILONA POSNER © 2013 27
How to Maximize UX? ILONA POSNER © 2013 28
Five D’s of User Experience Design Discover Deploy Define Develop Design ILONA POSNER © 2013 29
Five D’s of DISCOVER DEFINE DESIGN DEVELOP DEPLOY !"#$%&##' Business stakeholder interviews Business objectives Review concepts & designs often Business goals, mission, vision Market Positioning Attend usability testing sessions Attend usability testing sessions Monitor usage & metrics Concept Success metrics Future features list UX Design Product SWOT Analysis Marketing Mix(four P's) Market Positioning Market Segmentation Demographic Research Design Guidelines / Standards? ()*+",-' Product reports & surveys Concept prototype/video Review concepts & designs often Critical incident analysis Project definition/Concept Attend usability testing sessions Attend usability testing sessions Monitor usage & metrics Weblogs & analytics Deliverables defined Future features list Competitive Analysis Use cases Quantitative Research Initial design exploration Qualitative Research Visualization Expert heuristic evaluation Flowchart (tasks) Design research Success metrics -&,.%*/*01' Current technology used Technical requirements !"#$%&'()*+,+-.&-#(/$0&(#((+1$( DEVELOP with input from UX SUPPORT deployed product Limitation of old technology Success metrics 2#3+#4&51$5#6-(&7&%#(+0$(&18#$ !"#$%&'()*+,+-.&-#(/$0&(#((+1$( Opportunities for new tech Research tech constraints 2$#"3/'+&#$0% Brand & Design Guidelines Develop Strategy, explore look & Design Direction, agree on chosen Style Guide - Pixel placements feel direction definition Frames of reference, analagous Generate Initial Ideas, style frames, Iterations of Hi-Fidelity Designs Graphic Production - Icons, examples initial concepts, mock-ups before user testing graphics, page elements Future Design Direction Developer Toolkit - Examples, sample code, wiki THESE ABOVE MAY NEED TO HAPPEN SOONER!?!? "#&)'&4(&)$&%,&'5'"#3!$/$-1 Business stakeholder interviews Concept prototype/video Call centre reports User stories Brainstorm concepts & metaphors Work closely with development User Surveys User community feedback User profiles Modules requirements & designs Beware: Last minute design changes Monitor social networks & user done without UX Input communities Field studies Usability goals & objectives Screen flow, functions, fields Field studies of actual use User surveys User performance requirements Navigation/site map User interviews User experience goals Review early design concepts Conduct heuristic evaluations of Usage metrics, & performance (including graphic treatment) evolving product measurements Expert heuristic evaluation Persona's Prototypes Low-Fidelity (multiples) Usability test evolving product as Future features list soon as possible Usability testing current product Storyboarding Wireframes Low-Fidelity Confirm success metrics and (multiples) objectives are being met Design research User scenarios Usability Test Low-Fidelity Prototypes & Wireframes Task Analysis Prototypes High-Fidelity (includes Final Usability Testing before graphic treatment) Deployement Competitive Analysis Success metrics Detailed Designs Quantitative Research Usability Test Designs & High-Fi Project Process Debrief & Lessons Prototypes Learned Qualitative Research Update Design Guidelines Task Analysis Update detailed designs & functional specifications for development User Goal Analysis Document Design Rationale Update Design Guidelines/Standards ILONA POSNER © 2013 Five D’s of UX Design – Discover, Define, Design, Develop, Deploy ILONA POSNER © 2013 30
hfp://www.uxmafers.com/mt/archives/2011/09/images/EffecJveUIJourneyMapExample.jpg Customer Journey ILONA POSNER © 2013 31
Vision ILONA POSNER © 2013 32
Samsung vs iPhone Comparison -‐ Memo ILONA POSNER © 2013 Samsung, RelaJve EvaluaJon Report on S1, iPhone, Product Engineering Team, SW VefiricaJon Group March 2, 2010 33 PlainJff’s Exhibit No. 44, United States District Court, Northern District of California, Apple Inc. v. Samsung Elecs.
iTunes Usability Challenges hfp://www.nngroup.com/arJcles/disrupJve-‐workflow-‐design/ ILONA POSNER © 2013 34
iTunes Usability Challenges ILONA POSNER © 2013 35
iTunes User Experience Challenges ILONA POSNER © 2013 36
User Research ILONA POSNER © 2013 37
360 Degree View of Customer •  Call centre •  Field Studies •  Customer support emails •  Interviews •  User forums •  Surveys •  AnalyJcs •  Diary studies •  Web logs •  Focus groups •  3rd party review sites •  Card sorJng •  Usability tesJng Lean UX -‐ Applying Lean Principles to Improve User Experience, Jeff Gothelf & Josh Seiden, 2013 ILONA POSNER © 2013 38
User Research ObservaJons Interviews QuesJonnaires ILONA POSNER © 2013 39
Example: Research QuesJon Research QuesJon: What is the weather? How would you conduct this research? List several different ways you could try to answer this quesJon? ILONA POSNER © 2013 40
Example: Weather 1 ILONA POSNER © 2013 41
Example: Weather 2 ILONA POSNER © 2013 42
ObservaJons or Field Studies ILONA POSNER © 2013 43
Field Study ILONA POSNER © 2013 44
Field Studies ✗ I would use a drop-down menu rather than using I find it difficult to keep track of my knitting patterns. ✓ check boxes. ILONA POSNER © 2013 45
Nokia Mobile Phone Study Metro car CHI 2005 ILONA POSNER © 2013 46
Wells Fargo Mobile Research Answerlab.com & Wells Fargo Research PresentaJon, UPA 2011 ILONA POSNER © 2013 47
Users’ Profiles •  Demographics –  Age, gender, family, educaJon, job, HHI, technology, geography, language, culture, preferences, etc… •  Behavior paferns –  Where, when, how, why ILONA POSNER © 2013 48
Personas Persona A hypotheJcal user archetype used throughout design How Compiled from ethnographic interviews with real people Defined by goals, moJvaJons, behaviors, of real target users Why Designing for archetype can saJsfy bigger user group Helps focus on users & context, assist in decision-‐ making & communicaJon www.cooper.com/newslefers/2002_02 ILONA POSNER © 2013 49
Persona Types Primary If the design fails for the primary persona then the product is a failure Secondary An, •  Examples: –  Extreme Ed, CauJous Carl, Businessman Brad, Mobile Mike, Mainstream Mary ILONA POSNER © 2013 50
Build -‐ Prototypes Early Design Late Design Development Costs of Making Changes: $1 $10 $100 ILONA POSNER © 2013 51
Prototype PalmPilot Bill Buxton, Sketching User Experiences, 2007 ILONA POSNER © 2013 52
Physical Device hfp://www.sketchingtomorrow.com/wp-‐content/uploads/2010/06/cardboard.jpg ILONA POSNER © 2013 53
InteracJve Paper Prototype hfp://graphics.csail.mit.edu/classes/6.893/F03/PaperPrototypePhotos/pic2_0018.JPG ILONA POSNER © 2013 54
Prototype of GPS System ILONA POSNER © 2013 55
Mobile Phone Paper Prototypes www.liliamanguy.com/iBuyRight_webdocs/ www.nngroup.com/reports/prototyping/tesJng_handheld.jpg ILONA POSNER © 2013 56
Paper in Screen Prototype hfp://uxmag.com/arJcles/paper-‐in-‐screen-‐prototyping ILONA POSNER © 2013 57
Paper Prototyping “Without paper prototyping these decisions would likely have taken 6 to 12 months longer.” “85% of usability practitioners find Paper Prototyping useful & essential.” “Any mid-sized design project will probably get an ROI of several thousand percent from following the advice in this book.” Jakob Nielsen www.paperprototyping.com © ILONA POSNER, 2011 58
Paper Prototype Design Exercise ILONA POSNER © 2013 59
Usability TesJng – Kids Using Rotary Phone hfp://youtu.be/j6ArmonNCi8 ILONA POSNER © 2013 60
UX TesJng Myths Hard Expensive Time Consuming ILONA POSNER © 2013 61
Lean UX Declare AssumpJons Create Minimal Viable Product (MVP) Run an Experiment (GOOB) Feedback & Research (Pivot) Lean UX -‐ Applying Lean Principles to Improve User Experience, Jeff Gothelf & Josh Seiden, 2013 ILONA POSNER © 2013 62
Wizard of Oz Technique ParJcipants’ Roles • User(s) • Facilitator • Computer • Observer(s) ILONA POSNER © 2013 63
User Test  Product Demo ILONA POSNER © 2013 64
Usability TesJng of Paper Prototypes “Debugging before wriJng any code!” Layout Workflow Terminology Requirements Content Help ILONA POSNER © 2013 65
All Technology is User Tested! The only ques=ons are: When? By Whom? At What Cost!? ILONA POSNER © 2012 013 66

Check these out next

User Experience Design & Paper Prototyping

Recommended

More Related Content

Slideshows for you(20)

Similar to User Experience Design & Paper Prototyping(20)

More from Ilona Posner(6)

Recently uploaded(20)

User Experience Design & Paper Prototyping