SlideShare a Scribd company logo
Jesse James Garrett
The Elements of User Experience                                                                                                                                    jjg@jjg.net
A basic duality: The Web was originally conceived as a hypertextual information space;                                                                             30 March 2000
but the development of increasingly sophisticated front- and back-end technologies has
fostered its use as a remote software interface. This dual nature has led to much confusion,
as user experience practitioners have attempted to adapt their terminology to cases beyond
the scope of its original application. The goal of this document is to define some of these
terms within their appropriate contexts, and to clarify the underlying relationships among
these various elements.



Web as software interface                             Concrete                                                   Completion                         Web as hypertext system

                                                                                                                                   Visual Design: visual treatment of text,
Visual Design: graphic treatment of interface
elements (the quot;lookquot; in quot;look-and-feelquot;)                                   Visual Design                                           graphic page elements and navigational
                                                                                                                                   components

Interface Design: as in traditional HCI:                                                                                           Navigation Design: design of interface
design of interface elements to facilitate                                                                                         elements to facilitate the user's movement
user interaction with functionality
                                                                       Interface Design Navigation Design                          through the information architecture
Information Design: in the Tuftean sense:
designing the presentation of information                            Information Design                                            Information Design: in the Tuftean sense:
                                                                                                                                   designing the presentation of information
to facilitate understanding                                                                                                        to facilitate understanding

Interaction Design: development of                                     Interaction Information




                                                                                                                        time
                                                                                                                                   Information Architecture: structural design
application flows to facilitate user tasks,
defining how the user interacts with
                                                                       Design     Architecture                                     of the information space to facilitate
                                                                                                                                   intuitive access to content
site functionality

Functional Specifications: quot;feature setquot;:                                                                                          Content Requirements: definition of
detailed descriptions of functionality the site
                                                                      Functional      Content                                      content elements required in the site
must include in order to meet user needs                          Specifications Requirements                                      in order to meet user needs

User Needs: externally derived goals                                                                                               User Needs: externally derived goals
for the site; identified through user research,                                                                                    for the site; identified through user research,
ethno/techno/psychographics, etc.                                              User Needs                                          ethno/techno/psychographics, etc.
Site Objectives: business, creative, or other                                                                                      Site Objectives: business, creative, or other
internally derived goals for the site                                    Site Objectives                                           internally derived goals for the site
task-oriented                                          Abstract                                                  Conception                               information-oriented

          This picture is incomplete: The model outlined here does not account for secondary considerations (such as those arising during technical or content development)
          that may influence decisions during user experience development. Also, this model does not describe a development process, nor does it define roles within a
          user experience development team. Rather, it seeks to define the key considerations that go into the development of user experience on the Web today.
© 2000 Jesse James Garrett                                                                                                                                         http://www.jjg.net/ia/

More Related Content

What's hot

PxS’12 - week 10 - screen design
PxS’12 - week 10 - screen designPxS’12 - week 10 - screen design
PxS’12 - week 10 - screen design
hendrikknoche
 
Intro to UX part two
Intro to UX part twoIntro to UX part two
Intro to UX part two
Kagonya Awori
 
How content strategy fits into the user experience
How content strategy fits into the user experienceHow content strategy fits into the user experience
How content strategy fits into the user experience
Nick Finck
 
What is UX? Where user experience begins and ends.
What is UX? Where user experience begins and ends.What is UX? Where user experience begins and ends.
What is UX? Where user experience begins and ends.
100 Shapes
 
사용자 중심의 소프트웨어 개발을 위한 UI/UX 참조모델 가이드
사용자 중심의 소프트웨어 개발을 위한 UI/UX 참조모델 가이드사용자 중심의 소프트웨어 개발을 위한 UI/UX 참조모델 가이드
사용자 중심의 소프트웨어 개발을 위한 UI/UX 참조모델 가이드
한국디자인진흥원 공공서비스디자인PD
 
Nttd interactive 20120601
Nttd interactive 20120601Nttd interactive 20120601
Nttd interactive 20120601
Dana Helland
 

What's hot (20)

User Experience
User ExperienceUser Experience
User Experience
 
The Many Facets of UX Design
The Many Facets of UX DesignThe Many Facets of UX Design
The Many Facets of UX Design
 
PxS’12 - week 10 - screen design
PxS’12 - week 10 - screen designPxS’12 - week 10 - screen design
PxS’12 - week 10 - screen design
 
Intro to UX part two
Intro to UX part twoIntro to UX part two
Intro to UX part two
 
User Experience Design Fundamentals - Part 1: Users & Goals
User Experience Design Fundamentals - Part 1: Users & GoalsUser Experience Design Fundamentals - Part 1: Users & Goals
User Experience Design Fundamentals - Part 1: Users & Goals
 
