SlideShare uma empresa Scribd logo
1 de 56
Jesse James Garrett
     Adaptive Path
user experience design
the design of anything
with human experience as an explicit outcome
 and human engagement as an explicit goal
every design tells a story
the product
  the user
 the world
Surface
Surface
Surface
Skeleton
Structure
Scope
Strategy
strategy
scope


strategy
structure


 scope


strategy
skeleton


structure


 scope


strategy
surface


skeleton


structure


 scope


strategy
Concrete



surface


skeleton


structure


 scope


strategy    Abstract
information
 technology
product as technology product as information
product as technology product as information
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
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
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
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
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
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
Structure

Interaction Design
      Making interactions feel natural
Information Architecture
      Information structures reflect our understanding
      of concepts and the world
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
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
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
Surface

Sensory Design
      Sensory choices reinforce or undermine other
      aspects of the design
      Senses engage emotions
      We tell stories in sensory terms
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
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
Thanks!
jjg.net/elements
     jjg.net/ia

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

UX design
UX designUX design
UX design
 
UX and UI
UX and UIUX and UI
UX and UI
 
UX RULES: 10 ESSENTIAL PRINCIPLES
UX RULES: 10 ESSENTIAL PRINCIPLESUX RULES: 10 ESSENTIAL PRINCIPLES
UX RULES: 10 ESSENTIAL PRINCIPLES
 
Ui vs UX design
Ui vs UX designUi vs UX design
Ui vs UX design
 
What is UX, in 10 Slides
What is UX, in 10 SlidesWhat is UX, in 10 Slides
What is UX, in 10 Slides
 
UI/UX Fundamentals
UI/UX FundamentalsUI/UX Fundamentals
UI/UX Fundamentals
 
UI & UX Design for Startups
UI & UX Design for StartupsUI & UX Design for Startups
UI & UX Design for Startups
 
The Importance of UX
The Importance of UXThe Importance of UX
The Importance of UX
 
UI UX Introductory session
UI UX Introductory sessionUI UX Introductory session
UI UX Introductory session
 
User Behavior Analytics And The Benefits To Companies
User Behavior Analytics And The Benefits To CompaniesUser Behavior Analytics And The Benefits To Companies
User Behavior Analytics And The Benefits To Companies
 
Ui design
Ui designUi design
Ui design
 
UI vs UX workshop
UI vs UX workshopUI vs UX workshop
UI vs UX workshop
 
User experience design
User experience designUser experience design
User experience design
 
UI vs UX ( User Interface vs User Experience)
UI vs UX ( User Interface vs User Experience)UI vs UX ( User Interface vs User Experience)
UI vs UX ( User Interface vs User Experience)
 
Intro to UX: Enterprise UX
Intro to UX: Enterprise UXIntro to UX: Enterprise UX
Intro to UX: Enterprise UX
 
Ux design-fundamentals
Ux design-fundamentalsUx design-fundamentals
Ux design-fundamentals
 
UX/UI design
UX/UI designUX/UI design
UX/UI design
 
i/o extended: Intro to <UX> Design
i/o extended: Intro to <UX> Design  i/o extended: Intro to <UX> Design
i/o extended: Intro to <UX> Design
 
Introduction to UX Design
Introduction to UX DesignIntroduction to UX Design
Introduction to UX Design
 
UI UX introduction
UI UX introductionUI UX introduction
UI UX introduction
 

Destaque

The Elements of User Experience
The Elements of User ExperienceThe Elements of User Experience
The Elements of User Experience
Bruna Calheiros
 
O reilly.lean.ux.applying.lean.principles.to.improve.user.experience.2013.ret...
O reilly.lean.ux.applying.lean.principles.to.improve.user.experience.2013.ret...O reilly.lean.ux.applying.lean.principles.to.improve.user.experience.2013.ret...
O reilly.lean.ux.applying.lean.principles.to.improve.user.experience.2013.ret...
Mạnh Toán
 
What does a game designer do
What does a game designer doWhat does a game designer do
What does a game designer do
Jesse Schell
 
Sistemas de base de datos rob coronel 5ed
Sistemas de base de datos rob coronel 5edSistemas de base de datos rob coronel 5ed
Sistemas de base de datos rob coronel 5ed
wingzero 2040
 

Destaque (20)

The Elements of User Experience
The Elements of User ExperienceThe Elements of User Experience
The Elements of User Experience
 
