SlideShare una empresa de Scribd logo
1 de 1
Descargar para leer sin conexión
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/

Más contenido relacionado

La actualidad más candente

STI, MetaRational #2
STI, MetaRational #2STI, MetaRational #2
STI, MetaRational #2João Ramos
 
User Research 1 : UX introduction
User Research 1 : UX introductionUser Research 1 : UX introduction
User Research 1 : UX introductionTaewon Eom
 
The Elements of User Experience
The Elements of User Experience The Elements of User Experience
The Elements of User Experience brandextract
 
Designing Multimedia Project
Designing Multimedia ProjectDesigning Multimedia Project
Designing Multimedia Projectnisa5898
 
User Experience Design [UXD]
User Experience Design [UXD]User Experience Design [UXD]
User Experience Design [UXD]Divya Bhatia
 
Intranets - Vision, Approach and Best Practices by Optimus BT
Intranets - Vision, Approach and Best Practices by Optimus BTIntranets - Vision, Approach and Best Practices by Optimus BT
Intranets - Vision, Approach and Best Practices by Optimus BTOptimus BT
 
GeniUS: Generic User Modeling Library for the Social Semantic Web
GeniUS: Generic User Modeling Library for the Social Semantic WebGeniUS: Generic User Modeling Library for the Social Semantic Web
GeniUS: Generic User Modeling Library for the Social Semantic WebWeb Information Systems, TU Delft
 
Future of retail retail social business architektur 2012
Future of retail  retail social business architektur 2012Future of retail  retail social business architektur 2012
Future of retail retail social business architektur 2012Friedel Jonker
 

La actualidad más candente (9)

STI, MetaRational #2
STI, MetaRational #2STI, MetaRational #2
STI, MetaRational #2
 
User Research 1 : UX introduction
User Research 1 : UX introductionUser Research 1 : UX introduction
User Research 1 : UX introduction
 
Introducing User Experience Design
Introducing User Experience Design Introducing User Experience Design
Introducing User Experience Design
 
The Elements of User Experience
The Elements of User Experience The Elements of User Experience
The Elements of User Experience
 
Designing Multimedia Project
Designing Multimedia ProjectDesigning Multimedia Project
Designing Multimedia Project
 
User Experience Design [UXD]
User Experience Design [UXD]User Experience Design [UXD]
User Experience Design [UXD]
 
Intranets - Vision, Approach and Best Practices by Optimus BT
Intranets - Vision, Approach and Best Practices by Optimus BTIntranets - Vision, Approach and Best Practices by Optimus BT
Intranets - Vision, Approach and Best Practices by Optimus BT
 
GeniUS: Generic User Modeling Library for the Social Semantic Web
GeniUS: Generic User Modeling Library for the Social Semantic WebGeniUS: Generic User Modeling Library for the Social Semantic Web
GeniUS: Generic User Modeling Library for the Social Semantic Web
 
Future of retail retail social business architektur 2012
Future of retail  retail social business architektur 2012Future of retail  retail social business architektur 2012
Future of retail retail social business architektur 2012
 

Similar a Element S

The Elements of User Experience
The Elements of User ExperienceThe Elements of User Experience
The Elements of User ExperienceBen van de Sande
 
The Elements of User Experience
The Elements of User ExperienceThe Elements of User Experience
The Elements of User ExperienceMichael Grillhösl
 
Elements Of Web Design
Elements Of Web DesignElements Of Web Design
Elements Of Web DesignDan Dixon
 
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...Peter Merholz
 
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árioJonathan Prateat
 
Putting the "User" back in User Experience
Putting the "User" back in User ExperiencePutting the "User" back in User Experience
Putting the "User" back in User ExperienceJeremy Johnson
 
Scct2013 topic5-introto applicationdevelopment
Scct2013 topic5-introto applicationdevelopmentScct2013 topic5-introto applicationdevelopment
Scct2013 topic5-introto applicationdevelopmentAnies Syahieda
 
Putting the "User" back in User Experience (Dallas Techfest Edition)
Putting the "User" back in User Experience (Dallas Techfest Edition)Putting the "User" back in User Experience (Dallas Techfest Edition)
Putting the "User" back in User Experience (Dallas Techfest Edition)Jeremy Johnson
 
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 experienceNick Finck
 
Information Architecture: Get Your Blue Prints in Order
Information Architecture: Get Your Blue Prints in OrderInformation Architecture: Get Your Blue Prints in Order
Information Architecture: Get Your Blue Prints in OrderBusinessOnline
 
Wireframes and UI-Prototypes
Wireframes and UI-PrototypesWireframes and UI-Prototypes
Wireframes and UI-Prototypestec
 
User Centered Design and SharePoint Publishing Portals
User Centered Design and SharePoint Publishing PortalsUser Centered Design and SharePoint Publishing Portals
User Centered Design and SharePoint Publishing PortalsTom Pham
 
Workflow - IED Barcelona - Digital Media 2012
Workflow - IED Barcelona - Digital Media 2012Workflow - IED Barcelona - Digital Media 2012
Workflow - IED Barcelona - Digital Media 2012Mario Esposito
 
what is interaction design
what is interaction designwhat is interaction design
what is interaction designAynne Valencia
 

Similar a Element S (20)

The Elements of User Experience
The Elements of User ExperienceThe Elements of User Experience
The Elements of User Experience
 
Elements
ElementsElements
Elements
 
The Elements of User Experience
The Elements of User ExperienceThe Elements of User Experience
The Elements of User Experience
 
Elements
ElementsElements
Elements
 
Elements Of Web Design
Elements Of Web DesignElements Of Web Design
Elements Of Web Design
 
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
 
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
 
Putting the "User" back in User Experience
Putting the "User" back in User ExperiencePutting the "User" back in User Experience
Putting the "User" back in User Experience
 
