UX Architecture for the Small Guy

66
Leading Today: Gary Barber @tuna Church of User eXperience Design Welcome to the Today’s Sermon UX Architecture for the Small Guy © istockphoto.com

description

Talk from Edge of the Web Conference 2009

Transcript of UX Architecture for the Small Guy

Page 1: UX Architecture for the Small Guy

Leading Today: Gary Barber @tuna

Church of User eXperience

Design

Welcome to the

Today’s Sermon

UX Architecturefor the Small Guy

© istockphoto.com

Page 2: UX Architecture for the Small Guy

User Experience Design

DEF: a subset of the field of experience design that pertains to the creation of the architecture and interaction models that impact a user's perception of a device or system. The scope of the field is directed

at affecting "all aspects of the user’s interaction with the product: how it is

perceived, learned, and used

...like any other machine - they're either a benefit or a hazard. If they're a benefit, it's not my problem.

Don Norman

Page 3: UX Architecture for the Small Guy

User Experience

DEF: the perception left after a series of interactions.

“Design is the art of gradually applying constraints until only one solution remains”

Eric Reiss

Unknown

Page 4: UX Architecture for the Small Guy

Two Hotels

UX is about perception and product confidence

www.flickr.com/photos/10634319@N00/3206552644

Page 5: UX Architecture for the Small Guy

Two Web Sites

UX is about removing the frustration

Page 6: UX Architecture for the Small Guy

Usable UX

“Usability is something we do in UAT, right?”Client

www.flickr.com/photos/51035583134@N01/1647545 www.flickr.com/photos/52971398@N00/2193315363

Page 7: UX Architecture for the Small Guy

Design Reality

Stakeholders

Customers

SPEC

DESIGN

DEVUAT

Page 8: UX Architecture for the Small Guy

Small Project Reality

Stakeholders

Customers

SPEC

DESIGN

DEV

Page 9: UX Architecture for the Small Guy

Wish List - Agile UX

DESIGN

USERTESTUSER

TEST

USERTEST

DESIGNDEV

DEV

Stakeholders

Customers

RE

SE

AR

CH

BUSI

NES

S

INFOR

MATIO

NCU

STO

MER

InterationZero

BUILD

BRAI

NST

ORM

Page 10: UX Architecture for the Small Guy

Roles with UX Project

DESIGNER

DEVELOPER

PROJECT MANAGER

UX ARCHITECT

DESIGNER

DEVELOPER

PROJECT MANAGER

Page 11: UX Architecture for the Small Guy

Small Projects

Stakeholders

Customers

SPEC

DESIGN

DEV

Page 12: UX Architecture for the Small Guy

The Web is Not Print

www.flickr.com/photos/11550160@N03/2875431305

Page 13: UX Architecture for the Small Guy

Web is Print?

Web

Print

Page 14: UX Architecture for the Small Guy

Is it Bad Habits

© istockphoto.com

• No Budget

• No Skills

• No Time

• We’ll do it next time

• It doesn’t work

• No one else is doing it

Page 15: UX Architecture for the Small Guy

Money Talks

“But, I just want a website for $X dollars”

Client

www.flickr.com/photos/60648084@N00/2243154949

Page 16: UX Architecture for the Small Guy

UX & User Centered Design

UCD doesn’t appear to work well with Small Projects

© istockphoto.com

Page 17: UX Architecture for the Small Guy

Reality Check for UCD

UCD doesn’t appear to fit with Small Projects

Page 18: UX Architecture for the Small Guy

UCD focuses on the Users

“If the user can’t use it, it doesn’t work”Susan Dray

© istockphoto.com

Page 19: UX Architecture for the Small Guy

Client

Remove the Users?

“Maybe we’re better off without the Users”

www.flickr.com/photos/32145599@N08/3046354228

Client

Page 20: UX Architecture for the Small Guy

Business + User Focus

Centralised Business and User based Approach

www.flickr.com/photos/20998477@N00/2794222271

Page 21: UX Architecture for the Small Guy

UX Architecture is not a Methodology

“I don’t care about User Experience I just want to sell products”Client

www.flickr.com/photos/41894176272@N01/206274128

Page 22: UX Architecture for the Small Guy

UX Tool Kit

Over 50 tools, techniques and methods to ensure the best UX

www.flickr.com/photos/41894148532@N01/2517652

Page 23: UX Architecture for the Small Guy

Should it Stay or Should it Go

Remember every project is different“it Depends”

www.flickr.com/photos/32742419@N04/3114975462

Page 24: UX Architecture for the Small Guy

Business Research • Stakeholder Interviews

• Business Requirements

• Competitor Review

• Expert Review

• Peer Review

• Web Analytics Review