The Elements of User Experience
The Elements of User Experience The Elements of User Experience
The Elements of User Experience
 
User-centered design: A road map to usability
User-centered design: A road map to usabilityUser-centered design: A road map to usability
User-centered design: A road map to usability
 
The Elements of User Experience
The Elements of User ExperienceThe Elements of User Experience
The Elements of User Experience
 
UX Explained
UX ExplainedUX Explained
UX Explained
 
What is UX?
What is UX?What is UX?
What is UX?
 
Elements of UX Design
Elements of UX DesignElements of UX Design
Elements of UX Design
 
UX Design + UI Design: Injecting a brand persona!
UX Design + UI Design: Injecting a brand persona!UX Design + UI Design: Injecting a brand persona!
UX Design + UI Design: Injecting a brand persona!
 
Instant information architecture ensad
Instant information architecture   ensadInstant information architecture   ensad
Instant information architecture ensad
 
Oracle UX revolution - Niels Mansveld
Oracle UX revolution - Niels MansveldOracle UX revolution - Niels Mansveld
Oracle UX revolution - Niels Mansveld
 
O reilly.lean.ux.applying.lean.principles.to.improve.user.experience.2013.ret...
O reilly.lean.ux.applying.lean.principles.to.improve.user.experience.2013.ret...O reilly.lean.ux.applying.lean.principles.to.improve.user.experience.2013.ret...
O reilly.lean.ux.applying.lean.principles.to.improve.user.experience.2013.ret...
 
XD Powerpoint
XD PowerpointXD Powerpoint
XD Powerpoint
 
What does a game designer do
What does a game designer doWhat does a game designer do
What does a game designer do
 
User Experience vs. The Visual Designer
User Experience vs. The Visual DesignerUser Experience vs. The Visual Designer
User Experience vs. The Visual Designer
 
Sistemas de base de datos rob coronel 5ed
Sistemas de base de datos rob coronel 5edSistemas de base de datos rob coronel 5ed
Sistemas de base de datos rob coronel 5ed
 
1. JJG Impact Summary
1. JJG Impact Summary1. JJG Impact Summary
1. JJG Impact Summary
 
User-centred design
User-centred designUser-centred design
User-centred design
 
UX Seminar, Elements of UX Research
UX Seminar, Elements of UX Research UX Seminar, Elements of UX Research
UX Seminar, Elements of UX Research
 
01 Introduction to User Experience Design
01 Introduction to User Experience Design01 Introduction to User Experience Design
01 Introduction to User Experience Design
 
Designing for physical versus digital products
Designing for physical versus digital productsDesigning for physical versus digital products
Designing for physical versus digital products
 

Semelhante a Elements of User Experience by Jesse James Garrett

User Research 1 : UX introduction
User Research 1 : UX introductionUser Research 1 : UX introduction
User Research 1 : UX introduction
Taewon Eom
 
The Elements of User Experience
The Elements of User ExperienceThe Elements of User Experience
The Elements of User Experience
Ben van de Sande
 
Elements Of User Experience
Elements Of User ExperienceElements Of User Experience
Elements Of User Experience
guest829deb
 
Elements
ElementsElements
Elements
kaa kaa
 
"Project Design for Optimaizing User Experience" 20070927
"Project Design for Optimaizing User Experience" 20070927"Project Design for Optimaizing User Experience" 20070927
"Project Design for Optimaizing User Experience" 20070927
Takashi Sakamoto
 
UX_JJGarrett_elements
UX_JJGarrett_elementsUX_JJGarrett_elements
UX_JJGarrett_elements
Edwin Ritter
 

Semelhante a Elements of User Experience by Jesse James Garrett (20)

In order for UX to achieve it’s potential, we need to reframe it as a profess...
In order for UX to achieve it’s potential, we need to reframe it as a profess...In order for UX to achieve it’s potential, we need to reframe it as a profess...
In order for UX to achieve it’s potential, we need to reframe it as a profess...
 
Wk08 Best Practice
Wk08 Best PracticeWk08 Best Practice
Wk08 Best Practice
 
Wk08 Best Practice
Wk08 Best PracticeWk08 Best Practice
Wk08 Best Practice
 
Gastronomy: A source of inspiration for user experience design
Gastronomy: A source of inspiration for user experience designGastronomy: A source of inspiration for user experience design
Gastronomy: A source of inspiration for user experience design
 
Elements Of Web Design
Elements Of Web DesignElements Of Web Design
Elements Of Web Design
 