App Development: Beginning with the end-user in mind
App Development: Beginning with the end-user in mindApp Development: Beginning with the end-user in mind
App Development: Beginning with the end-user in mind
 
How content strategy fits into the user experience
How content strategy fits into the user experienceHow content strategy fits into the user experience
How content strategy fits into the user experience
 
What is UX? Where user experience begins and ends.
What is UX? Where user experience begins and ends.What is UX? Where user experience begins and ends.
What is UX? Where user experience begins and ends.
 
사용자 중심의 소프트웨어 개발을 위한 UI/UX 참조모델 가이드
사용자 중심의 소프트웨어 개발을 위한 UI/UX 참조모델 가이드사용자 중심의 소프트웨어 개발을 위한 UI/UX 참조모델 가이드
사용자 중심의 소프트웨어 개발을 위한 UI/UX 참조모델 가이드
 
User Interface Design Chapter 2 Galiz
User Interface Design Chapter 2 GalizUser Interface Design Chapter 2 Galiz
User Interface Design Chapter 2 Galiz
 
UX Design - Client presentation
UX Design - Client presentationUX Design - Client presentation
UX Design - Client presentation
 
User Experience Design & Paper Prototyping
User Experience Design & Paper PrototypingUser Experience Design & Paper Prototyping
User Experience Design & Paper Prototyping
 
Nttd interactive 20120601
Nttd interactive 20120601Nttd interactive 20120601
Nttd interactive 20120601
 
Web Design and Build
Web Design and BuildWeb Design and Build
Web Design and Build
 
what is interaction design
what is interaction designwhat is interaction design
what is interaction design
 
UX STRAT Online 2021 Presentation by Josephine Scholtes, Microsoft
UX STRAT Online 2021 Presentation by Josephine Scholtes, MicrosoftUX STRAT Online 2021 Presentation by Josephine Scholtes, Microsoft
UX STRAT Online 2021 Presentation by Josephine Scholtes, Microsoft
 
User-Testing, Testing, 1,2,3
User-Testing, Testing, 1,2,3User-Testing, Testing, 1,2,3
User-Testing, Testing, 1,2,3
 
User Experience Workshop
User Experience WorkshopUser Experience Workshop
User Experience Workshop
 
Role of UX in Mobility Landscape
Role of UX in Mobility LandscapeRole of UX in Mobility Landscape
Role of UX in Mobility Landscape
 
Embry-Riddle Campus Solutions UX Design
Embry-Riddle Campus Solutions UX Design Embry-Riddle Campus Solutions UX Design
Embry-Riddle Campus Solutions UX Design
 

Viewers also liked

The Elements of User Experience
The Elements of User ExperienceThe Elements of User Experience
The Elements of User Experience
Bruna Calheiros
 
User interface design: definitions, processes and principles
User interface design: definitions, processes and principlesUser interface design: definitions, processes and principles
User interface design: definitions, processes and principles
David Little
 

Viewers also liked (10)

The Elements of User Experience
The Elements of User ExperienceThe 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
 
Elements of UX Design
Elements of UX DesignElements of UX Design
Elements of UX Design
 
XD Powerpoint
XD PowerpointXD Powerpoint
XD Powerpoint
 
UX Seminar, Elements of UX Research
UX Seminar, Elements of UX Research UX Seminar, Elements of UX Research
UX Seminar, Elements of UX Research
 
UX Explained
UX ExplainedUX Explained
UX Explained
 
Making Good Design Decisions
Making Good Design DecisionsMaking Good Design Decisions
Making Good Design Decisions
 
The 'Aha' Moment: How Great Designs Play With Our Psychology?
The 'Aha' Moment: How Great Designs Play With Our Psychology?The 'Aha' Moment: How Great Designs Play With Our Psychology?
The 'Aha' Moment: How Great Designs Play With Our Psychology?
 
Lecture 7 Software Engineering and Design User Interface Design
Lecture 7 Software Engineering and Design User Interface Design Lecture 7 Software Engineering and Design User Interface Design
Lecture 7 Software Engineering and Design User Interface Design
 
User interface design: definitions, processes and principles
User interface design: definitions, processes and principlesUser interface design: definitions, processes and principles
User interface design: definitions, processes and principles
 

Similar to The Elements of User Experience

The Elements of User Experience
The Elements of User ExperienceThe Elements of User Experience
The Elements of User Experience
Ben van de Sande
 
UX_JJGarrett_elements
UX_JJGarrett_elementsUX_JJGarrett_elements
UX_JJGarrett_elements
Edwin Ritter
 
Elements
ElementsElements
Elements
kaa kaa
 
Elements Of User Experience
Elements Of User ExperienceElements Of User Experience
Elements Of User Experience
guest829deb
 
"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
 
