Transcript
Page 1: Tour of UX deliverables - dev/haag

elements ofuser experience

a tour of user experience deliverables

peter boersmadev/haag, January 21, 2011

Page 2: Tour of UX deliverables - dev/haag
Page 3: Tour of UX deliverables - dev/haag

events

4,000 p a r t i c i p a n t s

20 c o u n t r i e s

50 c o n s u l t a n c i e s

consulting

e x p e r i e n c e

researche x p e r i e n c e

designe x p e r i e n c e

strategy

hundredso f a r t i c l e s

r+d

8b o o k s

thousandso f r e a d e r s

Adaptive Path helps teams and organizations create products and services that deliver great experiences to improve people’s lives.

Page 4: Tour of UX deliverables - dev/haag

three locations

Page 5: Tour of UX deliverables - dev/haag

clients world-wide

Page 6: Tour of UX deliverables - dev/haag

elements ofuser experience

a tour of user experience deliverables

Page 7: Tour of UX deliverables - dev/haag
Page 8: Tour of UX deliverables - dev/haag
Page 9: Tour of UX deliverables - dev/haag
Page 10: Tour of UX deliverables - dev/haag

2001

Page 11: Tour of UX deliverables - dev/haag

2011

Page 12: Tour of UX deliverables - dev/haag
Page 13: Tour of UX deliverables - dev/haag
Page 14: Tour of UX deliverables - dev/haag

<real elements ofuser experience

2nd edition>

Page 15: Tour of UX deliverables - dev/haag

moreelements of

user experiencea tour of user experience deliverables

Page 16: Tour of UX deliverables - dev/haag

?

Page 17: Tour of UX deliverables - dev/haag

Design

ResearchStrategy

Page 18: Tour of UX deliverables - dev/haag

Process

Evaluation

Manage

Business

Design

Strategy

Research

Page 19: Tour of UX deliverables - dev/haag

Process

Manage

Business

Strategy

Evaluation

Design

Research

theseinfluence the

User Experience too!

typicalUser-Centered

Design

Page 20: Tour of UX deliverables - dev/haag

elements ofuser experience

a tour of user experience deliverables

Page 21: Tour of UX deliverables - dev/haag

elements ofuser experience

a tour of user experience deliverables

Page 22: Tour of UX deliverables - dev/haag

Business

Design

ResearchEvaluation

StrategyManage

Pitch

Scenarios

Position

Service Design

Roadmap

Prototype

RequirementsReviewTest

Scope

Optimize

Estimate

Beta

ConceptDetailed Design

Sketch

Personas

Competition

Process

Roles

Steps

Interviews

Page 23: Tour of UX deliverables - dev/haag

BusinessPitchScenarios

Estimate

Design

ResearchEvaluation

StrategyManage

Position

Service Design

Roadmap

Prototype

RequirementsReviewTest

Scope

Optimize

Beta

ConceptDetailed Design

Sketch

Personas

Competition

Process

Roles

Steps

Interviews

Page 24: Tour of UX deliverables - dev/haag
Page 25: Tour of UX deliverables - dev/haag
Page 26: Tour of UX deliverables - dev/haag
Page 27: Tour of UX deliverables - dev/haag
Page 28: Tour of UX deliverables - dev/haag
Page 29: Tour of UX deliverables - dev/haag
Page 30: Tour of UX deliverables - dev/haag

pitching is all abouten-vision-ing

a tour of user experience deliverables

Page 31: Tour of UX deliverables - dev/haag

BusinessPitch

Scenarios

Estimate

Page 32: Tour of UX deliverables - dev/haag
Page 33: Tour of UX deliverables - dev/haag

“many”and

“a lot”are good first guesses!

Page 34: Tour of UX deliverables - dev/haag

output

assumptionscalculationsexplanations

risks

when possible

input for estimates

scope itemsrequirements

approachteam skills

experience with subjectexperience with client

experience of client

when available

Page 35: Tour of UX deliverables - dev/haag

