Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
The Elements of
User Experience
   Jesse James Garrett
Meet The Elements
“Worst Movie Ever!”




© 2003 Adaptive Path                         3
Who Gets the Blame?

                       “I probably overlooked
                       the right choice.”         ?!?
 ...
Products Are People Too




© 2003 Adaptive Path                      5
User-Centered Design
                       A philosophy of product development
                       The product is not ...
User Experience
                       How a product behaves and is used in
                       the real world
        ...
Surface




© 2003 Adaptive Path             8
Skeleton




© 2003 Adaptive Path              9
Structure




© 2003 Adaptive Path               10
Scope




© 2003 Adaptive Path           11
Strategy




© 2003 Adaptive Path              12
The Five Planes
                                        Concrete



                            surface


                ...
The Language Barrier

                               Information Design
               Functional Specifications
         ...
Web as information




© 2003 Adaptive Path                        15
Web as application




© 2003 Adaptive Path                        16
A Basic Duality
                         Web as software interface Web as hypertext system




© 2003 Adaptive Path       ...
The Strategy Plane
                       User Needs:
                       what the site must
                       do ...
User Needs
                       Some are fundamental – users need
                       products that:
                ...
User Research
                       Best way to
                       discover user needs
                       Many te...
User Segmentation
                       Make
                       identifying user
                       needs more
  ...
Personas
                       Character
                       sketches based                                     Janet
...
Site Objectives
                       Often framed in terms of business
                        Business goals
          ...
Success Metrics
                                           10

                       The only way to      9


           ...
The Scope Plane
                       Functional
                       Specifications:
                       applicatio...
Functional Specifications
                       What application features will users
                       need to fulfi...
Content Requirements
                       What information will users need or
                       want from the site?...
Keeping Documentation
                       “Docs are a waste of time.”
                         No one reads them
      ...
The Structure Plane
                       Interaction
                       Design: how the
                       user ...
Interaction Design
                       Inter-action
                        Actions the user
                        ca...
Information Architecture
                       Defines conceptual relationships
                       between content el...
Top-down vs. Bottom-up
                       Top-down starts with categories and
                       slots content int...
Top-down vs. Bottom-up
                       Bottom-up starts with content and
                       builds up to catego...
Documenting Structure
                       Visual representations                                  home




            ...
The Skeleton Plane
                       Information
                       Design: facilitates
                       co...
Information Design
                       How can we present this information so
                       that people can un...
© 2003 Adaptive Path   37
Interface Design
                       Provides a means for users to interact
                       with application fun...
Navigation Design

                       Communicates the choices
                       available to the user
          ...
Wireframes
                       Brings all skeleton
                       issues together into     LOGO
               ...
The Surface Plane
                       Visual Design: the
                       “look” in “look and
                   ...
Color Palettes

                       r:102   r:255
                       g:153   g:255
                       b:204   b...
Typography

                                     Apple Garamond
                                  is Apple's custom corpor...
The Elements of User Experience




© 2003 Adaptive Path                                 44
Intermission
The Elements
  Applied
Search Engines
                       Almost every site has one
                       Every site seems to take a slightly...
Strategy
                       User Needs
                        Do users want a search engine?
                        ...
Scope
                       Functional Specifications
                        keyword entry
                        other...
Structure
                       Interaction Design            continue
                                                  ...
Skeleton
                       Information Design
                        layout of search results
                      ...
Surface


                       Visual Design
                        color
                        typography
          ...
Asking the Right Questions

                       What problem are we
                       trying to solve?
           ...
The Marathon and the Sprint

                       A sprint is a short race
                        Get a quick start
   ...
Answering Objections
                       “Our market research tells us everything
                       we need to kno...
Answering Objections
                       “We can’t afford to hire experts.”
                         You don’t need exp...
Pitfalls to Avoid
                       Design by default: “We should do
                       whatever is easiest to im...
effort
                      Waterfalls Are Dangerous



                      time
             effort




              ...
Iterative Development
                       Your site is never finished
                       Do what you can right now
...
Roles
                       The specific roles you choose don’t
                       matter – if you’ve got all the pla...
The Nine Pillars
                                                                      project management




            ...
User Research
                                                                           project management
              ...
Site Strategy
                                                                         project management

               ...
Technology Strategy
                                                                          project management

        ...
Content Strategy
                                                                          project management



         ...
Abstract Design
                                                                               project management

       ...
Technology Implementation
                                                                           project management


...
Content Production
                                                                           project management

        ...
