Your SlideShare is downloading. ×
  • Like
Fundamentals of Designing Web Experiences
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Fundamentals of Designing Web Experiences

  • 329 views
Published

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

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

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
329
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
9
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Best Practices in Web Design
  • 2. Our Flight Plan
  • 3. Our Flight Plan6:00 - 6:15 Review + Questions
  • 4. Our Flight Plan6:00 - 6:15 Review + Questions6:15 - 7:00 Anatomy of a homepage, innerpage *Pitch
  • 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. 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. What Makes a Great Site? User’s Needs
  • 8. What Makes a Great Site? User’s Needs
  • 9. What Makes a Great Site? User’s Needs
  • 10. What Makes a Great Site? User’s Needs
  • 11. What Makes a Great Site? Visuals User’s Needs
  • 12. What Makes a Great Site? Typography Visuals User’s Needs
  • 13. What Makes a Great Site? Usability Typography Visuals User’s Needs
  • 14. What Makes a Great Site? Think Experiences.
  • 15. X
  • 16. Flashback
  • 17. Flashback
  • 18. Today
  • 19. Persona
  • 20. Personawho are you designing for?
  • 21. Our Mantra:
  • 22. Our Mantra:We
  • 23. Our Mantra:We Are
  • 24. Our Mantra:We Are Not
  • 25. Our Mantra:We Are Not The
  • 26. Our Mantra:We Are Not The Target
  • 27. Our Mantra:We Are Not The Target Market
  • 28. http://aimeegd.files.wordpress.com/2009/06/personna-mapping.jpg
  • 29. Empathy...(and how to get it) http://aimeegd.files.wordpress.com/2009/06/personna-mapping.jpg
  • 30. Persona Research Example
  • 31. Persona Research Example1. What does this person do for a living?
  • 32. Persona Research Example1. What does this person do for a living?2. What type of company do they work for?
  • 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. 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. 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. 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. 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. How People Use the Web
  • 39. How People Read
  • 40. How People Read Online Source: http://usableworld.com.au/2009/03/16/you-look-where-they-look/
  • 41. How People Read Online Source: http://usableworld.com.au/2009/03/16/you-look-where-they-look/
  • 42. How People Read Online F Source: http://usableworld.com.au/2009/03/16/you-look-where-they-look/
  • 43. 20%Percentageof wordsread duringan averagesite visit Source: http://www.useit.com/alertbox/percent-text-read.html
  • 44. Source: http://www.useit.com/alertbox/percent-text-read.html
  • 45. 2Number ofclicks to getto any partof your site(ideally)
  • 46. SitemapSketching Out Your Content
  • 47. Sitemap Sketching Out Your ContentHome
  • 48. Sitemap Sketching Out Your ContentHome Services
  • 49. Sitemap Sketching Out Your ContentHome Services Projects
  • 50. Sitemap Sketching Out Your ContentHome Services Projects About
  • 51. Sitemap Sketching Out Your ContentHome Services Projects About Contact
  • 52. Sitemap Sketching Out Your ContentHome Services Projects About Contact Section 1
  • 53. Sitemap Sketching Out Your ContentHome Services Projects About Contact Section 1 Examples
  • 54. Sitemap Sketching Out Your ContentHome Services Projects About Contact Section 1 Examples History
  • 55. Sitemap Sketching Out Your ContentHome Services Projects About Contact Section 1 Examples History Bios
  • 56. Sitemap Sketching Out Your ContentHome Services Projects About Contact Section 1 Examples History Bios FAQʼs
  • 57. Sitemap Sketching Out Your ContentHome Services Projects About Contact Section 1 Examples History Quotes Bios FAQʼs
  • 58. Sitemap Sketching Out Your ContentHome Services Projects About Contact Section 1 Examples History Section 2 Quotes Bios FAQʼs
  • 59. Sitemap Sketching Out Your ContentHome Services Projects About Contact Section 1 Examples History Section 2 Quotes Bios Section 3 FAQʼs
  • 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. WireframeHand-Sketch Powerpoint
  • 62. What We Learned
  • 63. What We Learned1. Know and empathize with your user (persona)
  • 64. What We Learned1. Know and empathize with your user (persona)2. Simplicity Wins (Google vs.Yahoo)
  • 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. 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. 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. Homepages
  • 69. Logo main navigation Main Image or Slideshow Updates Call to Action footer
  • 70. Before
  • 71. After
  • 72. Afterphone
  • 73. After phoneBiz Goal
  • 74. After phoneBiz Goal Opt-In
  • 75. After phone Biz Goal Opt-InVisualChoices forUser
  • 76. After phone Biz Goal Opt-InVisualChoices forUser Call to Action
  • 77. After phone Biz Goal Opt-InVisualChoices forUser Call to Action Full Sitemap + Contact Info
  • 78. Pop Quiz:what does the persona look like?
  • 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. 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. 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. 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. 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. 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. 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. Innerpages
  • 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. search
  • 89. Remember This It’s All About: Keywords
  • 90. Principles StrategyOverview of a Search Results Page
  • 91. Principles StrategyOverview of a Search Results Page Keyword Phrase
  • 92. Principles StrategyOverview of a Search Results Page Keyword Phrase Local Results
  • 93. Principles Strategy Overview of a Search Results Page Keyword Phrase Local ResultsPageTitle
  • 94. Principles Strategy Overview of a Search Results Page Keyword Phrase Local Results Page Title PageDescription
  • 95. Principles Strategy Paid Search
  • 96. Keywords StrategyHow We Find Everything Online
  • 97. Keywords Strategy How We Find Everything Online1. Use Your Persona To Guide You
  • 98. Keywords Strategy How We Find Everything Online1. Use Your Persona To Guide You2. Brainstorm keyword phrases around pain points
  • 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. 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. insider secrets
  • 102. users #1Usersappreciatequality andcredibility
  • 103. users #2Users don’tread, theyscan
  • 104. users #3Users are impatientonline and demandinstant gratification
  • 105. users #4Users followtheir intuition(change is hard)
  • 106. users #5Users want tohave control
  • 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. Strategy #1Design yoursite so itlooksprofessional Source: http://www.slideshare.net/bjfogg/web-credibility-bj-fogg-stanford-university
  • 109. Strategy #2Easily verifyaccuracy ofinfo on yoursite Source: http://www.slideshare.net/bjfogg/web-credibility-bj-fogg-stanford-university
  • 110. Strategy#3Show thatyou’re real Source: http://www.slideshare.net/bjfogg/web-credibility-bj-fogg-stanford-university
  • 111. Strategy#4Show howyou’re anexpert Source: http://www.slideshare.net/bjfogg/web-credibility-bj-fogg-stanford-university
  • 112. Strategy#5Put a humanface andtone to theorganization Source: http://www.slideshare.net/bjfogg/web-credibility-bj-fogg-stanford-university
  • 113. Strategy #6Make it easyto contactyou Source: http://www.slideshare.net/bjfogg/web-credibility-bj-fogg-stanford-university
  • 114. Strategy #7Make it easyto use anduseful Source: http://www.slideshare.net/bjfogg/web-credibility-bj-fogg-stanford-university
  • 115. Strategy #8Update yoursite’s contentoften Source: http://www.slideshare.net/bjfogg/web-credibility-bj-fogg-stanford-university
  • 116. Strategy #9Easy on thepromotionalcontent Source: http://www.slideshare.net/bjfogg/web-credibility-bj-fogg-stanford-university
  • 117. Strategy#10Watch tehtipos anddead links Source: http://www.slideshare.net/bjfogg/web-credibility-bj-fogg-stanford-university
  • 118. Q&A