User Research 1 : UX introduction
User Research 1 : UX introductionUser Research 1 : UX introduction
User Research 1 : UX introduction
 
Dk glsec
Dk glsecDk glsec
Dk glsec
 
Zukunftsmarkt Zocken
Zukunftsmarkt ZockenZukunftsmarkt Zocken
Zukunftsmarkt Zocken
 
The Elements of User Experience
The Elements of User ExperienceThe Elements of User Experience
The Elements of User Experience
 
Elements
ElementsElements
Elements
 
Elements Of User Experience
Elements Of User ExperienceElements Of User Experience
Elements Of User Experience
 
Elements
ElementsElements
Elements
 
Element S
Element SElement S
Element S
 
STI, MetaRational #2
STI, MetaRational #2STI, MetaRational #2
STI, MetaRational #2
 
Introduction to Interaction Design
Introduction to Interaction DesignIntroduction to Interaction Design
Introduction to Interaction Design
 
"Project Design for Optimaizing User Experience" 20070927
"Project Design for Optimaizing User Experience" 20070927"Project Design for Optimaizing User Experience" 20070927
"Project Design for Optimaizing User Experience" 20070927
 
UX_JJGarrett_elements
UX_JJGarrett_elementsUX_JJGarrett_elements
UX_JJGarrett_elements
 
UX in Italia: idee e futuro
UX in Italia: idee e futuroUX in Italia: idee e futuro
UX in Italia: idee e futuro
 
User Experience Portfolio. Sushmita Dutt
User Experience Portfolio. Sushmita DuttUser Experience Portfolio. Sushmita Dutt
User Experience Portfolio. Sushmita Dutt
 
Wireframes and UI-Prototypes
Wireframes and UI-PrototypesWireframes and UI-Prototypes
Wireframes and UI-Prototypes
 

Mais de Open Journalism on the Open Web

Mais de Open Journalism on the Open Web (13)

Evan Hansen of Wired talkss to #MozNewsLab
Evan Hansen of Wired talkss to #MozNewsLabEvan Hansen of Wired talkss to #MozNewsLab
Evan Hansen of Wired talkss to #MozNewsLab
 
Oliver Reichenstein's presentation to #MozNewsLab
Oliver Reichenstein's presentation to #MozNewsLabOliver Reichenstein's presentation to #MozNewsLab
Oliver Reichenstein's presentation to #MozNewsLab
 
Lecture slides from @Mohamed of @AJEnglish for #MozNewsLab
Lecture slides from @Mohamed of @AJEnglish for #MozNewsLabLecture slides from @Mohamed of @AJEnglish for #MozNewsLab
Lecture slides from @Mohamed of @AJEnglish for #MozNewsLab
 
SHAZNA NESSA on CHANGE AGENTS
SHAZNA NESSA on CHANGE AGENTSSHAZNA NESSA on CHANGE AGENTS
SHAZNA NESSA on CHANGE AGENTS
 
Open Source Process: jQuery by John Resig
Open Source Process: jQuery by John ResigOpen Source Process: jQuery by John Resig
Open Source Process: jQuery by John Resig
 
Christian Heilmann's 'State of the Browser in 2011'
Christian Heilmann's 'State of the Browser in 2011'Christian Heilmann's 'State of the Browser in 2011'
Christian Heilmann's 'State of the Browser in 2011'
 
Amanda Cox - Visualizing data at the New York Times
Amanda Cox - Visualizing data at the New York TimesAmanda Cox - Visualizing data at the New York Times
Amanda Cox - Visualizing data at the New York Times
 
Burt Herman: Follow the story
Burt Herman: Follow the storyBurt Herman: Follow the story
Burt Herman: Follow the story
 
Amanda Hickman's presentation
Amanda Hickman's presentationAmanda Hickman's presentation
Amanda Hickman's presentation
 
Big Ugly Datasets For Thumb-Fingered Journalists
Big Ugly Datasets For Thumb-Fingered JournalistsBig Ugly Datasets For Thumb-Fingered Journalists
Big Ugly Datasets For Thumb-Fingered Journalists
 
Why does Mozilla care about news?
Why does Mozilla care about news? Why does Mozilla care about news?
Why does Mozilla care about news?
 
Hh p2 pu class
Hh p2 pu classHh p2 pu class
Hh p2 pu class
 
Open journalismfortheopenweb intro-sept2010
Open journalismfortheopenweb intro-sept2010Open journalismfortheopenweb intro-sept2010
Open journalismfortheopenweb intro-sept2010
 