Elementos da experiência do usuário
Elementos da experiência do usuárioElementos da experiência do usuário
Elementos da experiência do usuário
Jonathan Prateat
 
User Research 1 : UX introduction
User Research 1 : UX introductionUser Research 1 : UX introduction
User Research 1 : UX introduction
Taewon Eom
 

Similar to The Elements of User Experience (20)

The Elements of User Experience
The Elements of User ExperienceThe Elements of User Experience
The Elements of User Experience
 
Elements
ElementsElements
Elements
 
UX_JJGarrett_elements
UX_JJGarrett_elementsUX_JJGarrett_elements
UX_JJGarrett_elements
 
Elements
ElementsElements
Elements
 
Element S
Element SElement S
Element S
 
Elements Of User Experience
Elements Of User ExperienceElements Of User Experience
Elements Of User Experience
 
Elements
ElementsElements
Elements
 
Elements Of Web Design
Elements Of Web DesignElements Of Web Design
Elements Of Web Design
 
Dk glsec
Dk glsecDk glsec
Dk glsec
 
Wk08 Best Practice
Wk08 Best PracticeWk08 Best Practice
Wk08 Best Practice
 
Wk08 Best Practice
Wk08 Best PracticeWk08 Best Practice
Wk08 Best Practice
 
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...
 
Zukunftsmarkt Zocken
Zukunftsmarkt ZockenZukunftsmarkt Zocken
Zukunftsmarkt Zocken
 
"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 in Italia: idee e futuro
UX in Italia: idee e futuroUX in Italia: idee e futuro
UX in Italia: idee e futuro
 
WebSig24/7 "IA" 20060929
WebSig24/7 "IA" 20060929WebSig24/7 "IA" 20060929
WebSig24/7 "IA" 20060929
 
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
 
Lean UX
Lean UXLean UX
Lean UX
 
Elementos da experiência do usuário
Elementos da experiência do usuárioElementos da experiência do usuário
Elementos da experiência do usuário
 
User Research 1 : UX introduction
User Research 1 : UX introductionUser Research 1 : UX introduction
User Research 1 : UX introduction
 

Recently uploaded

Recently uploaded (20)

Integrating Telephony Systems with Salesforce: Insights and Considerations, B...
Integrating Telephony Systems with Salesforce: Insights and Considerations, B...Integrating Telephony Systems with Salesforce: Insights and Considerations, B...
Integrating Telephony Systems with Salesforce: Insights and Considerations, B...
 
Free and Effective: Making Flows Publicly Accessible, Yumi Ibrahimzade
Free and Effective: Making Flows Publicly Accessible, Yumi IbrahimzadeFree and Effective: Making Flows Publicly Accessible, Yumi Ibrahimzade
Free and Effective: Making Flows Publicly Accessible, Yumi Ibrahimzade
 
Unpacking Value Delivery - Agile Oxford Meetup - May 2024.pptx
Unpacking Value Delivery - Agile Oxford Meetup - May 2024.pptxUnpacking Value Delivery - Agile Oxford Meetup - May 2024.pptx
Unpacking Value Delivery - Agile Oxford Meetup - May 2024.pptx
 
Bits & Pixels using AI for Good.........
Bits & Pixels using AI for Good.........Bits & Pixels using AI for Good.........
Bits & Pixels using AI for Good.........
 
UiPath Test Automation using UiPath Test Suite series, part 1
UiPath Test Automation using UiPath Test Suite series, part 1UiPath Test Automation using UiPath Test Suite series, part 1
UiPath Test Automation using UiPath Test Suite series, part 1
 
IoT Analytics Company Presentation May 2024
IoT Analytics Company Presentation May 2024IoT Analytics Company Presentation May 2024
IoT Analytics Company Presentation May 2024
 
Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered Quality
Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered QualitySoftware Delivery At the Speed of AI: Inflectra Invests In AI-Powered Quality
Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered Quality
 
Knowledge engineering: from people to machines and back
Knowledge engineering: from people to machines and backKnowledge engineering: from people to machines and back
Knowledge engineering: from people to machines and back
 
Exploring UiPath Orchestrator API: updates and limits in 2024 🚀
Exploring UiPath Orchestrator API: updates and limits in 2024 🚀Exploring UiPath Orchestrator API: updates and limits in 2024 🚀
Exploring UiPath Orchestrator API: updates and limits in 2024 🚀
 
"Impact of front-end architecture on development cost", Viktor Turskyi
"Impact of front-end architecture on development cost", Viktor Turskyi"Impact of front-end architecture on development cost", Viktor Turskyi
"Impact of front-end architecture on development cost", Viktor Turskyi
 