www.flickr.com/photos/35423169@N00/50088733

Page 25: UX Architecture for the Small Guy

Stakeholder InterviewsRequired:

Time:

Cost:

Reliability:

Influence:

Small Projects:

Small Guy Parable : You are going to be talking to your client anyway, why not ask a few open ended questions, to gather even more information

www.flickr.com/photos/58516345@N00/297392665

n/a

Page 26: UX Architecture for the Small Guy

Business RequirementsRequired:

Time:

Cost:

Reliability:

Influence:

Small Projects:

Small Guy Parable : Even better if the client has these done for you. Sometimes a Brainstorming session helps cement the real vs political requirements.

www.flickr.com/photos/10883933@N07/3674088481

n/a

Page 27: UX Architecture for the Small Guy

Competitor ReviewRequired:

Time:

Cost:

Reliability:

Influence:

Small Projects:

Small Guy Parable : Don’t overload this process, keep it short and snappy, if it adds nothing new to the list, move on. Like a lit review for the Web.

www.flickr.com/photos/26332965@N00/478614736

n/a

Page 28: UX Architecture for the Small Guy

Expert ReviewRequired:

Time:

Cost:

Reliability:

Influence:

Small Projects:

Small Guy Parable : Not a replacement for User Testing. Use only if budget is really tight. Can only really give you the general problem areas. No one is an expert.

www.flickr.com/photos/21170057@N03/2667839445

n/a

Page 29: UX Architecture for the Small Guy

Peer ReviewRequired:

Time:

Cost:

Reliability:

Influence:

Small Projects:

Small Guy Parable : Do them on forums, down the pub, be open with your peers to get real feedback. Avoid the back slapping crowd. Review, review and review

www.flickr.com/photos/8765199@N07/3622174097

n/a

Page 30: UX Architecture for the Small Guy

Web Analytics ReviewRequired:

Time:

Cost:

Reliability:

Influence:

Small Projects:

Small Guy Parable : Greatly dependent on the depth of the statistics available, Often poor on small projects. Pay Special attention to the Search Analyics. Experienced analysis can bring out worthwhile user pathways

www.flickr.com/photos/56261168@N00/109637850

n/a

Page 32: UX Architecture for the Small Guy

Content Audit/InventoryRequired:

Time:

Cost:

Reliability:

Influence:

Small Projects:

Small Guy Parable : Remember content is king, this has to be done. You can’t design without at least a sketchy idea of what the content is. Expect lost content to be found later.

www.flickr.com/photos/11272899@N04/3348071667

n/a

Page 33: UX Architecture for the Small Guy

Card SortingRequired:

Time:

Cost:

Reliability:

Influence:

Small Projects:

Small Guy Parable : Good tool for information or functional categorisation. Don’t over use. Don’t over analyse, users can get it wrong. Can use Affinity Diagram as well for general logical grouping.

www.flickr.com/photos/98147822@N00/253175852 www.flickr.com/photos/38869431@N00/3703735824

Page 34: UX Architecture for the Small Guy

Customer/User Research• User Priming

• User Interviews

• Field Studies

• User Surveys

• Focus Groups

• Personas

• User Stories

• Task Analysis

• Mental Models

www.flickr.com/photos/50138555@N00/580711370 www.flickr.com/photos/22023529@N00/341543757 www.flickr.com/photos/28260247@N07/3366216596 www.flickr.com/photos/77309394@N00/105439262

Page 35: UX Architecture for the Small Guy

User PrimingRequired:

Time:

Cost:

Reliability:

Influence:

Small Projects:

Small Guy Parable : Some users will “cheat”, expect this, but you will notice it, people find this easier to do than a diary. Helps start an interview. Drawing the experience

www.flickr.com/photos/49106033@N00/459905744 www.flickr.com/photos/37484601@N00/3513672579 www.flickr.com/photos/35955268@N00/474693912

Page 36: UX Architecture for the Small Guy

User InterviewsRequired:

Time:

Cost:

Reliability:

Influence:

Small Projects:

Small Guy Parable : A very small pool is okay 4-5 people. Interviews don’t have to be long, just open ended. Forget transcripts, you will not have the time to do them. Record if you must, just you will not review it.

www.flickr.com/photos/12792444@N04/3235027708

Page 37: UX Architecture for the Small Guy

User SurveysRequired:

Time:

Cost:

Reliability:

Influence:

Small Projects:

Small Guy Parable : Unless you are very experienced or have training in survey writing, don’t DIY. Real costs can be very high for Small Projects.

http://www.flickr.com/photos/20561948@N00/117335513

Page 38: UX Architecture for the Small Guy

Focus GroupsRequired:

Time:

Cost:

Reliability:

Influence:

Small Projects:

Small Guy Parable : At best they are artificial constructs, open to group dynamics like a jury. Not suited to UX research at all. Avoid!

www.flickr.com/photos/23799098@N03/3752407910

Page 39: UX Architecture for the Small Guy

Field StudiesRequired:

Time:

Cost:

Reliability:

Influence:

Small Projects:

Small Guy Parable : Shadowing and contextual enquiry useful. Allow for believe what you see not what the user tells you. Ethnographic Studies also applicable.

www.flickr.com/photos/73645804@N00/3317690034

Page 40: UX Architecture for the Small Guy

PersonasRequired:

Time:

Cost:

Reliability:

Influence:

Small Projects:

Small Guy Parable : Making fake people, good generalist behavioural patterns in personas. Maybe a Persona Pattern Library is in order. Sketched personas better than detailed ones. Adhoc Personas should be considered.

www.flickr.com/photos/33947185@N00/3681279223http://www.flickr.com/photos/20561948@N00/117335513

n/a

Page 41: UX Architecture for the Small Guy

User StoriesRequired:

Time:

Cost:

Reliability:

Influence:

Small Projects:

Small Guy Parable : Easy to compile from previous research. Fast and effective, look for simple patterns of task and behaviour. Don’t over analyse, accept what is.

www.flickr.com/photos/56091882@N00/2728096478

n/a

Page 42: UX Architecture for the Small Guy

Task Analysis Required:

Time:

Cost:

Reliability:

Influence:

Small Projects:

Small Guy Parable : Summary tool for listing task patterns, functionality, information processes and refining them. KIS. Will feed into story boarding, flow diagrams and prototyping. Can use GOMS on this too.

www.flickr.com/photos/80122196@N00/4499404 www.flickr.com/photos/83565115@N00/3274919185 www.flickr.com/photos/81098106@N00/2757285670

n/a

Page 43: UX Architecture for the Small Guy

Mental ModelsRequired:

Time:

Cost:

Reliability:

Influence:

Small Projects:

Small Guy Parable : Good for confirming information and functional categorisation. Behaviour and task based nature takes too much time. Need a faster analysis method.

www.flickr.com/photos/9411449@N05/2125040269

n/a

Page 44: UX Architecture for the Small Guy

Brainstorming• Critical to all project

types

• Bridge from Research to Design

• Generate New Ideas from Research

• Pattern Matching

• Time to see the Patterns

www.flickr.com/photos/37996578526@N01/3513906216

Page 45: UX Architecture for the Small Guy

Design• User Testing

• Navigational Design

• Story Boarding

• FLow Charting

• Mood Boards

• Wireframes

• Graphical Mockup

• Prototyping

www.flickr.com/photos/22023529@N00/537603811 www.flickr.com/photos/22023529@N00/8044425www.flickr.com/photos/41211045@N00/34679639

Page 46: UX Architecture for the Small Guy

User TestingRequired:

Time:

Cost:

Reliability:

Influence:

Small Projects:

Small Guy Parable : Do it anywhere, coffee shop, lunchroom, remotely. Avoid the lab. Small pools are allowed. Should be used to confirm and discover all the time in UX. At least consider A/B testing.

www.flickr.com/photos/13316988@N00/3231977570www.flickr.com/photos/25642587@N00/2724175411

Page 47: UX Architecture for the Small Guy

Navigational DesignRequired:

Time:

Cost:

Reliability:

Influence:

Small Projects:

Small Guy Parable : Small content mean less categorisation, less options. Still look for new pathways to navigate. Use simple Tree testing.

http://www.flickr.com/photos/19762676@N00/3316195479

n/a

Page 48: UX Architecture for the Small Guy

Story BoardingRequired:

Time:

Cost:

Reliability:

Influence:

Small Projects:

Small Guy Parable : Can be traditional, photoboard, stick figures, movieboard, flash based screen prototypes. Lots tool available. Remember to keep it sketchy, produce at a fast and furious rate. Also consider Task and Story Boards as Swinlanes.

www.flickr.com/photos/37074888@N00/4037629205www.flickr.com/photos/70321513@N00/3975307520

n/a

Page 49: UX Architecture for the Small Guy

Flow ChartingRequired:

Time:

Cost:

Reliability:

Influence:

Small Projects:

Small Guy Parable : Work well with Use Cases. Task, functionality and screen flow can all be mapped. Helps bridge designers and developers. Combine wireframes and flowcharts to get wireflows.

www.flickr.com/photos/38869431@N00/1121226671 www.flickr.com/photos/49503215066@N01/268374764

n/a

Page 50: UX Architecture for the Small Guy

Mood BoardsRequired:

Time:

Cost:

Reliability:

Influence:

Small Projects:

Small Guy Parable : Quick and easy to produce. Show emotional landscape. Supporting the visceral response of the cognitive process. Need to elicited an emotional response.

www.flickr.com/photos/32729422@N00/2181557066

n/a

Page 51: UX Architecture for the Small Guy

WireframesRequired:

Time:

Cost:

Reliability:

Influence:

Small Projects:

Small Guy Parable : Need to be quick, not detailed masterpieces. Document the basics and move on. Do we really need them if rapid prototyping is used. Use Pattern Libraries.

www.flickr.com/photos/32729422@N00/2181557066 www.flickr.com/photos/84392129@N00/3626834995 www.flickr.com/photos/33472412@N00/3307873748

n/a

Page 52: UX Architecture for the Small Guy

Graphical MockupRequired:

Time:

Cost:

Reliability:

Influence:

Small Projects:

Small Guy Parable : Mockups in Photoshop can take too long, move to Browser mockups. Consider collaged mockups from competitors or like functional sites to get visual direction, like an extention of Participatory Design.

© radharc.com.au

n/a

Page 53: UX Architecture for the Small Guy

PrototypingRequired:

Time:

Cost:

Reliability:

Influence:

Small Projects:

Small Guy Parable : Use paper, pens, bottle tops, whiteboards to interactive generators from Axure to Screenflow. Document with photos or screenshots, KIS. Use Pattern Libraries. Give the site a human personality.

www.flickr.com/photos/13316988@N00/2208732061 www.flickr.com/photos/68453525@N00/3605778917

n/a

Page 54: UX Architecture for the Small Guy

UX Elements of Rapture

Stakeholder Interviews

Business Requirements

Content Audit

User Interviews

Navigational Design

Brainstorming

User Testing

Task Analysis

Mood Boards

Graphical Mockups

Prototypes

Page 55: UX Architecture for the Small Guy

Waterfall vs Whirlpool

Regardless of Waterfall or Agile projects, UX can be used in both

www.flickr.com/photos/44493439@N00/537285629 www.flickr.com/photos/61775176@N00/89030908

Page 56: UX Architecture for the Small Guy

UX is Hard

Client wants a cheap option - don’t go with the Gut!

www.flickr.com/photos/35723943@N00/165144643

Page 57: UX Architecture for the Small Guy

Design is about Failure

“Genius is the ability to reduce the complicated to the simple.”C.W. Ceram

© istockphoto.com

AddIdeas

AddIdeas Final

Product

Time

No. ofIdeas

Concept Generation

Page 58: UX Architecture for the Small Guy

Lost Ideas

“The public is more familiar with bad design than good design.”Paul Rand

© istockphoto.com

Final Product

Time

No. ofIdeas

Concept Generation

Lost Ideas

Lost Ideas

Page 59: UX Architecture for the Small Guy

Time to Get Ideas!

“The only thing more expensive than writing software is writing bad software”

Alan Cooper

www.flickr.com/photos/41534655@N00/243010900

Page 60: UX Architecture for the Small Guy

Selling UX

Reality check - UX can be seen as expensive window dressing

www.flickr.com/photos/24995774@N06/2358339193

Page 61: UX Architecture for the Small Guy

No Jargon!

Just like IT cut the techo-babble, so we have too.

www.flickr.com/photos/79446887@N00/2844238907

Page 62: UX Architecture for the Small Guy

Speak Business

Talk like an Accountant, Marketeer, Human Resources, CEO

www.flickr.com/photos/14718994@N03/2279273026

Page 63: UX Architecture for the Small Guy

CEO’s Love Design

Clients like to be involved, it’s more interest than Accounts

www.flickr.com/photos/34281632@N03/3646744137

Page 64: UX Architecture for the Small Guy

The Commandments

Is too much documentation drowning UX in costs?

© istockphoto.com

DESIGN

USERTEST

USERTEST

USERTEST

DESIGNDEV

DEV

RESEARCH

BUSINESS

INFOR

MATIO

NCU

STOMER

InterationZero

BUILD

BRAINSTORM

• UX is about Business and Users

• Stop the old ways

• UX can be Agile

• User research is important

• Don’t go with the gut

• Selling UX is more important than the design

Page 65: UX Architecture for the Small Guy

Questions

GARY BARBER

@tuna

manwithnoblog.com

radharc.com.au

Creative Commons Attribution-Noncommercial 2.5 Australia License Typeface - Footlights Flickr attribution on relevant slide

Page 66: UX Architecture for the Small Guy

Local UX Resources

• UX BookClub - uxbookclub.org

• Usability Professionals’ Association - www.upassoc.org

• Information Architect Institute - iainstitute.org

• Mailing Lists:

✴ IxDA - ixda.org