user experience design & paper prototyping
Post on 30-Nov-2014
2.106 Views
Preview:
DESCRIPTION
TRANSCRIPT
User Experience Design & Paper Prototyping
ILONA POSNER User Experience & Usability Consultant
www.ilonaposner.com
1 ILONA POSNER © 2013
Mobile Accelerator Program (MAP) Mobile Experience InnovaJon Centre (MEIC)
OCADU, Toronto, ON
February 14, 2013
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 2 ILONA POSNER © 2013
Points of View
“A point of view is worth 80 points of IQ.” -‐ Alan Kay
3
“You are NOT the User!”
ILONA POSNER © 2013
Source www.openmuseum.org/objet/show/1835
Keyhole Impact
4
“I am NOT the User!” ILONA POSNER © 2013
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
1950’s
ILONA POSNER © 2013 7
1980’s
ILONA POSNER © 2013 8
And Now…
ILONA POSNER © 2013 9
Human Impact of Technology
Devices ApplicaJons Input forms Features InformaJon Time of use Dependence Interdependence Sociability Environmental impact
Human Impact
Human Capacities
10 ILONA POSNER © 2013
What is User Experience?
11 ILONA POSNER © 2013
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
User Experience Everything that the user sees, hears, & touches!
12
Share
Customize
ILONA POSNER © 2013
** Balloon Image **
13 ILONA POSNER © 2013
User Experience = Product
ILONA POSNER © 2013 14
User Experience = Brand
ILONA POSNER © 2013 15
User Experience
ILONA POSNER © 2013 16
UX Honeycomb, Peter Moreville
Buying Pop with a Cell Phone
IDEO researchers test i-‐mode leading edge mobile services plavorm, 2003
ILONA POSNER © 2013 17
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
User Experience Example …
18 ILONA POSNER © 2013
hfp://www.switched.com/2010/12/28/aol-‐free-‐trial-‐cds-‐cost-‐300-‐million/
UX Problem
19 ILONA POSNER © 2013
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/
20 ILONA POSNER © 2013
How to Maximize UX?
ILONA POSNER © 2013 21
Trinity for Success
Users
Business Technology
22 ILONA POSNER © 2013
Research Focus
Users
Business
Technology
23
Business -‐ Vision & Goals -‐ Requirements -‐ CompeJJon
Users -‐ Goals, Needs -‐ AcJviJes, Tasks -‐ Requirements
Technology -‐ Constraints -‐ Requirements
Problem Space -‐ Environment -‐ Market -‐ LegislaJon
?
ILONA POSNER © 2013
UX Success Stories
ILONA POSNER © 2013 24
Mazda Miata, 1989 -‐ present
$300 Million Bufon eCommerce website changed one bufon label
+ 45% sales up aTer renaming of bufon & removal of forced registraJon
+ $300 Million/year revenue
REGISTER CONTINUE ✗ ✓
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
ILONA POSNER © 2013 29
Discover
Define
Design Develop
Deploy
Five D’s of UX Design
ILONA POSNER © 2013 30
DISCOVER DEFINE DESIGN DEVELOP DEPLOY
!"#$%&##'Business stakeholder interviews Business objectives Review concepts & designs oftenBusiness goals, mission, vision Market Positioning Attend usability testing sessions Attend usability testing sessions Monitor usage & metricsConcept Success metrics Future features listProduct SWOT AnalysisMarketing Mix(four P's)Market PositioningMarket SegmentationDemographic ResearchDesign Guidelines / Standards?
()*+",-'Product reports & surveys Concept prototype/video Review concepts & designs oftenCritical incident analysis Project definition/Concept Attend usability testing sessions Attend usability testing sessions Monitor usage & metricsWeblogs & analytics Deliverables defined Future features listCompetitive Analysis Use casesQuantitative Research Initial design explorationQualitative Research VisualizationExpert heuristic evaluation Flowchart (tasks) Design research Success metrics
-&,.%*/*01'Current technology used Technical requirements !"#$%&'()*+,+-.&-#(/$0&(#((+1$( DEVELOP with input from UX SUPPORT deployed productLimitation of old technology Success metrics 2#3+#4&51$5#6-(&7&%#(+0$(&18#$ !"#$%&'()*+,+-.&-#(/$0&(#((+1$(Opportunities for new techResearch tech constraints
2$#"3/'+&#$0%Brand & Design Guidelines Develop Strategy, explore look &
feelDesign Direction, agree on chosen direction
Style Guide - Pixel placements definition
Frames of reference, analagous examples
Generate Initial Ideas, style frames, initial concepts, mock-ups
Iterations of Hi-Fidelity Designs before user testing
Graphic Production - Icons, graphics, page elements
Future Design Direction Developer Toolkit - Examples, sample code, wiki
THESE ABOVE MAY NEED TO HAPPEN SOONER!?!?
"#&)'&4(&)$&%,&'5'"#3!$/$-1Business stakeholder interviews Concept prototype/videoCall 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 done without UX Input
Monitor social networks & user communities
Field studies Usability goals & objectives Screen flow, functions, fields Field studies of actual useUser surveys User performance requirements Navigation/site mapUser interviews User experience goals Review early design concepts
(including graphic treatment)Conduct heuristic evaluations of evolving product
Usage metrics, & performance measurements
Expert heuristic evaluation Persona's Prototypes Low-Fidelity (multiples) Usability test evolving product as soon as possible
Future features list
Usability testing current product Storyboarding Wireframes Low-Fidelity (multiples)
Confirm success metrics and objectives are being met
Design research User scenarios Usability Test Low-Fidelity Prototypes & Wireframes
Task Analysis Prototypes High-Fidelity (includes graphic treatment)
Final Usability Testing before Deployement
Competitive Analysis Success metrics Detailed DesignsQuantitative Research Usability Test Designs & High-Fi
PrototypesProject Process Debrief & Lessons Learned
Qualitative Research Update Design Guidelines
Task Analysis Update detailed designs & functional specifications for development
User Goal Analysis Document Design RationaleUpdate Design Guidelines/Standards
ILONA POSNER © 2013 Five D’s of UX Design – Discover, Define, Design, Develop, Deploy
Customer Journey
ILONA POSNER © 2013 31
hfp://www.uxmafers.com/mt/archives/2011/09/images/EffecJveUIJourneyMapExample.jpg
Vision
ILONA POSNER © 2013 32
Samsung vs iPhone Comparison -‐ Memo
ILONA POSNER © 2013 33 Samsung, RelaJve EvaluaJon Report on S1, iPhone, Product Engineering Team, SW VefiricaJon Group March 2, 2010 PlainJff’s Exhibit No. 44, United States District Court, Northern District of California, Apple Inc. v. Samsung Elecs.
iTunes Usability Challenges
ILONA POSNER © 2013 34
hfp://www.nngroup.com/arJcles/disrupJve-‐workflow-‐design/
iTunes Usability Challenges
ILONA POSNER © 2013 35
iTunes User Experience Challenges
ILONA POSNER © 2013 36
User Research
37 ILONA POSNER © 2013
360 Degree View of Customer
• Call centre • Customer support emails • User forums
• AnalyJcs • Web logs
• 3rd party review sites
• Field Studies • Interviews • Surveys • Diary studies • Focus groups • Card sorJng • Usability tesJng
ILONA POSNER © 2013 38
Lean UX -‐ Applying Lean Principles to Improve User Experience, Jeff Gothelf & Josh Seiden, 2013
User Research
ObservaJons
QuesJonnaires Interviews
39 ILONA POSNER © 2013
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?
40 ILONA POSNER © 2013
Example: Weather 1
41 ILONA POSNER © 2013
Example: Weather 2
42 ILONA POSNER © 2013
ObservaJons or Field Studies
ILONA POSNER © 2013 43
Field Study
44 ILONA POSNER © 2013
Field Studies I find it difficult to keep track of my knitting patterns.
I would use a drop-down menu rather than using check boxes.
✗ ✓
45 ILONA POSNER © 2013
Nokia Mobile Phone Study
CHI 2005 Metro car
46 ILONA POSNER © 2013
Wells Fargo Mobile Research
ILONA POSNER © 2013 47
Answerlab.com & Wells Fargo Research PresentaJon, UPA 2011
Users’ Profiles
• Demographics – Age, gender, family, educaJon, job, HHI, technology, geography, language, culture, preferences, etc…
• Behavior paferns – Where, when, how, why
48 ILONA POSNER © 2013
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
51 ILONA POSNER © 2013
Prototype PalmPilot
ILONA POSNER © 2013 52
Bill Buxton, Sketching User Experiences, 2007
Physical Device
ILONA POSNER © 2013 53
hfp://www.sketchingtomorrow.com/wp-‐content/uploads/2010/06/cardboard.jpg
InteracJve Paper Prototype
hfp://graphics.csail.mit.edu/classes/6.893/F03/PaperPrototypePhotos/pic2_0018.JPG
54 ILONA POSNER © 2013
Prototype of GPS System
55 ILONA POSNER © 2013
Mobile Phone Paper Prototypes
www.nngroup.com/reports/prototyping/tesJng_handheld.jpg
www.liliamanguy.com/iBuyRight_webdocs/
56 ILONA POSNER © 2013
Paper in Screen Prototype
ILONA POSNER © 2013 57
hfp://uxmag.com/arJcles/paper-‐in-‐screen-‐prototyping
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
58 © ILONA POSNER, 2011
Paper Prototype Design Exercise
59 ILONA POSNER © 2013
Usability TesJng – Kids Using Rotary Phone
60 ILONA POSNER © 2013
hfp://youtu.be/j6ArmonNCi8
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)
ILONA POSNER © 2013 62
Lean UX -‐ Applying Lean Principles to Improve User Experience, Jeff Gothelf & Josh Seiden, 2013
Wizard of Oz Technique
ParJcipants’ Roles • User(s) • Facilitator • Computer • Observer(s)
63 ILONA POSNER © 2013
ILONA POSNER © 2013 64
User Test
Product Demo Product Demo
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!?
66 ILONA POSNER © 2013 ILONA POSNER © 2012
top related