The Elements of User Experience

75 downloads 129 Views 2MB Size Report
How a product behaves and is used in the real world. Beyond the product to its context in people's lives. Incorporates diverse range of factors. User Experience ...
The Elements of User Experience Jesse James Garrett

Meet The Elements

“Worst Movie Ever!”

© 2003 Adaptive Path

3

Who Gets the Blame? “I probably overlooked the right choice.” “I must not have read the instructions closely enough.”

?!?

“I guess I’m not smart enough to use this.” © 2003 Adaptive Path

4

Products Are People Too

© 2003 Adaptive Path

5

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

6

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

© 2003 Adaptive Path

7

Surface

© 2003 Adaptive Path

8

Skeleton

© 2003 Adaptive Path

9

Structure

© 2003 Adaptive Path

10

Scope

© 2003 Adaptive Path

11

Strategy

© 2003 Adaptive Path

12

The Five Planes Concrete

surface skeleton

structure scope

strategy

© 2003 Adaptive Path

Abstract

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 don’t 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 firm vice president Family: Married, two children Household income: $140,000/year

Technical profile: 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 organization’s 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

target

7 6 5 4 3 2 launch of 1

redesigned site

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 doesn’t do”

Be specific, but don’t 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? Who’s responsible? Define elements according to their purpose

© 2003 Adaptive Path

27

Keeping Documentation “Docs are a waste of time.” No one reads them They’re never up-to-date They’re 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 file archives

press releases

office products

continue from: home

login flow

latest news

(2c)

continue to: member list

entry page

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

SEARCH QUERY dropdown

LOCAL NAV

SUPP. NAV

Pack my box with five 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 five workmen left the quarry. The juke box music puzzled a gentle visitor from a quaint valley town. Pack my box with five dozen liquor jugs. How razorback-jumping frogs can level six piqued gymnasts!

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 five dozen liquor jugs.

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

© 2003 Adaptive Path

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

42

Typography Apple Garamond

is Apple's custom corporate identity font.

Lucida Grande

is used for body text and navigation.

Helvetica Black is used for some graphics.

Geneva

is used for legibility at small sizes.

© 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 advanced search

no results refine search

choices available to users at each step system behavior under various conditions

continue from: any page

exactly one result

Interaction Design

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

“We’ll 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 can’t afford to hire experts.” You don’t need experts for everything

“We’ll figure it out as we go.” Improvisation is for jazz, not design

“We’ll fix it in QA.” By that time, it’s already too late

“There’s no time in the schedule.” You’ll 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 it’s good enough for Amazon, it’s good enough for us.” Design by fiat: “Because I said so.”

© 2003 Adaptive Path

57

effort

Waterfalls Are Dangerous

effort

time

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

Version 1.0

© 2003 Adaptive Path

July

October

(next) January

Version 1.1

59

Roles The specific roles you choose don’t matter – if you’ve got all the planes covered

© 2003 Adaptive Path

60

The Nine Pillars project management

Roles Processes

technology implementation

content production

abstract design

technology strategy

tactical

concrete design

strategic

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

content strategy

site strategy

user research

© 2003 Adaptive Path

61

User Research

User Researcher

technology implementation

content production

abstract design

technology strategy

tactical

concrete design

strategic

The foundation of user-centered design Informs all strategic decisions Primary responsibility for identifying user needs Titles:

project management

content strategy

site strategy

Usability Analyst user research

© 2003 Adaptive Path

62

Site Strategy project management

Business Analyst Product Manager Executive Producer

© 2003 Adaptive Path

technology implementation

content production

abstract design

technology strategy

tactical

concrete design

strategic

Primary responsibility for defining site objectives Decides priorities and success metrics Titles:

content strategy

site strategy

user research

63

Technology Strategy project management

Senior Engineer Development Manager Technical Lead

© 2003 Adaptive Path

technology implementation

content production

abstract design

technology strategy

tactical

concrete design

strategic

Often responsible for functional specifications Decides technical platforms and standards to adopt Titles:

content strategy

site strategy

user research

64

Content Strategy project management

Content Strategist Content Editor

technology implementation

content production

abstract design

tactical

concrete design

strategic

Often responsible for content requirements Decides appropriate format and subject matter Titles:

content strategy

technology strategy

site strategy

Editor-in-Chief user research

© 2003 Adaptive Path

65

Abstract Design project management

Information Architect Interaction Designer UI Specialist

© 2003 Adaptive Path

technology implementation

content production

abstract design

technology strategy

tactical

concrete design

strategic

Turns strategy into design concepts Always responsible for Structure plane Sometimes responsible for Scope and Skeleton planes Titles:

content strategy

site strategy

user research

66

Technology Implementation project management

Software Engineer HTML Developer QA Tester

technology implementation

content production

abstract design

technology strategy

tactical

concrete design

strategic

Tactical execution of technology strategy May incorporate many roles, from coding to integration to testing Titles:

content strategy

site strategy

user research

© 2003 Adaptive Path

67

Content Production project management

Content Producer Writer Editor

© 2003 Adaptive Path

technology implementation

content production

abstract design

technology strategy

tactical

concrete design

strategic

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

content strategy

site strategy

user research

68

Concrete Design

Interface Designer Visual Designer

© 2003 Adaptive Path

technology implementation

content production

abstract design

technology strategy

tactical

concrete design

strategic

Tactical realization of abstract design Always responsible for Surface plane Sometimes responsible for Skeleton and Structure planes Titles:

project management

content strategy

site strategy

user research

69

Project Management project management

Producer Project Manager

technology implementation

content production

abstract design

technology strategy

tactical

concrete design

strategic

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

content strategy

site strategy

user research

© 2003 Adaptive Path

70

The Nine Pillars project management

technology implementation

content production

abstract design

technology strategy

tactical

concrete design

strategic

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

content strategy

site strategy

user research

© 2003 Adaptive Path

71

What It’s All About Plan before you build Have conscious reasons for your choices Articulate them explicitly Make things people love!

© 2003 Adaptive Path

72

Thanks!