Submit Search
Upload
The Elements Of User Experience
•
103 likes
•
18,398 views
John Chen, Jun
Follow
The Elements Of User Experience
Read less
Read more
Marketing
Report
Share
Report
Share
1 of 73
Download Now
Download to read offline
Recommended
Elements of User Experience by Jesse James Garrett
Elements of User Experience by Jesse James Garrett
Open Journalism on the Open Web
UX & UI Design: Differentiate through design
UX & UI Design: Differentiate through design
MoodLabs
UX - User Experience Design and Principles
UX - User Experience Design and Principles
Peeyush Sahu CAPM®
The difference between ux and ui design
The difference between ux and ui design
Shweta Joshi
UX & UI Design - Differentiate through design
UX & UI Design - Differentiate through design
DMI
UI vs UX workshop
UI vs UX workshop
Inova LLC
UX Design process, #UX, #Design Process, #Agile UX
UX Design process, #UX, #Design Process, #Agile UX
Murali Krishna
1 introduction to uiux
1 introduction to uiux
Sudirman
More Related Content
What's hot
UX/UI design process - Studio CreativeMe
UX/UI design process - Studio CreativeMe
Madhuri Garg
UI UX in depth
UI UX in depth
Shrestha Raaz
UX RULES: 10 ESSENTIAL PRINCIPLES
UX RULES: 10 ESSENTIAL PRINCIPLES
Jeremy Robinson
What is UX design?
What is UX design?
Kristen Hardy
UI/UX presentation by Roshan Karunarathna
UI/UX presentation by Roshan Karunarathna
Roshan Karunarathna
UX/UI Design and How It Works
UX/UI Design and How It Works
Aciron Consulting
UX/UI Introduction
UX/UI Introduction
Shrutee Aneja
UX UI - Principles and Best Practices 2014-2015
UX UI - Principles and Best Practices 2014-2015
Harsh Wardhan Dave
UX Design + UI Design: Injecting a brand persona!
UX Design + UI Design: Injecting a brand persona!
Jayan Narayanan
What is UX?
What is UX?
David Carr
UI and UX Design for Startups - Matin Maleki
UI and UX Design for Startups - Matin Maleki
Matin Maleki
Ux design process
Ux design process
Junying Chang
UI UX introduction
UI UX introduction
Ismail Norri
User Research 101
User Research 101
Christina Wodtke
i/o extended: Intro to <UX> Design
i/o extended: Intro to <UX> Design
GDGKuwaitGoogleDevel
UX Lesson 2: User Research
UX Lesson 2: User Research
Joan Lumanauw
What is UI/UX and the Difference
What is UI/UX and the Difference
Vibloo
UX Lesson 1: User Centered Design
UX Lesson 1: User Centered Design
Joan Lumanauw
UX Experience Design: Processes and Strategy
UX Experience Design: Processes and Strategy
CHI UX Indonesia
UX/UI Design 101
UX/UI Design 101
Jasmine Phan
What's hot
(20)
UX/UI design process - Studio CreativeMe
UX/UI design process - Studio CreativeMe
UI UX in depth
UI UX in depth
UX RULES: 10 ESSENTIAL PRINCIPLES
UX RULES: 10 ESSENTIAL PRINCIPLES
What is UX design?
What is UX design?
UI/UX presentation by Roshan Karunarathna
UI/UX presentation by Roshan Karunarathna
UX/UI Design and How It Works
UX/UI Design and How It Works
UX/UI Introduction
UX/UI Introduction
UX UI - Principles and Best Practices 2014-2015
UX UI - Principles and Best Practices 2014-2015
UX Design + UI Design: Injecting a brand persona!
UX Design + UI Design: Injecting a brand persona!
What is UX?
What is UX?
UI and UX Design for Startups - Matin Maleki
UI and UX Design for Startups - Matin Maleki
Ux design process
Ux design process
UI UX introduction
UI UX introduction
User Research 101
User Research 101
i/o extended: Intro to <UX> Design
i/o extended: Intro to <UX> Design
UX Lesson 2: User Research
UX Lesson 2: User Research
What is UI/UX and the Difference
What is UI/UX and the Difference
UX Lesson 1: User Centered Design
UX Lesson 1: User Centered Design
UX Experience Design: Processes and Strategy
UX Experience Design: Processes and Strategy
UX/UI Design 101
UX/UI Design 101
Viewers also liked
The Elements of User Experience
The Elements of User Experience
brandextract
The Elements of User Experience
The Elements of User Experience
Bruna Calheiros
User-centered design: A road map to usability
User-centered design: A road map to usability
Will Sansbury
The Elements of User Experience
The Elements of User Experience
Michael Grillhösl
UX Explained
UX Explained
Mind Over Machines
What is UX, in 10 Slides
What is UX, in 10 Slides
Jordan Julien
What is ux?
What is ux?
Géraud de LAVAL
Elements of UX Design
Elements of UX Design
Oodlesstudio
Why UX #FAILS (with notes)
Why UX #FAILS (with notes)
Chris Feix
UX 101: A quick & dirty introduction to user experience strategy & design
UX 101: A quick & dirty introduction to user experience strategy & design
Morgan McKeagney
From Paths to Sandboxes
From Paths to Sandboxes
Stephen Anderson
User interface design: definitions, processes and principles
User interface design: definitions, processes and principles
David Little
Best Practice For UX Deliverables - Eventhandler, London, 05 March 2014
Best Practice For UX Deliverables - Eventhandler, London, 05 March 2014
Anna Dahlström
20 Inspirational Customer Experience Quotes
20 Inspirational Customer Experience Quotes
Neosperience
Designing To Learn: Creating Effective MVP Experiments - Lean UX NYC 2014
Designing To Learn: Creating Effective MVP Experiments - Lean UX NYC 2014
Melissa Perri
Social Media Secrets
Social Media Secrets
Guy Kawasaki
Customer Retention: Why Your Dog Would Make More Money Than You
Customer Retention: Why Your Dog Would Make More Money Than You
Chris Hexton
Digital Darwinism and the Dawn of Generation C
Digital Darwinism and the Dawn of Generation C
Brian Solis
Digital, Social & Mobile in 2015
Digital, Social & Mobile in 2015
We Are Social Singapore
Why Content Marketing Fails
Why Content Marketing Fails
Rand Fishkin
Viewers also liked
(20)
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 usability
The Elements of User Experience
The Elements of User Experience
UX Explained
UX Explained
What is UX, in 10 Slides
What is UX, in 10 Slides
What is ux?
What is ux?
Elements of UX Design
Elements of UX Design
Why UX #FAILS (with notes)
Why UX #FAILS (with notes)
UX 101: A quick & dirty introduction to user experience strategy & design
UX 101: A quick & dirty introduction to user experience strategy & design
From Paths to Sandboxes
From Paths to Sandboxes
User interface design: definitions, processes and principles
User interface design: definitions, processes and principles
Best Practice For UX Deliverables - Eventhandler, London, 05 March 2014
Best Practice For UX Deliverables - Eventhandler, London, 05 March 2014
20 Inspirational Customer Experience Quotes
20 Inspirational Customer Experience Quotes
Designing To Learn: Creating Effective MVP Experiments - Lean UX NYC 2014
Designing To Learn: Creating Effective MVP Experiments - Lean UX NYC 2014
Social Media Secrets
Social Media Secrets
Customer Retention: Why Your Dog Would Make More Money Than You
Customer Retention: Why Your Dog Would Make More Money Than You
Digital Darwinism and the Dawn of Generation C
Digital Darwinism and the Dawn of Generation C
Digital, Social & Mobile in 2015
Digital, Social & Mobile in 2015
Why Content Marketing Fails
Why Content Marketing Fails
Similar to The Elements Of User Experience
Web Site Usability
Web Site Usability
white paper
Design for Interaction
Design for Interaction
Daniel Tunkelang
User Experience 2: Talk@Stabilo
User Experience 2: Talk@Stabilo
Harald Felgner, PhD
Usability and Health IT
Usability and Health IT
Robert Schumacher
UX & RIAs: UI Design Challenges (ERGOSIGN)
UX & RIAs: UI Design Challenges (ERGOSIGN)
Ergosign GmbH
Interaction patterns
Interaction patterns
faisalqau
OhTan.doc.doc
OhTan.doc.doc
butest
Intranet 2.0 - Integrating Enterprise 2.0 into your corporate intranet
Intranet 2.0 - Integrating Enterprise 2.0 into your corporate intranet
James Dellow
Web Usability (Slideshare Version)
Web Usability (Slideshare Version)
Carles Farré
Evaluating Usability Of Commercial Software Applications
Evaluating Usability Of Commercial Software Applications
Jen Hocko
David Tisserand Usability As A Best Practice In The Product Design Process
David Tisserand Usability As A Best Practice In The Product Design Process
Use8.net
Re-engineering Your Intranet With User Friendly Architecture
Re-engineering Your Intranet With User Friendly Architecture
Patrick Kennedy
Adapting to Case Management
Adapting to Case Management
OpenText BPS
Appealing to Users: Designing Inhalers to Maximize Compliance and Minimize Mi...
Appealing to Users: Designing Inhalers to Maximize Compliance and Minimize Mi...
Team Consulting Ltd
Requirements Made Easy With User Stories V2
Requirements Made Easy With User Stories V2
William F. Nazzaro
Multi channel strategy mo mo chicago jan 24 final
Multi channel strategy mo mo chicago jan 24 final
Niti Vaish
Oracle Fusion applications 101 [2010 OAUG Collaborate]
Oracle Fusion applications 101 [2010 OAUG Collaborate]
Rhapsody Technologies, Inc.
Adobe flash platform java
Adobe flash platform java
Ch'ti JUG
Adobe flash platform java
Adobe flash platform java
Michael Chaize
Neodes Uxd Profile 2012
Neodes Uxd Profile 2012
Amogh Chougule
Similar to The Elements Of User Experience
(20)
Web Site Usability
Web Site Usability
Design for Interaction
Design for Interaction
User Experience 2: Talk@Stabilo
User Experience 2: Talk@Stabilo
Usability and Health IT
Usability and Health IT
UX & RIAs: UI Design Challenges (ERGOSIGN)
UX & RIAs: UI Design Challenges (ERGOSIGN)
Interaction patterns
Interaction patterns
OhTan.doc.doc
OhTan.doc.doc
Intranet 2.0 - Integrating Enterprise 2.0 into your corporate intranet
Intranet 2.0 - Integrating Enterprise 2.0 into your corporate intranet
Web Usability (Slideshare Version)
Web Usability (Slideshare Version)
Evaluating Usability Of Commercial Software Applications
Evaluating Usability Of Commercial Software Applications
David Tisserand Usability As A Best Practice In The Product Design Process
David Tisserand Usability As A Best Practice In The Product Design Process
Re-engineering Your Intranet With User Friendly Architecture
Re-engineering Your Intranet With User Friendly Architecture
Adapting to Case Management
Adapting to Case Management
Appealing to Users: Designing Inhalers to Maximize Compliance and Minimize Mi...
Appealing to Users: Designing Inhalers to Maximize Compliance and Minimize Mi...
Requirements Made Easy With User Stories V2
Requirements Made Easy With User Stories V2
Multi channel strategy mo mo chicago jan 24 final
Multi channel strategy mo mo chicago jan 24 final
Oracle Fusion applications 101 [2010 OAUG Collaborate]
Oracle Fusion applications 101 [2010 OAUG Collaborate]
Adobe flash platform java
Adobe flash platform java
Adobe flash platform java
Adobe flash platform java
Neodes Uxd Profile 2012
Neodes Uxd Profile 2012
More from John Chen, Jun
Practical Guide To Market Research
Practical Guide To Market Research
John Chen, Jun
Wap Usability
Wap Usability
John Chen, Jun
Wiley About Face 3 The Essentials Of Interaction Design May 2007
Wiley About Face 3 The Essentials Of Interaction Design May 2007
John Chen, Jun
Usability Techniques
Usability Techniques
John Chen, Jun
NeuroReport_Neural mechanisms of attentional modulation of perceptual groupin...
NeuroReport_Neural mechanisms of attentional modulation of perceptual groupin...
John Chen, Jun
Chinese illiterates or half illiterates field study about mobile phone usage
Chinese illiterates or half illiterates field study about mobile phone usage
John Chen, Jun
Chinese local Mobile SNS User Study
Chinese local Mobile SNS User Study
John Chen, Jun
virtual Touch keypad 12-key Chinese text input benchmark test report
virtual Touch keypad 12-key Chinese text input benchmark test report
John Chen, Jun
mobile phone Chinese text input usability benchmark test
mobile phone Chinese text input usability benchmark test
John Chen, Jun
Portfolio as a ux professional
Portfolio as a ux professional
John Chen, Jun
More from John Chen, Jun
(10)
Practical Guide To Market Research
Practical Guide To Market Research
Wap Usability
Wap Usability
Wiley About Face 3 The Essentials Of Interaction Design May 2007
Wiley About Face 3 The Essentials Of Interaction Design May 2007
Usability Techniques
Usability Techniques
NeuroReport_Neural mechanisms of attentional modulation of perceptual groupin...
NeuroReport_Neural mechanisms of attentional modulation of perceptual groupin...
Chinese illiterates or half illiterates field study about mobile phone usage
Chinese illiterates or half illiterates field study about mobile phone usage
Chinese local Mobile SNS User Study
Chinese local Mobile SNS User Study
virtual Touch keypad 12-key Chinese text input benchmark test report
virtual Touch keypad 12-key Chinese text input benchmark test report
mobile phone Chinese text input usability benchmark test
mobile phone Chinese text input usability benchmark test
Portfolio as a ux professional
Portfolio as a ux professional
Recently uploaded
Friends of Search '24 - Scaling SEO_ Lessons for All Types of Sites.pptx
Friends of Search '24 - Scaling SEO_ Lessons for All Types of Sites.pptx
Gregory Edwards
TAM AdEx-A Pixelated view into Digital Advertising Trends for Y 2023.pdf
TAM AdEx-A Pixelated view into Digital Advertising Trends for Y 2023.pdf
Social Samosa
Crafting High-Converting eCommerce Landing Pages
Crafting High-Converting eCommerce Landing Pages
VWO
Ice Cream Brand Harmony Study - TINT Emotional Profiling Research
Ice Cream Brand Harmony Study - TINT Emotional Profiling Research
TINT Marketing
SVETLANA YONCHEVA Evolution of digital marketing.pdf
SVETLANA YONCHEVA Evolution of digital marketing.pdf
vikrs213
What's Happening with Your Microsoft Advertising's Search Campaigns? - Sophie...
What's Happening with Your Microsoft Advertising's Search Campaigns? - Sophie...
Sophie Logan
Increase Your Website Sales & Leads Webinar
Increase Your Website Sales & Leads Webinar
SEO Optimizers
Amazon Seller New Product Launch Guide - 2024.pptx
Amazon Seller New Product Launch Guide - 2024.pptx
Will Haire
SEO Trends in 2024: What You Need to Know to Succeed
SEO Trends in 2024: What You Need to Know to Succeed
Mumbai Pixels
Podvertise.fm - Podcast Advertising Marketplace - Startup Pitch Deck
Podvertise.fm - Podcast Advertising Marketplace - Startup Pitch Deck
Nedko Nedkov
Music and Ai Technology
Music and Ai Technology
ehimaibooks
Snapshot of Consumer Behaviors of February 2024-EOLiSurvey (EN).pdf
Snapshot of Consumer Behaviors of February 2024-EOLiSurvey (EN).pdf
Eastern Online-iSURVEY
Digital Gravity - Full-Scale SEO Services Preview
Digital Gravity - Full-Scale SEO Services Preview
Digital Gravity
Friends of Search Future Proof Accounts.pptx
Friends of Search Future Proof Accounts.pptx
Navah Hopkins
Fashion-Marketing-1- Assaginment mid.pdf
Fashion-Marketing-1- Assaginment mid.pdf
Uttara University
The 2024 Next Gen Attention Study - www.livewire.group
The 2024 Next Gen Attention Study - www.livewire.group
Livewire
The Creative Marketing campaigns of WeRoad
The Creative Marketing campaigns of WeRoad
Fabio Bin
Run more experiments with fewer resources
Run more experiments with fewer resources
VWO
Product Demo: HubSpot's Coolest AI Tools for B2B Tech Companies
Product Demo: HubSpot's Coolest AI Tools for B2B Tech Companies
Kiwi Creative
Voltas turnaround strategy management case
Voltas turnaround strategy management case
Ankit Sarkar
Recently uploaded
(20)
Friends of Search '24 - Scaling SEO_ Lessons for All Types of Sites.pptx
Friends of Search '24 - Scaling SEO_ Lessons for All Types of Sites.pptx
TAM AdEx-A Pixelated view into Digital Advertising Trends for Y 2023.pdf
TAM AdEx-A Pixelated view into Digital Advertising Trends for Y 2023.pdf
Crafting High-Converting eCommerce Landing Pages
Crafting High-Converting eCommerce Landing Pages
Ice Cream Brand Harmony Study - TINT Emotional Profiling Research
Ice Cream Brand Harmony Study - TINT Emotional Profiling Research
SVETLANA YONCHEVA Evolution of digital marketing.pdf
SVETLANA YONCHEVA Evolution of digital marketing.pdf
What's Happening with Your Microsoft Advertising's Search Campaigns? - Sophie...
What's Happening with Your Microsoft Advertising's Search Campaigns? - Sophie...
Increase Your Website Sales & Leads Webinar
Increase Your Website Sales & Leads Webinar
Amazon Seller New Product Launch Guide - 2024.pptx
Amazon Seller New Product Launch Guide - 2024.pptx
SEO Trends in 2024: What You Need to Know to Succeed
SEO Trends in 2024: What You Need to Know to Succeed
Podvertise.fm - Podcast Advertising Marketplace - Startup Pitch Deck
Podvertise.fm - Podcast Advertising Marketplace - Startup Pitch Deck
Music and Ai Technology
Music and Ai Technology
Snapshot of Consumer Behaviors of February 2024-EOLiSurvey (EN).pdf
Snapshot of Consumer Behaviors of February 2024-EOLiSurvey (EN).pdf
Digital Gravity - Full-Scale SEO Services Preview
Digital Gravity - Full-Scale SEO Services Preview
Friends of Search Future Proof Accounts.pptx
Friends of Search Future Proof Accounts.pptx
Fashion-Marketing-1- Assaginment mid.pdf
Fashion-Marketing-1- Assaginment mid.pdf
The 2024 Next Gen Attention Study - www.livewire.group
The 2024 Next Gen Attention Study - www.livewire.group
The Creative Marketing campaigns of WeRoad
The Creative Marketing campaigns of WeRoad
Run more experiments with fewer resources
Run more experiments with fewer resources
Product Demo: HubSpot's Coolest AI Tools for B2B Tech Companies
Product Demo: HubSpot's Coolest AI Tools for B2B Tech Companies
Voltas turnaround strategy management case
Voltas turnaround strategy management case
The Elements Of User Experience
1.
The Elements of User
Experience Jesse James Garrett
2.
Meet The Elements
3.
“Worst Movie Ever!” ©
2003 Adaptive Path 3
4.
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
5.
Products Are People
Too © 2003 Adaptive Path 5
6.
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
7.
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
8.
Surface © 2003 Adaptive
Path 8
9.
Skeleton © 2003 Adaptive
Path 9
10.
Structure © 2003 Adaptive
Path 10
11.
Scope © 2003 Adaptive
Path 11
12.
Strategy © 2003 Adaptive
Path 12
13.
The Five Planes
Concrete surface skeleton structure scope strategy Abstract © 2003 Adaptive Path 13
14.
The Language Barrier
Information Design Functional Specifications Interaction Design Information Architecture Interface Design Content Requirements Navigation Design © 2003 Adaptive Path 14
15.
Web as information ©
2003 Adaptive Path 15
16.
Web as application ©
2003 Adaptive Path 16
17.
A Basic Duality
Web as software interface Web as hypertext system © 2003 Adaptive Path 17
18.
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
19.
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
20.
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
21.
User Segmentation
Make identifying user needs more manageable Break your audience down into segments based on shared characteristics © 2003 Adaptive Path 21
22.
Personas
Character sketches based Janet on user “I don’t have time to sort through a lot of information. I need quick answers.” research Janet is frustrated with working in a corporate environment and wants to start her own accounting practice. Extrapolate Age: 42 Occupation: Accounting firm vice president Technical profile: Fairly comfortable with technology; Dell laptop (about one year old) running Windows XP; DSL from a general Family: Married, two children Internet connection; 8-10 hours/week online Household income: $140,000/year Internet use: 75% at home; news and information, shopping set of Favorite sites: characteristics to a specific WSJ.com Salon.com Travelocity.com case © 2003 Adaptive Path 22
23.
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
24.
Success Metrics
10 The only way to 9 know if changing 8 target your site has 7 6 made a difference 5 Closely tied to 4 3 site objectives 2 launch of More on this 1 redesigned site tomorrow! Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec visits per month (registered users only) © 2003 Adaptive Path 24
25.
The Scope Plane
Functional Specifications: application features the site must include Content Requirements: content elements the site must include © 2003 Adaptive Path 25
26.
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
27.
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
28.
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
29.
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
30.
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
31.
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
32.
Top-down vs. Bottom-up
Top-down starts with categories and slots content into them categories content © 2003 Adaptive Path 32
33.
Top-down vs. Bottom-up
Bottom-up starts with content and builds up to categories categories content © 2003 Adaptive Path 33
34.
Documenting Structure
Visual representations home tend to work best media info products support Diagrams can be as home products simple or as complex as press releases file archives office products you need Visual Vocabulary: continue from: home login flow latest news jjg.net/ia/visvocab (2c) entry page continue to: member list technical papers © 2003 Adaptive Path 34
35.
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
36.
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
37.
© 2003 Adaptive
Path 37
38.
Interface Design
Provides a means for users to interact with application functionality © 2003 Adaptive Path 38
39.
Navigation Design
Communicates the choices available to the user Facilitates movement Different designs have different effects © 2003 Adaptive Path 39
40.
Wireframes
Brings all skeleton issues together into LOGO COURTESY NAV one high-level GLOBAL NAV WAYFINDING CUES “sketch” HEADER GRAPHIC SEARCH QUERY dropdown Pack my box with five dozen liquor jugs. LOCAL Illustrates relative How razorback-jumping frogs can level six text field NAV piqued gymnasts! We dislike to exchange job lots of sizes varying from a quarter up. The job requires extra pluck and zeal from button priority of page every young wage earner. A quart jar of oil mixed with zinc oxide PARTNER CONTENT makes a very bright paint. Six big juicy The job requires extra elements SUPP. NAV steaks sizzled in a pan as five workmen left the quarry. The juke box music puzzled a gentle visitor from a quaint valley town. pluck and zeal from every young wage earner. A quart jar of oil mixed with zinc oxide makes a very Pack my box with five dozen liquor jugs. Suggests page bright paint. Pack my box How razorback-jumping frogs can level six with five dozen liquor jugs. piqued gymnasts! COURTESY NAV layout approaches © 2003 Adaptive Path 40
41.
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
42.
Color Palettes
r:102 r:255 g:153 g:255 b:204 b:204 r:0 r:204 g:102 g:204 b:204 b:153 r:0 r:153 g:51 g:153 b:153 b:102 r:0 r:51 g:153 g:51 b:0 b:51 r:255 r:204 g:153 g:204 b:0 b:204 © 2003 Adaptive Path 42
43.
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
44.
The Elements of
User Experience © 2003 Adaptive Path 44
45.
Intermission
46.
The Elements
Applied
47.
Search Engines
Almost every site has one Every site seems to take a slightly different approach © 2003 Adaptive Path 47
48.
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
49.
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
50.
Structure
Interaction Design continue from: any page advanced search choices available to users at each step no results refine search system behavior under exactly one result various conditions search results Information Architecture architectural scope as search criterion content pages metadata structures © 2003 Adaptive Path 50
51.
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
52.
Surface
Visual Design color typography layout © 2003 Adaptive Path 52
53.
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
54.
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
55.
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
56.
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
57.
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
58.
effort
Waterfalls Are Dangerous time effort time © 2003 Adaptive Path 58
59.
Iterative Development
Your site is never finished Do what you can right now Always look ahead to the next release January (now) April July October (next) January Version 1.0 Version 1.1 © 2003 Adaptive Path 59
60.
Roles
The specific roles you choose don’t matter – if you’ve got all the planes covered © 2003 Adaptive Path 60
61.
The Nine Pillars
project management Core competencies concrete design common to tactical technology content successful teams implementation production Must be reflected abstract design strategic in the team’s: technology content strategy strategy Roles site Processes strategy user research © 2003 Adaptive Path 61
62.
User Research
project management The foundation of user-centered design concrete design Informs all strategic decisions tactical technology content implementation production Primary abstract responsibility for design strategic identifying user needs technology content strategy strategy Titles: site User Researcher strategy Usability Analyst user research © 2003 Adaptive Path 62
63.
Site Strategy
project management Primary responsibility for concrete design defining site objectives tactical technology content implementation production Decides priorities abstract and success metrics design strategic Titles: technology strategy content strategy Business Analyst site strategy Product Manager Executive Producer user research © 2003 Adaptive Path 63
64.
Technology Strategy
project management Often responsible for functional concrete design specifications tactical Decides technical technology implementation content production platforms and abstract standards to adopt design strategic Titles: technology strategy content strategy Senior Engineer site strategy Development Manager Technical Lead user research © 2003 Adaptive Path 64
65.
Content Strategy
project management Often responsible for content requirements concrete design Decides appropriate tactical technology content implementation production format and subject matter abstract design strategic Titles: technology content strategy strategy Content Strategist Content Editor site strategy Editor-in-Chief user research © 2003 Adaptive Path 65
66.
Abstract Design
project management Turns strategy into design concepts concrete design Always responsible for Structure plane tactical technology content implementation production Sometimes responsible for Scope and Skeleton abstract design planes strategic technology content Titles: strategy strategy Information Architect site strategy Interaction Designer UI Specialist user research © 2003 Adaptive Path 66
67.
Technology Implementation
project management Tactical execution of technology strategy concrete design May incorporate many tactical technology content implementation production roles, from coding to integration to testing abstract design strategic Titles: technology content strategy strategy Software Engineer HTML Developer site strategy QA Tester user research © 2003 Adaptive Path 67
68.
Content Production
project management Tactical execution of content strategy concrete design Gathering, editing, tactical producing, and technology implementation content production deploying content (not abstract just text) design strategic Titles: technology strategy content strategy Content Producer site strategy Writer Editor user research © 2003 Adaptive Path 68
69.
Concrete Design
project management Tactical realization of abstract design concrete design Always responsible for Surface plane tactical technology content implementation production Sometimes responsible abstract design for Skeleton and strategic Structure planes technology strategy content strategy Titles: site strategy Interface Designer Visual Designer user research © 2003 Adaptive Path 69
70.
Project Management
project management Binds together all concrete design tactical competencies tactical technology content implementation production Often overlooked in smaller organizations abstract design strategic Titles: technology content strategy strategy Producer Project Manager site strategy user research © 2003 Adaptive Path 70
71.
The Nine Pillars
project management Not a nine-member concrete team design Not a nine-step tactical technology content implementation production process abstract design You should be able strategic technology content to look at both and strategy strategy see the pillars site strategy beneath them user research © 2003 Adaptive Path 71
72.
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
73.
Thanks!
Download Now