Elements of User Experience by Jesse James Garrett
Elements of User Experience by Jesse James GarrettElements of User Experience by Jesse James Garrett
Elements of User Experience by Jesse James Garrett
 
Scct2013 topic5-introto applicationdevelopment
Scct2013 topic5-introto applicationdevelopmentScct2013 topic5-introto applicationdevelopment
Scct2013 topic5-introto applicationdevelopment
 
Putting the "User" back in User Experience (Dallas Techfest Edition)
Putting the "User" back in User Experience (Dallas Techfest Edition)Putting the "User" back in User Experience (Dallas Techfest Edition)
Putting the "User" back in User Experience (Dallas Techfest Edition)
 
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
 
Information Architecture: Get Your Blue Prints in Order
Information Architecture: Get Your Blue Prints in OrderInformation Architecture: Get Your Blue Prints in Order
Information Architecture: Get Your Blue Prints in Order
 
Wireframes and UI-Prototypes
Wireframes and UI-PrototypesWireframes and UI-Prototypes
Wireframes and UI-Prototypes
 
User Centered Design and SharePoint Publishing Portals
User Centered Design and SharePoint Publishing PortalsUser Centered Design and SharePoint Publishing Portals
User Centered Design and SharePoint Publishing Portals
 
Workflow - IED Barcelona - Digital Media 2012
Workflow - IED Barcelona - Digital Media 2012Workflow - IED Barcelona - Digital Media 2012
Workflow - IED Barcelona - Digital Media 2012
 
Intro to UIUX.pptx
Intro to UIUX.pptxIntro to UIUX.pptx
Intro to UIUX.pptx
 
what is interaction design
what is interaction designwhat is interaction design
what is interaction design
 

Último

Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmaticsKotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmaticscarlostorres15106
 
Search Engine Optimization SEO PDF for 2024.pdf
Search Engine Optimization SEO PDF for 2024.pdfSearch Engine Optimization SEO PDF for 2024.pdf
Search Engine Optimization SEO PDF for 2024.pdfRankYa
 
Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 3652toLead Limited
 
Connect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationConnect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationSlibray Presentation
 
Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?Mattias Andersson
 
SAP Build Work Zone - Overview L2-L3.pptx
SAP Build Work Zone - Overview L2-L3.pptxSAP Build Work Zone - Overview L2-L3.pptx
SAP Build Work Zone - Overview L2-L3.pptxNavinnSomaal
 
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek SchlawackFwdays
 
Vector Databases 101 - An introduction to the world of Vector Databases
Vector Databases 101 - An introduction to the world of Vector DatabasesVector Databases 101 - An introduction to the world of Vector Databases
Vector Databases 101 - An introduction to the world of Vector DatabasesZilliz
 
Scanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL CertsScanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL CertsRizwan Syed
 
Story boards and shot lists for my a level piece
Story boards and shot lists for my a level pieceStory boards and shot lists for my a level piece
Story boards and shot lists for my a level piececharlottematthew16
 
Unleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding ClubUnleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding ClubKalema Edgar
 
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024BookNet Canada
 
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Mark Simos
 
Unraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfUnraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfAlex Barbosa Coqueiro
 
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsDevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsSergiu Bodiu
 
Install Stable Diffusion in windows machine
Install Stable Diffusion in windows machineInstall Stable Diffusion in windows machine
Install Stable Diffusion in windows machinePadma Pradeep
 
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
"Federated learning: out of reach no matter how close",Oleksandr LapshynFwdays
 
My INSURER PTE LTD - Insurtech Innovation Award 2024
My INSURER PTE LTD - Insurtech Innovation Award 2024My INSURER PTE LTD - Insurtech Innovation Award 2024
My INSURER PTE LTD - Insurtech Innovation Award 2024The Digital Insurer
 

Último (20)

Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmaticsKotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
 
Search Engine Optimization SEO PDF for 2024.pdf
Search Engine Optimization SEO PDF for 2024.pdfSearch Engine Optimization SEO PDF for 2024.pdf
Search Engine Optimization SEO PDF for 2024.pdf
 
Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365
 
Connect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationConnect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck Presentation
 
DMCC Future of Trade Web3 - Special Edition
DMCC Future of Trade Web3 - Special EditionDMCC Future of Trade Web3 - Special Edition
DMCC Future of Trade Web3 - Special Edition
 
Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?
 
SAP Build Work Zone - Overview L2-L3.pptx
SAP Build Work Zone - Overview L2-L3.pptxSAP Build Work Zone - Overview L2-L3.pptx
SAP Build Work Zone - Overview L2-L3.pptx
 
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
 
Vector Databases 101 - An introduction to the world of Vector Databases
Vector Databases 101 - An introduction to the world of Vector DatabasesVector Databases 101 - An introduction to the world of Vector Databases
Vector Databases 101 - An introduction to the world of Vector Databases
 
Scanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL CertsScanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL Certs
 
Story boards and shot lists for my a level piece
Story boards and shot lists for my a level pieceStory boards and shot lists for my a level piece
Story boards and shot lists for my a level piece
 
Unleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding ClubUnleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding Club
 
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
 
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
 
Unraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfUnraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdf
 
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsDevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platforms
 
Install Stable Diffusion in windows machine
Install Stable Diffusion in windows machineInstall Stable Diffusion in windows machine
Install Stable Diffusion in windows machine
 
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptxE-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
 
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
 
My INSURER PTE LTD - Insurtech Innovation Award 2024
My INSURER PTE LTD - Insurtech Innovation Award 2024My INSURER PTE LTD - Insurtech Innovation Award 2024
My INSURER PTE LTD - Insurtech Innovation Award 2024
 

Element S

  • 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/