Último

Salient Features of India constitution especially power and functions
Salient Features of India constitution especially power and functionsSalient Features of India constitution especially power and functions
Salient Features of India constitution especially power and functions
KarakKing
 
The basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptxThe basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptx
heathfieldcps1
 

Último (20)

TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...
TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...
TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...
 
Unit-V; Pricing (Pharma Marketing Management).pptx
Unit-V; Pricing (Pharma Marketing Management).pptxUnit-V; Pricing (Pharma Marketing Management).pptx
Unit-V; Pricing (Pharma Marketing Management).pptx
 
SOC 101 Demonstration of Learning Presentation
SOC 101 Demonstration of Learning PresentationSOC 101 Demonstration of Learning Presentation
SOC 101 Demonstration of Learning Presentation
 
2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx
2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx
2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx
 
SKILL OF INTRODUCING THE LESSON MICRO SKILLS.pptx
SKILL OF INTRODUCING THE LESSON MICRO SKILLS.pptxSKILL OF INTRODUCING THE LESSON MICRO SKILLS.pptx
SKILL OF INTRODUCING THE LESSON MICRO SKILLS.pptx
 
Salient Features of India constitution especially power and functions
Salient Features of India constitution especially power and functionsSalient Features of India constitution especially power and functions
Salient Features of India constitution especially power and functions
 
REMIFENTANIL: An Ultra short acting opioid.pptx
REMIFENTANIL: An Ultra short acting opioid.pptxREMIFENTANIL: An Ultra short acting opioid.pptx
REMIFENTANIL: An Ultra short acting opioid.pptx
 
Understanding Accommodations and Modifications
Understanding  Accommodations and ModificationsUnderstanding  Accommodations and Modifications
Understanding Accommodations and Modifications
 
Python Notes for mca i year students osmania university.docx
Python Notes for mca i year students osmania university.docxPython Notes for mca i year students osmania university.docx
Python Notes for mca i year students osmania university.docx
 
Single or Multiple melodic lines structure
Single or Multiple melodic lines structureSingle or Multiple melodic lines structure
Single or Multiple melodic lines structure
 
How to Manage Global Discount in Odoo 17 POS
How to Manage Global Discount in Odoo 17 POSHow to Manage Global Discount in Odoo 17 POS
How to Manage Global Discount in Odoo 17 POS
 
Spatium Project Simulation student brief
Spatium Project Simulation student briefSpatium Project Simulation student brief
Spatium Project Simulation student brief
 
Application orientated numerical on hev.ppt
Application orientated numerical on hev.pptApplication orientated numerical on hev.ppt
Application orientated numerical on hev.ppt
 
The basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptxThe basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptx
 
Jamworks pilot and AI at Jisc (20/03/2024)
Jamworks pilot and AI at Jisc (20/03/2024)Jamworks pilot and AI at Jisc (20/03/2024)
Jamworks pilot and AI at Jisc (20/03/2024)
 
Making communications land - Are they received and understood as intended? we...
Making communications land - Are they received and understood as intended? we...Making communications land - Are they received and understood as intended? we...
Making communications land - Are they received and understood as intended? we...
 
ICT Role in 21st Century Education & its Challenges.pptx
ICT Role in 21st Century Education & its Challenges.pptxICT Role in 21st Century Education & its Challenges.pptx
ICT Role in 21st Century Education & its Challenges.pptx
 
HMCS Max Bernays Pre-Deployment Brief (May 2024).pptx
HMCS Max Bernays Pre-Deployment Brief (May 2024).pptxHMCS Max Bernays Pre-Deployment Brief (May 2024).pptx
HMCS Max Bernays Pre-Deployment Brief (May 2024).pptx
 
UGC NET Paper 1 Mathematical Reasoning & Aptitude.pdf
UGC NET Paper 1 Mathematical Reasoning & Aptitude.pdfUGC NET Paper 1 Mathematical Reasoning & Aptitude.pdf
UGC NET Paper 1 Mathematical Reasoning & Aptitude.pdf
 
Fostering Friendships - Enhancing Social Bonds in the Classroom
Fostering Friendships - Enhancing Social Bonds  in the ClassroomFostering Friendships - Enhancing Social Bonds  in the Classroom
Fostering Friendships - Enhancing Social Bonds in the Classroom
 

Elements of User Experience by Jesse James Garrett