The Elements of User Experience

Jesse James Garrett

Meet The Elements

Worst Movie Ever!

2003 Adaptive Path

Who Gets the Blame?

I probably overlooked the right choice. I must not have read the instructions closely enough. I guess Im not smart enough to use this.
2003 Adaptive Path 4

?!?

Products Are People Too

2003 Adaptive Path

User-Centered Design
A philosophy of product development The product is not an end in itself The product is a means toward the end of providing a good experience for the user Suite of methods emphasizing understanding people rather than technology

2003 Adaptive Path

User Experience
How a product behaves and is used in the real world Beyond the product to its context in peoples lives Incorporates diverse range of factors

2003 Adaptive Path

Surface

2003 Adaptive Path

Skeleton

2003 Adaptive Path

Structure

2003 Adaptive Path

10

Scope

2003 Adaptive Path

11

Strategy

2003 Adaptive Path

12

The Five Planes

Concrete

surface
skeleton

structure scope

strategy

Abstract

2003 Adaptive Path

13

The Language Barrier

Information Design Functional Specifications Interaction Design Information Architecture Interface Design Content Requirements Navigation Design

2003 Adaptive Path

14

Web as information

2003 Adaptive Path

15

Web as application

2003 Adaptive Path

16

A Basic Duality
Web as software interface Web as hypertext system

2003 Adaptive Path

17

The Strategy Plane

User Needs: what the site must do for the people who use it Site Objectives: what the site must do for the people who build it

2003 Adaptive Path

18

User Needs
Some are fundamental users need products that:
work they can use meet their expectations

But most are specific to your users and your product

2003 Adaptive Path

19

User Research
Best way to discover user needs Many techniques, ranging from quick and cheap to lengthy and expensive Read the book!

2003 Adaptive Path

20

User Segmentation
Make identifying user needs more manageable Break your audience down into segments based on shared characteristics

2003 Adaptive Path

21

Personas
Character sketches based on user research Extrapolate from a general set of characteristics to a specific case
2003 Adaptive Path

Janet
I dont have time to sort through a lot of information. I need quick answers.
Janet is frustrated with working in a corporate environment and wants to start her own accounting practice.
Age: 42 Occupation: Accounting rm vice president Family: Married, two children Household income: $140,000/year Technical prole: Fairly comfortable with technology; Dell laptop (about one year old) running Windows XP; DSL Internet connection; 8-10 hours/week online Internet use: 75% at home; news and information, shopping

Favorite sites:

WSJ.com

Salon.com

Travelocity.com

22

Site Objectives
Often framed in terms of business
Business goals Business drivers Business requirements

Should be specific to the site Independent of your organizations other activities

2003 Adaptive Path

23

Success Metrics
The only way to know if changing your site has made a difference Closely tied to site objectives More on this tomorrow!
10 9 8 7 6 5 4 3 2 launch of 1 redesigned site target

Jan

Feb

Mar

Apr

May

Jun

Jul

Aug

Sep

Oct

Nov

Dec

visits per month (registered users only)

2003 Adaptive Path

24

The Scope Plane

Functional Specifications: application features the site must include Content Requirements: content elements the site must include

2003 Adaptive Path

25

Functional Specifications
What application features will users need to fulfill their goals? Focus on what it does
not how it works not what it doesnt do

Be specific, but dont dictate system design

2003 Adaptive Path

26

Content Requirements
What information will users need or want from the site? What form should it take? Where will it come from? Whos responsible? Define elements according to their purpose

2003 Adaptive Path

27

Keeping Documentation
Docs are a waste of time. No one reads them Theyre never up-to-date Theyre too much trouble to maintain Time spent planning the site becomes time saved producing the site Integrate documentation into the process, rather than making it a separate step

2003 Adaptive Path

28

The Structure Plane

Interaction Design: how the user moves from one step in a process to the next Information Architecture: how the user moves from one content element to the next
2003 Adaptive Path 29

Interaction Design
Inter-action
Actions the user can take with the system Actions the system can take in response to the user

2003 Adaptive Path

30

Information Architecture
Defines conceptual relationships between content elements Reflects the way users think about the subject matter Often hierarchical, but not necessarily

2003 Adaptive Path

31

Top-down vs. Bottom-up

Top-down starts with categories and slots content into them

categories
content

2003 Adaptive Path

32

Top-down vs. Bottom-up

Bottom-up starts with content and builds up to categories

categories
content

