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.
Best Practices in Web Design
Our Flight Plan
Our Flight Plan6:00 - 6:15 Review + Questions
Our Flight Plan6:00 - 6:15 Review + Questions6:15 - 7:00 Anatomy of a homepage, innerpage *Pitch
Our Flight Plan6:00 - 6:15 Review + Questions6:15 - 7:00 Anatomy of a homepage, innerpage *Pitch7:00 - 7:05 BREAK7:05 - 7:...
Our Flight Plan6:00 - 6:15 Review + Questions6:15 - 7:00 Anatomy of a homepage, innerpage *Pitch7:00 - 7:05 BREAK7:05 - 7:...
What Makes a Great Site?                    User’s                    Needs
What Makes a Great Site?                    User’s                    Needs
What Makes a Great Site?                    User’s                    Needs
What Makes a Great Site?                    User’s                    Needs
What Makes a Great Site?          Visuals                    User’s                    Needs
What Makes a Great Site?             Typography          Visuals                          User’s                          ...
What Makes a Great Site?       Usability Typography             Visuals                              User’s               ...
What Makes a Great Site?    Think Experiences.
X
Flashback
Flashback
Today
Persona
Personawho are you designing for?
Our Mantra:
Our Mantra:We
Our Mantra:We Are
Our Mantra:We Are Not
Our Mantra:We Are Not The
Our Mantra:We Are Not The Target
Our Mantra:We Are Not The Target Market
http://aimeegd.files.wordpress.com/2009/06/personna-mapping.jpg
Empathy...(and how to get it)                    http://aimeegd.files.wordpress.com/2009/06/personna-mapping.jpg
Persona       Research    Example
Persona              Research                                    Example1. What does this person do for a living?
Persona              Research                                 Example1. What does this person do for a living?2. What type...
Persona               Research                                       Example1. What does this person do for a living?2. Wh...
Persona               Research                                       Example1. What does this person do for a living?2. Wh...
Persona               Research                                       Example1. What does this person do for a living?2. Wh...
Persona               Research                                       Example1. What does this person do for a living?2. Wh...
Persona               Research                                       Example1. What does this person do for a living?2. Wh...
How People Use the Web
How People Read
How People Read Online             Source: http://usableworld.com.au/2009/03/16/you-look-where-they-look/
How People Read Online             Source: http://usableworld.com.au/2009/03/16/you-look-where-they-look/
How People Read Online            F             Source: http://usableworld.com.au/2009/03/16/you-look-where-they-look/
20%Percentageof wordsread duringan averagesite visit          Source: http://www.useit.com/alertbox/percent-text-read.html
Source: http://www.useit.com/alertbox/percent-text-read.html
2Number ofclicks to getto any partof your site(ideally)
SitemapSketching Out Your Content
Sitemap       Sketching Out Your ContentHome
Sitemap                  Sketching Out Your ContentHome   Services
Sitemap                        Sketching Out Your ContentHome   Services   Projects
Sitemap                        Sketching Out Your ContentHome   Services   Projects    About
Sitemap                        Sketching Out Your ContentHome   Services   Projects    About        Contact
Sitemap                           Sketching Out Your ContentHome   Services      Projects    About        Contact         ...
Sitemap                           Sketching Out Your ContentHome   Services      Projects      About      Contact         ...
Sitemap                           Sketching Out Your ContentHome   Services      Projects      About       Contact        ...
Sitemap                           Sketching Out Your ContentHome   Services      Projects      About       Contact        ...
Sitemap                           Sketching Out Your ContentHome   Services      Projects      About       Contact        ...
Sitemap                           Sketching Out Your ContentHome   Services      Projects      About       Contact        ...
Sitemap                           Sketching Out Your ContentHome   Services      Projects      About       Contact        ...
Sitemap                           Sketching Out Your ContentHome   Services      Projects      About       Contact        ...
Sitemap                              Sketching Out Your ContentHome    Services       Projects       About       Contact  ...
WireframeHand-Sketch     Powerpoint
What We Learned
What We Learned1. Know and empathize with your user (persona)
What We Learned1. Know and empathize with your user (persona)2. Simplicity Wins (Google vs.Yahoo)
What We Learned1. Know and empathize with your user (persona)2. Simplicity Wins (Google vs.Yahoo)3. People don’t read - th...
What We Learned1. Know and empathize with your user (persona)2. Simplicity Wins (Google vs.Yahoo)3. People don’t read - th...
What We Learned1. Know and empathize with your user (persona)2. Simplicity Wins (Google vs.Yahoo)3. People don’t read - th...
Homepages
Logo    main navigation Main Image or Slideshow   Updates         Call to                   Action        footer
Before
After
Afterphone
After           phoneBiz Goal
After              phoneBiz Goal           Opt-In
After                 phone Biz Goal              Opt-InVisualChoices forUser
After                     phone Biz Goal                 Opt-InVisualChoices forUser              Call to Action
After                     phone Biz Goal                 Opt-InVisualChoices forUser              Call to Action       Ful...
Pop Quiz:what does the persona look like?
Name: Bill Johnson              Age: 52              Home: Pasadena, CA              Married with 3 kids              Olde...
Name: Bill Johnson              • Large Fonts              Age: 52              Home: Pasadena, CA              Married wi...
Name: Bill Johnson              • Large Fonts              Age: 52                         • Email is preferred method of ...
Name: Bill Johnson              • Large Fonts              Age: 52                         • Email is preferred method of ...
Name: Bill Johnson              • Large Fonts              Age: 52                         • Email is preferred method of ...
Name: Bill Johnson              • Large Fonts              Age: 52                         • Email is preferred method of ...
Name: Bill Johnson              • Large Fonts              Age: 52                         • Email is preferred method of ...
Innerpages
Logo                 main navigationhome / sub-page / current page               Image               Sidebar  Main Text  S...
search
Remember This   It’s All About: Keywords
Principles                 StrategyOverview of a Search Results Page
Principles                 StrategyOverview of a Search Results Page      Keyword Phrase
Principles                 StrategyOverview of a Search Results Page      Keyword Phrase                                  ...
Principles                 Strategy        Overview of a Search Results Page              Keyword Phrase                  ...
Principles                 Strategy              Overview of a Search Results Page                    Keyword Phrase      ...
Principles         Strategy     Paid Search
Keywords                  StrategyHow We Find Everything Online
Keywords                  Strategy               How We Find Everything Online1. Use Your Persona To Guide You
Keywords                  Strategy               How We Find Everything Online1. Use Your Persona To Guide You2. Brainstor...
Keywords                  Strategy               How We Find Everything Online1. Use Your Persona To Guide You2. Brainstor...
Keywords                  Strategy                How We Find Everything Online1. Use Your Persona To Guide You2. Brainsto...
insider secrets
users #1Usersappreciatequality andcredibility
users #2Users don’tread, theyscan
users    #3Users are impatientonline and demandinstant gratification
users #4Users followtheir intuition(change is hard)
users #5Users want tohave control
StrategyDr. BJ Fogg - Stanford UniversityResearch focuses on why peopletrust a website           Source: http://www.slides...
Strategy #1Design yoursite so itlooksprofessional        Source: http://www.slideshare.net/bjfogg/web-credibility-bj-fogg-...
Strategy #2Easily verifyaccuracy ofinfo on yoursite        Source: http://www.slideshare.net/bjfogg/web-credibility-bj-fog...
Strategy#3Show thatyou’re real       Source: http://www.slideshare.net/bjfogg/web-credibility-bj-fogg-stanford-university
Strategy#4Show howyou’re anexpert     Source: http://www.slideshare.net/bjfogg/web-credibility-bj-fogg-stanford-university
Strategy#5Put a humanface andtone to theorganization      Source: http://www.slideshare.net/bjfogg/web-credibility-bj-fogg...
Strategy #6Make it easyto contactyou        Source: http://www.slideshare.net/bjfogg/web-credibility-bj-fogg-stanford-univ...
Strategy  #7Make it easyto use anduseful        Source: http://www.slideshare.net/bjfogg/web-credibility-bj-fogg-stanford-...
Strategy  #8Update yoursite’s contentoften         Source: http://www.slideshare.net/bjfogg/web-credibility-bj-fogg-stanfo...
Strategy #9Easy on thepromotionalcontent       Source: http://www.slideshare.net/bjfogg/web-credibility-bj-fogg-stanford-u...
Strategy#10Watch tehtipos anddead links       Source: http://www.slideshare.net/bjfogg/web-credibility-bj-fogg-stanford-un...
Q&A
Fundamentals of Designing Web Experiences
Fundamentals of Designing Web Experiences
Fundamentals of Designing Web Experiences
Fundamentals of Designing Web Experiences
Fundamentals of Designing Web Experiences
Fundamentals of Designing Web Experiences
Fundamentals of Designing Web Experiences
Fundamentals of Designing Web Experiences
Fundamentals of Designing Web Experiences
Fundamentals of Designing Web Experiences
Fundamentals of Designing Web Experiences
Fundamentals of Designing Web Experiences
Fundamentals of Designing Web Experiences
Fundamentals of Designing Web Experiences
Fundamentals of Designing Web Experiences
Fundamentals of Designing Web Experiences
Fundamentals of Designing Web Experiences
Fundamentals of Designing Web Experiences
Fundamentals of Designing Web Experiences
Fundamentals of Designing Web Experiences
Fundamentals of Designing Web Experiences
Fundamentals of Designing Web Experiences
Fundamentals of Designing Web Experiences
Fundamentals of Designing Web Experiences
Upcoming SlideShare
Loading in …5
×

