Elements of User Experience by Jesse James Garrett. Lecture presented to the #MozNewsLab

1. Jesse James Garrett
Adaptive Path

3. user experience design

4. the design of anything
with human experience as an explicit outcome
and human engagement as an explicit goal

5. every design tells a story

6. the product
the user
the world

8. Surface

9. Surface

10. Surface

14. Skeleton

18. Structure

23. Scope

27. Strategy

29. strategy

30. scope
strategy

31. structure
scope
strategy

32. skeleton
structure
scope
strategy

33. surface
skeleton
structure
scope
strategy

34. Concrete
surface
skeleton
structure
scope
strategy Abstract

35. information
technology

41. product as technology product as information

42. product as technology product as information

43. product as technology product as information
ce
rfa Sensory Design
su
on
el e t Interface Design Navigation Design
sk Information Design
re
t u Interaction Information
uc
str Design Architecture
e
c o p Functional Content
s Specifications Requirements
e gy User Needs
at
str Product Objectives

44. Strategy
User Needs: what the
product must do for the product as technology product as information
scope
people who use it g y
User Needs
a te
str Product Objectives
Product Objectives: what the
product must do for the
people who build it

45. Strategy
User Needs
Not just what the product does, but how it does it:
functional, emotional, psychological
Always contextual
Product Objectives
Objectives that don’t address users can’t
generate loyalty
Must be measurable to be effective

46. Scope
Functional Specifications:
application features the product as technology product as information
structure
product must include e
c o p Functional Content
s Specifications Requirements
Content Requirements: strategy
content elements the
product must include

47. Scope
Functional Specifications
Enabled by technology, not dependent on it
Content Requirements
What do your users know, and what do they need
to have explained?
Speak their language

48. Structure
Interaction Design: how the
user moves through and product as technology product as information
makes sense of a task skeleton
reu
u c t Interaction Information
Information Architecture: str Design Architecture
how the user moves through scope
and makes sense of
information

49. Structure
Interaction Design
Making interactions feel natural
Information Architecture
Information structures reflect our understanding
of concepts and the world

50. Skeleton
Information Design:
facilitates comprehension
of information
product as technology product as information
surface
Interface Design: on
el e t Interface Design Navigation Design
facilitates user input and sk Information Design
system output structure
Navigation Design:
facilitates movement
through the information

51. Skeleton
Information Design
Clear communication through text, data, visuals
Interface Design
Interface elements must support interaction goals
Navigation Design
Balancing simplicity of presentation
with diversity of content

52. Surface
product as technology product as information
Sensory Design: how the
c e
product looks, feels, sounds rfa
su Sensory Design
(and sometimes smells
and tastes!) skeleton

53. Surface
Sensory Design
Sensory choices reinforce or undermine other
aspects of the design
Senses engage emotions
We tell stories in sensory terms

54. product as technology product as information
ce
rfa Sensory Design
su
on
el e t Interface Design Navigation Design
sk Information Design
re
t u Interaction Information
uc
str Design Architecture
e
c o p Functional Content
s Specifications Requirements
e gy User Needs
at
str Product Objectives

55. Staying aligned
Understand emotional and psychological context of
use to inspire passionate connections
Connect feature and design choices with underlying
user psychology
Express your product’s personality, not just
functionality
Define the story that your product tells about itself,
the user, and the world

56. Thanks!
jjg.net/elements
jjg.net/ia