example output

assumingwe design 10 wireframes(5 complex + 5 medium)

+ 15 componentswe estimate

we need 320 hours(5x16 + 5x12 + 15x12)

butwe don’t know the

developer’s documentation needs

output

assumptions

calculations

(explanations)risks

Page 36: Tour of UX deliverables - dev/haag

1. make estimates honest2. use margins to wow client

a tour of user experience deliverables

Page 37: Tour of UX deliverables - dev/haag

BusinessPitch

Scenarios

Estimate

Page 38: Tour of UX deliverables - dev/haag

BusinessPitch

Scenarios

Estimate

Strategy

Position

Competition

Page 39: Tour of UX deliverables - dev/haag

Strategy

Position

Competition

Page 40: Tour of UX deliverables - dev/haag
Page 41: Tour of UX deliverables - dev/haag
Page 42: Tour of UX deliverables - dev/haag
Page 43: Tour of UX deliverables - dev/haag
Page 44: Tour of UX deliverables - dev/haag
Page 45: Tour of UX deliverables - dev/haag

“know your enemy”(Sun Tzu, The Art of War)

a tour of user experience deliverables

Page 46: Tour of UX deliverables - dev/haag

Strategy

Position

Competition

Research

Personas

Interviews

Page 47: Tour of UX deliverables - dev/haag

business stakeholders

Page 48: Tour of UX deliverables - dev/haag

ask

what is the idea?will it help you reach your goals?

will customers accept it?why now?

how fast can you move?

and find out value of answers

Page 49: Tour of UX deliverables - dev/haag

ask: what is the idea?

Page 50: Tour of UX deliverables - dev/haag

ask: why now?

Page 51: Tour of UX deliverables - dev/haag

and find out the value of answers

Page 52: Tour of UX deliverables - dev/haag

users

Page 53: Tour of UX deliverables - dev/haag

ask

who are you?what do you use now?

how do you feel about it?when is it a good/bad day?

what should it be like?

and find out value of answers

Page 54: Tour of UX deliverables - dev/haag

Can you please describe your role? Hardware Engineer

System Engineer

Field Application Engineer

Software Engineer

Board Engineer

Test Engineer

Quality Engineer

Component Engineer

Other Engineering role

Program/Project Manager

Purchase Manager

Purchaser

Sourcer

Do you use social media as part of your job?

Yes. I often use social media for work.

I rarely use social media for work.

No. I never use social media for work.

0.00 0.50 1.00 1.50 2.00 2.50 3.00

General Product Information

Application Information

Block Diagrams (or other visualizations)

Sustainability

Environmental Information

Price

Rich Media (Videos, Interactives, etc.)

What information is most important to you? (1 = most important / 3 = third most important)

ask: who are you? etc.

Page 55: Tour of UX deliverables - dev/haag

What is the size of the organization where you work (all locations combined?)

Less than 10 employees

10 to 100 employees

100 to 500 employees

1,000 to 10,000 employees

10,000 to 100,000 employees

More than 100,000 employees

and find out the value of answers

Page 56: Tour of UX deliverables - dev/haag

“you are not the user”a tour of user experience deliverables

Page 57: Tour of UX deliverables - dev/haag

Research

Personas

Interviews

Page 58: Tour of UX deliverables - dev/haag
Page 59: Tour of UX deliverables - dev/haag
Page 60: Tour of UX deliverables - dev/haag

where do they come from?

Page 61: Tour of UX deliverables - dev/haag
Page 62: Tour of UX deliverables - dev/haag
Page 63: Tour of UX deliverables - dev/haag
Page 64: Tour of UX deliverables - dev/haag
Page 65: Tour of UX deliverables - dev/haag
Page 66: Tour of UX deliverables - dev/haag

find personas in the dataa tour of user experience deliverables

Page 67: Tour of UX deliverables - dev/haag

SketchDesignConceptDetailed Design

Research

Personas

Interviews