2003 Adaptive Path

33

Documenting Structure
Visual representations tend to work best Diagrams can be as simple or as complex as you need Visual Vocabulary: jjg.net/ia/visvocab
home media info products support

home products press releases file archives office products

continue from: home

login flow

latest news

(2c)

entry page

continue to: member list technical papers

2003 Adaptive Path

34

The Skeleton Plane

Information Design: facilitates comprehension of information Interface Design: facilitates user input and system output Navigation Design: facilitates movement through the site

2003 Adaptive Path

35

Information Design
How can we present this information so that people can understand and use it? Communicate relative importance of different pieces of information Guide the user from one piece to the next Draw attention to important details Communicate relationships between elements
2003 Adaptive Path 36

 2003 Adaptive Path

37

Interface Design
Provides a means for users to interact with application functionality

2003 Adaptive Path

38

Navigation Design
Communicates the choices available to the user Facilitates movement Different designs have different effects

2003 Adaptive Path

39

Wireframes
Brings all skeleton issues together into one high-level sketch Illustrates relative priority of page elements Suggests page layout approaches
2003 Adaptive Path
COURTESY NAV LOGO GLOBAL NAV WAYFINDING CUES HEADER GRAPHIC LOCAL NAV
Pack my box with ve dozen liquor jugs. How razorback-jumping frogs can level six piqued gymnasts! We dislike to exchange job lots of sizes varying from a quarter up. The job requires extra pluck and zeal from every young wage earner. A quart jar of oil mixed with zinc oxide makes a very bright paint. Six big juicy steaks sizzled in a pan as ve workmen left the quarry. The juke box music puzzled a gentle visitor from a quaint valley town. Pack my box with ve dozen liquor jugs. How razorback-jumping frogs can level six piqued gymnasts!

SEARCH QUERY dropdown text field button PARTNER CONTENT

The job requires extra pluck and zeal from every young wage earner. A quart jar of oil mixed with zinc oxide makes a very bright paint. Pack my box with ve dozen liquor jugs.

SUPP. NAV

COURTESY NAV

40

The Surface Plane

Visual Design: the look in look and feel Usually the part people think of when you say Web design More than just aesthetics
2003 Adaptive Path 41

Color Palettes
r:102 g:153 b:204 r:255 g:255 b:204

r:0 g:102 b:204

r:204 g:204 b:153

r:0 g:51 b:153

r:153 g:153 b:102

r:0 g:153 b:0

r:51 g:51 b:51

r:255 g:153 b:0

r:204 g:204 b:204

2003 Adaptive Path

42

Typography
is Apple's custom corporate identity font.

Apple Garamond

is used for body text and navigation.

Lucida Grande

Helvetica Black
is used for some graphics.

is used for legibility at small sizes.

Geneva

2003 Adaptive Path

43

The Elements of User Experience

2003 Adaptive Path

44

Intermission

The Elements Applied

Search Engines
Almost every site has one Every site seems to take a slightly different approach

2003 Adaptive Path

47

Strategy
User Needs
Do users want a search engine? Are there limits to the kind of search functionality users need?

Site Objectives
Is implementing search feasible given our resources? Would implementing search limit our ability to fulfill other goals for the site?
2003 Adaptive Path 48

Scope
Functional Specifications
keyword entry other fields for specifying criteria ability to narrow result set

Content Requirements
labeling result data help docs
2003 Adaptive Path 49

Structure
Interaction Design
choices available to users at each step system behavior under various conditions
continue from: any page advanced search

no results refine search

exactly one result

search results

Information Architecture
architectural scope as search criterion metadata structures
2003 Adaptive Path
content pages

50

Skeleton
Information Design
layout of search results communicating error conditions

Interface Design
user input mechanisms

Navigation Design
moving into and out of search flow moving through search results
2003 Adaptive Path 51

Surface

Visual Design
color typography layout

2003 Adaptive Path

52

Asking the Right Questions

What problem are we trying to solve? What are the consequences of our proposed solution to the problem? Will this solution force us to re-think other problems?

2003 Adaptive Path

53

The Marathon and the Sprint

A sprint is a short race
Get a quick start Burn energy as quickly as possible

A marathon is a long race

Pace yourself Choose when to burn energy

Which race are you trying to run? Which race are you actually in?
2003 Adaptive Path 54

Answering Objections
Our market research tells us everything we need to know about our users.
Demographic data is not user insight