Mission to Decommission: Importance of Decommissioning Products to Increase E...
Mission to Decommission: Importance of Decommissioning Products to Increase E...Mission to Decommission: Importance of Decommissioning Products to Increase E...
Mission to Decommission: Importance of Decommissioning Products to Increase E...
 
Measures in SQL (a talk at SF Distributed Systems meetup, 2024-05-22)
Measures in SQL (a talk at SF Distributed Systems meetup, 2024-05-22)Measures in SQL (a talk at SF Distributed Systems meetup, 2024-05-22)
Measures in SQL (a talk at SF Distributed Systems meetup, 2024-05-22)
 
JMeter webinar - integration with InfluxDB and Grafana
JMeter webinar - integration with InfluxDB and GrafanaJMeter webinar - integration with InfluxDB and Grafana
JMeter webinar - integration with InfluxDB and Grafana
 
To Graph or Not to Graph Knowledge Graph Architectures and LLMs
To Graph or Not to Graph Knowledge Graph Architectures and LLMsTo Graph or Not to Graph Knowledge Graph Architectures and LLMs
To Graph or Not to Graph Knowledge Graph Architectures and LLMs
 
Demystifying gRPC in .Net by John Staveley
Demystifying gRPC in .Net by John StaveleyDemystifying gRPC in .Net by John Staveley
Demystifying gRPC in .Net by John Staveley
 
Custom Approval Process: A New Perspective, Pavel Hrbacek & Anindya Halder
Custom Approval Process: A New Perspective, Pavel Hrbacek & Anindya HalderCustom Approval Process: A New Perspective, Pavel Hrbacek & Anindya Halder
Custom Approval Process: A New Perspective, Pavel Hrbacek & Anindya Halder
 
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024
 
Salesforce Adoption – Metrics, Methods, and Motivation, Antone Kom
Salesforce Adoption – Metrics, Methods, and Motivation, Antone KomSalesforce Adoption – Metrics, Methods, and Motivation, Antone Kom
Salesforce Adoption – Metrics, Methods, and Motivation, Antone Kom
 
PLAI - Acceleration Program for Generative A.I. Startups
PLAI - Acceleration Program for Generative A.I. StartupsPLAI - Acceleration Program for Generative A.I. Startups
PLAI - Acceleration Program for Generative A.I. Startups
 
SOQL 201 for Admins & Developers: Slice & Dice Your Org’s Data With Aggregate...
SOQL 201 for Admins & Developers: Slice & Dice Your Org’s Data With Aggregate...SOQL 201 for Admins & Developers: Slice & Dice Your Org’s Data With Aggregate...
SOQL 201 for Admins & Developers: Slice & Dice Your Org’s Data With Aggregate...
 

The Elements of User Experience

  • 1. Jesse James Garrett The Elements of User Experience jjg@jjg.net A basic duality: The Web was originally conceived as a hypertextual information space; 30 March 2000 but the development of increasingly sophisticated front- and back-end technologies has fostered its use as a remote software interface. This dual nature has led to much confusion, as user experience practitioners have attempted to adapt their terminology to cases beyond the scope of its original application. The goal of this document is to define some of these terms within their appropriate contexts, and to clarify the underlying relationships among these various elements. Web as software interface Concrete Completion Web as hypertext system Visual Design: visual treatment of text, Visual Design: graphic treatment of interface elements (the quot;lookquot; in quot;look-and-feelquot;) Visual Design graphic page elements and navigational components Interface Design: as in traditional HCI: Navigation Design: design of interface design of interface elements to facilitate elements to facilitate the user's movement user interaction with functionality Interface Design Navigation Design through the information architecture Information Design: in the Tuftean sense: designing the presentation of information Information Design Information Design: in the Tuftean sense: designing the presentation of information to facilitate understanding to facilitate understanding Interaction Design: development of Interaction Information time Information Architecture: structural design application flows to facilitate user tasks, defining how the user interacts with Design Architecture of the information space to facilitate intuitive access to content site functionality Functional Specifications: quot;feature setquot;: Content Requirements: definition of detailed descriptions of functionality the site Functional Content content elements required in the site must include in order to meet user needs Specifications Requirements in order to meet user needs User Needs: externally derived goals User Needs: externally derived goals for the site; identified through user research, for the site; identified through user research, ethno/techno/psychographics, etc. User Needs ethno/techno/psychographics, etc. Site Objectives: business, creative, or other Site Objectives: business, creative, or other internally derived goals for the site Site Objectives internally derived goals for the site task-oriented Abstract Conception information-oriented This picture is incomplete: The model outlined here does not account for secondary considerations (such as those arising during technical or content development) that may influence decisions during user experience development. Also, this model does not describe a development process, nor does it define roles within a user experience development team. Rather, it seeks to define the key considerations that go into the development of user experience on the Web today. © 2000 Jesse James Garrett http://www.jjg.net/ia/