Fundamentals of Designing Web Experiences

685 views

Published on

Learn about current research on web experiences and how to create a persona

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Fundamentals of Designing Web Experiences

  1. 1. Best Practices in Web Design
  2. 2. Our Flight Plan
  3. 3. Our Flight Plan6:00 - 6:15 Review + Questions
  4. 4. Our Flight Plan6:00 - 6:15 Review + Questions6:15 - 7:00 Anatomy of a homepage, innerpage *Pitch
  5. 5. Our Flight Plan6:00 - 6:15 Review + Questions6:15 - 7:00 Anatomy of a homepage, innerpage *Pitch7:00 - 7:05 BREAK7:05 - 7:20 How Search Works7:20 - 7:45 Insider Secrets + Research
  6. 6. Our Flight Plan6:00 - 6:15 Review + Questions6:15 - 7:00 Anatomy of a homepage, innerpage *Pitch7:00 - 7:05 BREAK7:05 - 7:20 How Search Works7:20 - 7:45 Insider Secrets + Research7:45 - 8:00 Q&A
  7. 7. What Makes a Great Site? User’s Needs
  8. 8. What Makes a Great Site? User’s Needs
  9. 9. What Makes a Great Site? User’s Needs
  10. 10. What Makes a Great Site? User’s Needs
  11. 11. What Makes a Great Site? Visuals User’s Needs
  12. 12. What Makes a Great Site? Typography Visuals User’s Needs
  13. 13. What Makes a Great Site? Usability Typography Visuals User’s Needs
  14. 14. What Makes a Great Site? Think Experiences.
  15. 15. X
  16. 16. Flashback
  17. 17. Flashback
  18. 18. Today
  19. 19. Persona
  20. 20. Personawho are you designing for?
  21. 21. Our Mantra:
  22. 22. Our Mantra:We
  23. 23. Our Mantra:We Are
  24. 24. Our Mantra:We Are Not
  25. 25. Our Mantra:We Are Not The
  26. 26. Our Mantra:We Are Not The Target
  27. 27. Our Mantra:We Are Not The Target Market
  28. 28. http://aimeegd.files.wordpress.com/2009/06/personna-mapping.jpg
  29. 29. Empathy...(and how to get it) http://aimeegd.files.wordpress.com/2009/06/personna-mapping.jpg
  30. 30. Persona Research Example
  31. 31. Persona Research Example1. What does this person do for a living?
  32. 32. Persona Research Example1. What does this person do for a living?2. What type of company do they work for?
  33. 33. Persona Research Example1. What does this person do for a living?2. What type of company do they work for?3. What is this person’s age, title, marital status
  34. 34. Persona Research Example1. What does this person do for a living?2. What type of company do they work for?3. What is this person’s age, title, marital status4. How do they look?
  35. 35. Persona Research Example1. What does this person do for a living?2. What type of company do they work for?3. What is this person’s age, title, marital status4. How do they look?5. How do they recreate?
  36. 36. Persona Research Example1. What does this person do for a living?2. What type of company do they work for?3. What is this person’s age, title, marital status4. How do they look?5. How do they recreate?6. What does their daily calendar look like?
  37. 37. Persona Research Example1. What does this person do for a living?2. What type of company do they work for?3. What is this person’s age, title, marital status4. How do they look?5. How do they recreate?6. What does their daily calendar look like?7. What keeps them up at night?
  38. 38. How People Use the Web
  39. 39. How People Read
  40. 40. How People Read Online Source: http://usableworld.com.au/2009/03/16/you-look-where-they-look/
  41. 41. How People Read Online Source: http://usableworld.com.au/2009/03/16/you-look-where-they-look/
  42. 42. How People Read Online F Source: http://usableworld.com.au/2009/03/16/you-look-where-they-look/
  43. 43. 20%Percentageof wordsread duringan averagesite visit Source: http://www.useit.com/alertbox/percent-text-read.html
  44. 44. Source: http://www.useit.com/alertbox/percent-text-read.html
  45. 45. 2Number ofclicks to getto any partof your site(ideally)
  46. 46. SitemapSketching Out Your Content
  47. 47. Sitemap Sketching Out Your ContentHome
  48. 48. Sitemap Sketching Out Your ContentHome Services
  49. 49. Sitemap Sketching Out Your ContentHome Services Projects
  50. 50. Sitemap Sketching Out Your ContentHome Services Projects About
  51. 51. Sitemap Sketching Out Your ContentHome Services Projects About Contact
  52. 52. Sitemap Sketching Out Your ContentHome Services Projects About Contact Section 1
  53. 53. Sitemap Sketching Out Your ContentHome Services Projects About Contact Section 1 Examples
  54. 54. Sitemap Sketching Out Your ContentHome Services Projects About Contact Section 1 Examples History
  55. 55. Sitemap Sketching Out Your ContentHome Services Projects About Contact Section 1 Examples History Bios
  56. 56. Sitemap Sketching Out Your ContentHome Services Projects About Contact Section 1 Examples History Bios FAQʼs
  57. 57. Sitemap Sketching Out Your ContentHome Services Projects About Contact Section 1 Examples History Quotes Bios FAQʼs
  58. 58. Sitemap Sketching Out Your ContentHome Services Projects About Contact Section 1 Examples History Section 2 Quotes Bios FAQʼs
  59. 59. Sitemap Sketching Out Your ContentHome Services Projects About Contact Section 1 Examples History Section 2 Quotes Bios Section 3 FAQʼs
  60. 60. Sitemap Sketching Out Your ContentHome Services Projects About Contact Section 1 Examples History Section 2 Quotes Bios Section 3 FAQʼs 1. Strive for only 5 major sections in your site 2. Clean, intuitive titles (based on keyword research)
  61. 61. WireframeHand-Sketch Powerpoint
  62. 62. What We Learned
  63. 63. What We Learned1. Know and empathize with your user (persona)
  64. 64. What We Learned1. Know and empathize with your user (persona)2. Simplicity Wins (Google vs.Yahoo)
  65. 65. What We Learned1. Know and empathize with your user (persona)2. Simplicity Wins (Google vs.Yahoo)3. People don’t read - they scan (F or Z Pattern)
  66. 66. What We Learned1. Know and empathize with your user (persona)2. Simplicity Wins (Google vs.Yahoo)3. People don’t read - they scan (F or Z Pattern)4. More clicks = less engagement (2 Click Rule)
  67. 67. What We Learned1. Know and empathize with your user (persona)2. Simplicity Wins (Google vs.Yahoo)3. People don’t read - they scan (F or Z Pattern)4. More clicks = less engagement (2 Click Rule)5. Sitemap + Wireframe = Saved Time and $
  68. 68. Homepages
  69. 69. Logo main navigation Main Image or Slideshow Updates Call to Action footer
  70. 70. Before
  71. 71. After
  72. 72. Afterphone
  73. 73. After phoneBiz Goal
  74. 74. After phoneBiz Goal Opt-In
  75. 75. After phone Biz Goal Opt-InVisualChoices forUser
  76. 76. After phone Biz Goal Opt-InVisualChoices forUser Call to Action
  77. 77. After phone Biz Goal Opt-InVisualChoices forUser Call to Action Full Sitemap + Contact Info
  78. 78. Pop Quiz:what does the persona look like?
  79. 79. Name: Bill Johnson Age: 52 Home: Pasadena, CA Married with 3 kids Oldest of 4 siblingsOccupation: CEO of mid-size company.Company: Apartment Renovations Inc.Clients: Landlords, Real estate investorsCulture: Laid back, friendly, professional,qualityPassion: Fly-fishing in the Rockies Persona Design
  80. 80. Name: Bill Johnson • Large Fonts Age: 52 Home: Pasadena, CA Married with 3 kids Oldest of 4 siblingsOccupation: CEO of mid-size company.Company: Apartment Renovations Inc.Clients: Landlords, Real estate investorsCulture: Laid back, friendly, professional,qualityPassion: Fly-fishing in the Rockies Persona Design
  81. 81. Name: Bill Johnson • Large Fonts Age: 52 • Email is preferred method of communication Home: Pasadena, CA Married with 3 kids Oldest of 4 siblingsOccupation: CEO of mid-size company.Company: Apartment Renovations Inc.Clients: Landlords, Real estate investorsCulture: Laid back, friendly, professional,qualityPassion: Fly-fishing in the Rockies Persona Design
  82. 82. Name: Bill Johnson • Large Fonts Age: 52 • Email is preferred method of communication Home: Pasadena, CA • Looking to escape via images Married with 3 kids Oldest of 4 siblingsOccupation: CEO of mid-size company.Company: Apartment Renovations Inc.Clients: Landlords, Real estate investorsCulture: Laid back, friendly, professional,qualityPassion: Fly-fishing in the Rockies Persona Design
  83. 83. Name: Bill Johnson • Large Fonts Age: 52 • Email is preferred method of communication Home: Pasadena, CA • Looking to escape via images Married with 3 kids • Connect from afar via fishing reports Oldest of 4 siblingsOccupation: CEO of mid-size company.Company: Apartment Renovations Inc.Clients: Landlords, Real estate investorsCulture: Laid back, friendly, professional,qualityPassion: Fly-fishing in the Rockies Persona Design
  84. 84. Name: Bill Johnson • Large Fonts Age: 52 • Email is preferred method of communication Home: Pasadena, CA • Looking to escape via images Married with 3 kids • Connect from afar via fishing reports Oldest of 4 siblings • Info for planning a tripOccupation: CEO of mid-size company.Company: Apartment Renovations Inc.Clients: Landlords, Real estate investorsCulture: Laid back, friendly, professional,qualityPassion: Fly-fishing in the Rockies Persona Design
  85. 85. Name: Bill Johnson • Large Fonts Age: 52 • Email is preferred method of communication Home: Pasadena, CA • Looking to escape via images Married with 3 kids • Connect from afar via fishing reports Oldest of 4 siblings • Info for planning a tripOccupation: CEO of mid-size company. • Know who he fishes withCompany: Apartment Renovations Inc.Clients: Landlords, Real estate investorsCulture: Laid back, friendly, professional,qualityPassion: Fly-fishing in the Rockies Persona Design
  86. 86. Innerpages
  87. 87. Logo main navigationhome / sub-page / current page Image Sidebar Main Text Sub Heading Here This is just some random text that goes here. • Bullet 1 • Bullet 2 And here’s a link over to some more info. footer
  88. 88. search
  89. 89. Remember This It’s All About: Keywords
  90. 90. Principles StrategyOverview of a Search Results Page
  91. 91. Principles StrategyOverview of a Search Results Page Keyword Phrase
  92. 92. Principles StrategyOverview of a Search Results Page Keyword Phrase Local Results
  93. 93. Principles Strategy Overview of a Search Results Page Keyword Phrase Local ResultsPageTitle
  94. 94. Principles Strategy Overview of a Search Results Page Keyword Phrase Local Results Page Title PageDescription
  95. 95. Principles Strategy Paid Search
  96. 96. Keywords StrategyHow We Find Everything Online
  97. 97. Keywords Strategy How We Find Everything Online1. Use Your Persona To Guide You
  98. 98. Keywords Strategy How We Find Everything Online1. Use Your Persona To Guide You2. Brainstorm keyword phrases around pain points
  99. 99. Keywords Strategy How We Find Everything Online1. Use Your Persona To Guide You2. Brainstorm keyword phrases around pain points3. Use Google’s AdWords Tool for ideas
  100. 100. Keywords Strategy How We Find Everything Online1. Use Your Persona To Guide You2. Brainstorm keyword phrases around pain points3. Use Google’s AdWords Tool for ideas4. Identify keywords to weave into all your content
  101. 101. insider secrets
  102. 102. users #1Usersappreciatequality andcredibility
  103. 103. users #2Users don’tread, theyscan
  104. 104. users #3Users are impatientonline and demandinstant gratification
  105. 105. users #4Users followtheir intuition(change is hard)
  106. 106. users #5Users want tohave control
  107. 107. StrategyDr. BJ Fogg - Stanford UniversityResearch focuses on why peopletrust a website Source: http://www.slideshare.net/bjfogg/web-credibility-bj-fogg-stanford-university
  108. 108. Strategy #1Design yoursite so itlooksprofessional Source: http://www.slideshare.net/bjfogg/web-credibility-bj-fogg-stanford-university
  109. 109. Strategy #2Easily verifyaccuracy ofinfo on yoursite Source: http://www.slideshare.net/bjfogg/web-credibility-bj-fogg-stanford-university
  110. 110. Strategy#3Show thatyou’re real Source: http://www.slideshare.net/bjfogg/web-credibility-bj-fogg-stanford-university
  111. 111. Strategy#4Show howyou’re anexpert Source: http://www.slideshare.net/bjfogg/web-credibility-bj-fogg-stanford-university
  112. 112. Strategy#5Put a humanface andtone to theorganization Source: http://www.slideshare.net/bjfogg/web-credibility-bj-fogg-stanford-university
  113. 113. Strategy #6Make it easyto contactyou Source: http://www.slideshare.net/bjfogg/web-credibility-bj-fogg-stanford-university
  114. 114. Strategy #7Make it easyto use anduseful Source: http://www.slideshare.net/bjfogg/web-credibility-bj-fogg-stanford-university
  115. 115. Strategy #8Update yoursite’s contentoften Source: http://www.slideshare.net/bjfogg/web-credibility-bj-fogg-stanford-university
  116. 116. Strategy #9Easy on thepromotionalcontent Source: http://www.slideshare.net/bjfogg/web-credibility-bj-fogg-stanford-university
  117. 117. Strategy#10Watch tehtipos anddead links Source: http://www.slideshare.net/bjfogg/web-credibility-bj-fogg-stanford-university
  118. 118. Q&A

×