Concrete Design
                                                                            project management

          ...
Project Management
                                                                          project management




      ...
The Nine Pillars
                                                                        project management



           ...
What It’s All About
                       Plan before you build
                       Have conscious reasons for your ch...
Thanks!
You’ve finished this document.
Download and read it offline.
Upcoming SlideShare
Elements of User Experience by Jesse James Garrett
Next
Upcoming SlideShare
Elements of User Experience by Jesse James Garrett
Next
Download to read offline and view in fullscreen.

Share

The Elements Of User Experience

Download to read offline

The Elements Of User Experience

Related Books

Free with a 30 day trial from Scribd

See all

The Elements Of User Experience

  1. 1. The Elements of User Experience Jesse James Garrett
  2. 2. Meet The Elements
  3. 3. “Worst Movie Ever!” © 2003 Adaptive Path 3
  4. 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. 5. Products Are People Too © 2003 Adaptive Path 5
  6. 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. 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. 8. Surface © 2003 Adaptive Path 8
  9. 9. Skeleton © 2003 Adaptive Path 9
  10. 10. Structure © 2003 Adaptive Path 10
  11. 11. Scope © 2003 Adaptive Path 11
  12. 12. Strategy © 2003 Adaptive Path 12
  13. 13. The Five Planes Concrete surface skeleton structure scope strategy Abstract © 2003 Adaptive Path 13
  14. 14. The Language Barrier Information Design Functional Specifications Interaction Design Information Architecture Interface Design Content Requirements Navigation Design © 2003 Adaptive Path 14
  15. 15. Web as information © 2003 Adaptive Path 15
  16. 16. Web as application © 2003 Adaptive Path 16
  17. 17. A Basic Duality Web as software interface Web as hypertext system © 2003 Adaptive Path 17
  18. 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. 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. 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. 21. User Segmentation Make identifying user needs more manageable Break your audience down into segments based on shared characteristics © 2003 Adaptive Path 21
  22. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 32. Top-down vs. Bottom-up Top-down starts with categories and slots content into them categories content © 2003 Adaptive Path 32
  33. 33. Top-down vs. Bottom-up Bottom-up starts with content and builds up to categories categories content © 2003 Adaptive Path 33
  34. 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. 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. 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. 37. © 2003 Adaptive Path 37
  38. 38. Interface Design Provides a means for users to interact with application functionality © 2003 Adaptive Path 38
  39. 39. Navigation Design Communicates the choices available to the user Facilitates movement Different designs have different effects © 2003 Adaptive Path 39
  40. 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. 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. 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. 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. 44. The Elements of User Experience © 2003 Adaptive Path 44
  45. 45. Intermission
  46. 46. The Elements Applied
  47. 47. Search Engines Almost every site has one Every site seems to take a slightly different approach © 2003 Adaptive Path 47
  48. 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. 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. 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. 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. 52. Surface Visual Design color typography layout © 2003 Adaptive Path 52
  53. 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. 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. 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. 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. 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. 58. effort Waterfalls Are Dangerous time effort time © 2003 Adaptive Path 58
  59. 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. 60. Roles The specific roles you choose don’t matter – if you’ve got all the planes covered © 2003 Adaptive Path 60
  61. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 73. Thanks!
  • JessicaSoruco

    Aug. 3, 2020
  • lucalauri

    Jun. 14, 2020
  • padraigkenny

    May. 23, 2020
  • ChloeCaldwell

    Mar. 5, 2020
  • HamzaAbuEyada1

    Feb. 17, 2020
  • milterterry

    Mar. 31, 2019
  • gawas

    Sep. 28, 2018
  • Aniballvarez

    Jul. 30, 2018
  • Cyberangel

    Mar. 22, 2018
  • LamprosRoussos

    Mar. 18, 2018
  • loganalexanderj

    Sep. 22, 2017
  • SanujaWijesundara

    Sep. 16, 2017
  • umeshmantale

    Aug. 29, 2017
  • LuckNawaporn

    Aug. 27, 2017
  • SophiaCampanella

    Feb. 8, 2017
  • elliotness

    Jan. 22, 2017
  • LaurenJimenez2

    Nov. 29, 2016
  • SoobinKim

    Oct. 2, 2016
  • REDKAI

    Jul. 14, 2016
  • tigre87

    Jul. 13, 2016

The Elements Of User Experience

Views

Total views

23,705

On Slideshare

0

From embeds

0

Number of embeds

287

Actions

Downloads

1,220

Shares

0

Comments

0

Likes

102

×