Well just follow this list of guidelines we found on the Internet.

Rules of thumb are necessarily general

Interface is easy technology is hard.

Which is more complicated: machines or people?
2003 Adaptive Path 55

Answering Objections
We cant afford to hire experts.
You dont need experts for everything

Well figure it out as we go.

Improvisation is for jazz, not design

Well fix it in QA.

By that time, its already too late

Theres no time in the schedule.

Youll be saving time on the next release
2003 Adaptive Path 56

Pitfalls to Avoid
Design by default: We should do whatever is easiest to implement. Design by mimicry: If its good enough for Amazon, its good enough for us. Design by fiat: Because I said so.

2003 Adaptive Path

57

Waterfalls Are Dangerous

effort time

effort time
2003 Adaptive Path

58

Iterative Development
Your site is never finished Do what you can right now Always look ahead to the next release
January (now) April July October (next) January

Version 1.0

Version 1.1

2003 Adaptive Path

59

Roles
The specific roles you choose dont matter if youve got all the planes covered

2003 Adaptive Path

60

The Nine Pillars

project management

Core competencies common to successful teams Must be reflected in the teams:

Roles Processes

concrete design

technology implementation

content production

abstract design

technology strategy

content strategy

site strategy

user research

2003 Adaptive Path

tactical
61

strategic

User Research
The foundation of user-centered design Informs all strategic decisions Primary responsibility for identifying user needs Titles:
User Researcher Usability Analyst
user research project management concrete design

technology implementation

content production

abstract design

technology strategy

content strategy

site strategy

2003 Adaptive Path

tactical
62

strategic

Site Strategy
project management

Primary responsibility for defining site objectives Decides priorities and success metrics Titles:
Business Analyst Product Manager Executive Producer

concrete design

technology implementation

content production

abstract design

technology strategy

content strategy

site strategy

user research

2003 Adaptive Path

tactical
63

strategic

Technology Strategy
project management

Often responsible for functional specifications Decides technical platforms and standards to adopt Titles:
Senior Engineer Development Manager Technical Lead

concrete design

technology implementation

content production

abstract design

technology strategy

content strategy

site strategy

user research

2003 Adaptive Path

tactical
64

strategic

Content Strategy
project management

Often responsible for content requirements Decides appropriate format and subject matter Titles:
Content Strategist Content Editor Editor-in-Chief

concrete design

technology implementation

content production

abstract design

technology strategy

content strategy

site strategy

user research

2003 Adaptive Path

tactical
65

strategic

Abstract Design
project management

Turns strategy into design concepts Always responsible for Structure plane Sometimes responsible for Scope and Skeleton planes Titles:
Information Architect Interaction Designer UI Specialist

concrete design

technology implementation

content production

abstract design

technology strategy

content strategy

site strategy

user research

2003 Adaptive Path

tactical
66

strategic

Technology Implementation
project management

Tactical execution of technology strategy May incorporate many roles, from coding to integration to testing Titles:
Software Engineer HTML Developer QA Tester

concrete design

technology implementation

content production

abstract design

technology strategy

content strategy

site strategy

user research

2003 Adaptive Path

tactical
67

strategic

Content Production
project management

Tactical execution of content strategy Gathering, editing, producing, and deploying content (not just text) Titles:
Content Producer Writer Editor

concrete design

technology implementation

content production

abstract design

technology strategy

content strategy

site strategy

user research

2003 Adaptive Path

tactical
68

strategic

Concrete Design
Tactical realization of abstract design Always responsible for Surface plane Sometimes responsible for Skeleton and Structure planes Titles:
Interface Designer Visual Designer
project management concrete design

technology implementation

content production

abstract design

technology strategy

content strategy

site strategy

user research

2003 Adaptive Path

tactical
69

strategic

Project Management
project management

Binds together all tactical competencies Often overlooked in smaller organizations Titles:
Producer Project Manager

concrete design

technology implementation

content production

abstract design

technology strategy

content strategy

site strategy

user research

2003 Adaptive Path

tactical
70

strategic

The Nine Pillars

project management

Not a nine-member team Not a nine-step process You should be able to look at both and see the pillars beneath them

concrete design

technology implementation

content production

abstract design

technology strategy

content strategy

site strategy

user research

2003 Adaptive Path

tactical
71

strategic

What Its All About

Plan before you build Have conscious reasons for your choices Articulate them explicitly Make things people love!

2003 Adaptive Path

72

Thanks!