user experience design & paper prototyping

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


1950’s


1980’s


And Now…


Human Impact of Technology

Devices ApplicaJons Input forms Features InformaJon Time of use Dependence Interdependence Sociability Environmental impact

Human Impact

Human Capacities


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

User Experience Everything that the user sees, hears, & touches!

12

Share

Customize


** Balloon Image **


User Experience = Product


User Experience = Brand


User Experience


UX Honeycomb, Peter Moreville

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

User Experience Example …


hfp://www.switched.com/2010/12/28/aol-‐free-‐trial-‐cds-‐cost-‐300-‐million/

UX Problem


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/


How to Maximize UX?


Trinity for Success

Users

Business Technology


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

?


UX Success Stories


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


$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/


iPod vs Zune


How to Maximize UX?


Five D’s of User Experience Design


Discover

Define

Design Develop

Deploy

Five D’s of UX Design


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


hfp://www.uxmafers.com/mt/archives/2011/09/images/EffecJveUIJourneyMapExample.jpg

Vision


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


hfp://www.nngroup.com/arJcles/disrupJve-‐workflow-‐design/

iTunes Usability Challenges


iTunes User Experience Challenges


User Research


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


Lean UX -‐ Applying Lean Principles to Improve User Experience, Jeff Gothelf & Josh Seiden, 2013

User Research

ObservaJons

QuesJonnaires Interviews


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?


Example: Weather 1


Example: Weather 2


ObservaJons or Field Studies


Field Study


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.

✗ ✓


Nokia Mobile Phone Study

CHI 2005 Metro car


Wells Fargo Mobile Research


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


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


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


Build -‐ Prototypes

Early Design Late Design Development

Costs of Making Changes:

$1 $10 $100


Prototype PalmPilot


Bill Buxton, Sketching User Experiences, 2007

Physical Device


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


Prototype of GPS System


Mobile Phone Paper Prototypes

www.nngroup.com/reports/prototyping/tesJng_handheld.jpg

www.liliamanguy.com/iBuyRight_webdocs/


Paper in Screen Prototype


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


Usability TesJng – Kids Using Rotary Phone


hfp://youtu.be/j6ArmonNCi8

UX TesJng Myths

Hard

Expensive

Time Consuming


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

Wizard of Oz Technique

ParJcipants’ Roles • User(s) • Facilitator • Computer • Observer(s)



User Test

Product Demo Product Demo

Usability TesJng of Paper Prototypes

“Debugging before wriJng any code!” Layout

Workflow

Terminology

Requirements

Content

Help


All Technology is User Tested!

The only ques=ons are: When?

By Whom?

At What Cost!?

66 ILONA POSNER © 2013 ILONA POSNER © 2012