Page 68: Tour of UX deliverables - dev/haag
Page 69: Tour of UX deliverables - dev/haag

Sketching with markers

Yellow marker

Fat

Regular

Small

Gray marker

Sharpie markers

Start here

More attention

Depth:Pop forward

Push back

Look at me!

Page 70: Tour of UX deliverables - dev/haag

It’s not about HOW to sketch, but WHAT to sketch

Page 71: Tour of UX deliverables - dev/haag
Page 72: Tour of UX deliverables - dev/haag
Page 73: Tour of UX deliverables - dev/haag
Page 74: Tour of UX deliverables - dev/haag
Page 75: Tour of UX deliverables - dev/haag
Page 76: Tour of UX deliverables - dev/haag
Page 77: Tour of UX deliverables - dev/haag

you can never havetoo many sketchesa tour of user experience deliverables

Page 78: Tour of UX deliverables - dev/haag

SketchDesignConceptDetailed Design

Page 79: Tour of UX deliverables - dev/haag
Page 80: Tour of UX deliverables - dev/haag

a personal, retail bankwhere you learn about, configure and buy

products & servicesalone, based on stories, or with an advisor

www.BigDutchBank.comis...

Page 81: Tour of UX deliverables - dev/haag

Life

Play

Learn

Buy

Page 82: Tour of UX deliverables - dev/haag
Page 83: Tour of UX deliverables - dev/haag

flow: confirm appointment

Page 84: Tour of UX deliverables - dev/haag

express concepts assentence, model or flow

(or a mix)a tour of user experience deliverables

Page 85: Tour of UX deliverables - dev/haag

SketchDesignConceptDetailed Design

Page 86: Tour of UX deliverables - dev/haag

ifthe level of detail

in your design specification goes up like this:

Page 87: Tour of UX deliverables - dev/haag
Page 88: Tour of UX deliverables - dev/haag
Page 89: Tour of UX deliverables - dev/haag
Page 90: Tour of UX deliverables - dev/haag
Page 91: Tour of UX deliverables - dev/haag
Page 92: Tour of UX deliverables - dev/haag
Page 93: Tour of UX deliverables - dev/haag

thenit may be time to write more

formal design specification documents

Page 94: Tour of UX deliverables - dev/haag
Page 95: Tour of UX deliverables - dev/haag
Page 96: Tour of UX deliverables - dev/haag
Page 97: Tour of UX deliverables - dev/haag
Page 98: Tour of UX deliverables - dev/haag
Page 99: Tour of UX deliverables - dev/haag

make design specificationsmatch the needs of the project

a tour of user experience deliverables

Page 100: Tour of UX deliverables - dev/haag

Evaluation

Prototype

Test

DesignConceptDetailed Design

Sketch

Page 101: Tour of UX deliverables - dev/haag
Page 102: Tour of UX deliverables - dev/haag
Page 103: Tour of UX deliverables - dev/haag
Page 104: Tour of UX deliverables - dev/haag
Page 105: Tour of UX deliverables - dev/haag

use what you like:paper, PowerPoint, Excel,

Axure, Flash or HTML,but

prototypea tour of user experience deliverables

Page 106: Tour of UX deliverables - dev/haag

Evaluation

Prototype

Test

Page 107: Tour of UX deliverables - dev/haag

observer

facilitatorparticipant

Page 108: Tour of UX deliverables - dev/haag
Page 109: Tour of UX deliverables - dev/haag

try any of theseremote usability testing tools

Page 110: Tour of UX deliverables - dev/haag

read this book

Page 111: Tour of UX deliverables - dev/haag

1. test early & often2. have a test strategy

a tour of user experience deliverables

Page 112: Tour of UX deliverables - dev/haag

Evaluation

Prototype

Test

Manage

Scope

Optimize

Beta

Page 113: Tour of UX deliverables - dev/haag

easy hard

contribute

essential

quickwin

repair quality

winner!

pickjust a few of these for your

project!

Page 114: Tour of UX deliverables - dev/haag

1. classify scope-items2. select the winners

a tour of user experience deliverables

Page 115: Tour of UX deliverables - dev/haag

Manage

Scope

Optimize

Beta

Page 116: Tour of UX deliverables - dev/haag

Manage

Scope

Optimize

Beta

Page 117: Tour of UX deliverables - dev/haag
Page 118: Tour of UX deliverables - dev/haag

experimentto learn what works

for your designa tour of user experience deliverables

Page 119: Tour of UX deliverables - dev/haag

Manage

Scope

Optimize

Beta

Process

BusinessPitch

Scenarios

Estimate

Design

ResearchEvaluation

Strategy

Position

Prototype

Test

ConceptDetailed Design

Sketch

Personas

Competition

Interviews

Page 120: Tour of UX deliverables - dev/haag

Process

Service Design

Roadmap

RequirementsReview

Roles

Steps

Manage

Scope

Optimize

Beta

BusinessPitch

Scenarios

Estimate

Design

ResearchEvaluation

Strategy

Position

Prototype

Test

ConceptDetailed Design

Sketch

Personas

Competition

Interviews

Page 121: Tour of UX deliverables - dev/haag

Process

Service Design

Roadmap

RequirementsReview

Roles

Steps

Page 122: Tour of UX deliverables - dev/haag

A B?

Page 123: Tour of UX deliverables - dev/haag

A B21 3 4

C D2a

1 3 5

2b

4b

4a

4c

6

Page 124: Tour of UX deliverables - dev/haag

SITEMAP

wireframesrequire-

mentsusability test

Screen

FLOWproto-type

designprinciples

Persona

Page 125: Tour of UX deliverables - dev/haag

1 2 3 4

Persona

SITEMAP

wireframesrequire-

ments

usability testScreen

FLOW

proto-type

designprinciples

A B

Page 126: Tour of UX deliverables - dev/haag

userresearch

conceptdesign

detaileddesign

prototype & evaluate

Page 127: Tour of UX deliverables - dev/haag

C Duserresearch

conceptdesign

detaileddesign prototype &

evaluate

userresearch

prototype & evaluate

prototype & evaluate

Page 128: Tour of UX deliverables - dev/haag

Persona

Page 129: Tour of UX deliverables - dev/haag

A B21 3 4

?

Page 130: Tour of UX deliverables - dev/haag
Page 131: Tour of UX deliverables - dev/haag
Page 132: Tour of UX deliverables - dev/haag
Page 133: Tour of UX deliverables - dev/haag
Page 134: Tour of UX deliverables - dev/haag
Page 135: Tour of UX deliverables - dev/haag
Page 136: Tour of UX deliverables - dev/haag

userreseach

concept design

detaileddesign

prototype & evaluate

Persona

SITEMAP

wireframesrequire-

ments

usability testScreen

FLOW

proto-type

designprinciples

Page 137: Tour of UX deliverables - dev/haag

don’t copya design process diagram;

create your ownuser experience design processes

Page 138: Tour of UX deliverables - dev/haag

Process

Service Design

Roadmap

RequirementsReview

Roles

Steps

Page 139: Tour of UX deliverables - dev/haag

Business

Design

ResearchEvaluation

StrategyManage

Pitch

Scenarios

Position

Service Design

Roadmap

Prototype

RequirementsReviewTest

Scope

Optimize

Estimate

Beta

ConceptDetailed Design

Sketch

Personas

Competition

Process

Roles

Steps

Interviews

Page 140: Tour of UX deliverables - dev/haag
Page 141: Tour of UX deliverables - dev/haag
Page 142: Tour of UX deliverables - dev/haag

<real elements ofuser experience

2nd edition>

Page 143: Tour of UX deliverables - dev/haag

Questions?

peter boersma

Page 144: Tour of UX deliverables - dev/haag

elements ofuser experience

a tour of user experience deliverables

peter boersma


Top Related