Don’t "Click here:" The Intersection of Usability, Accessibility, and SEO

  • 2,352 views
Uploaded on

Presented by David Minton (Managing Partner) at …

Presented by David Minton (Managing Partner) at
Internet Summit 2010 (Raleigh, NC, 11/18/2010)

When considering a website’s optimal level of Usability, it becomes evident that the practices of SEO and Accessibility also factor greatly into this area of the website’s success. To achieve a website with a high degree of Usability, one must develop it with three audiences in mind; 1) average visitors, 2) disabled visitors, and 3) search engine robots. As each user browses through the site, there are hurdles to overcome such as interpreting hyperlinks, images, and flash files. While implementing a few techniques will improve the user experience for a particular audience, benefits can be found in the Usability improvement for all three. Through adequately preparing it to reach all three audiences, you are ensuring the site achieves the basic goal of effective online communication.

This presentation will cover the basics of Usability, Accessibility and SEO, how they are interrelated and discuss what solutions are available to serve each audience and improve overall website Usability.

More in: Design , Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
2,352
On Slideshare
0
From Embeds
0
Number of Embeds
3

Actions

Shares
Downloads
0
Comments
2
Likes
7

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. Don’t “Click here:” The Intersection of Usability, Accessibility, and SEO Internet Summit 10 November 18th, 2010 David Minton @DH_David Managing Partner @DesignHammer 1 1
  • 2. Overview • What are Usability, Accessibility, and Search Engine Optimization (SEO)? • What could Usability, Accessibility, and SEO have in common? 2 2
  • 3. Why worry about Usability, Accessibility, and SEO? 3 3
  • 4. Search Engine Optimization “In my experience, the traffic difference from position #1 to position #11 is…something closer to 1/100th of the visits.” Rand Fishkin CEO & Co-Founder of SEOmoz 4 4
  • 5. Usability “It’s quite normal for e-commerce sites to increase sales by 100% or more as a result of usability. More important, they can probably avoid 9 of 10 returns by eliminating most mis- designed items (a 1,000% improvement of the error rate metric).” Jakob Nielsen, Nielsen Norman Group “the guru of Web page usability” 5 5
  • 6. Accessibility “Companies that do not consider accessibility in their Web site or product development will come to regret that decision, because we intend to use every tool at our disposal to ensure that people with disabilities have equal access to technology…” Thomas E. Perez, Asst. Attorney General, US Dept. of Justice 2010 Jacobus tenBroek Disability Law Symposium 6 6
  • 7. A classic blunder Can 3 billion web pages be wrong? 7 7
  • 8. W3C website: 2010 8 8
  • 9. W3C website: c.1992 9 9
  • 10. “Click here” • Emerged sometime between 1992 & 1995 • Became popular 10 10
  • 11. Very, very popular 11 11
  • 12. More than the Beatles 12 12
  • 13. …and major sports 786,000,000 Football 415,000,000 Basketball 216,000,000 Baseball 131,000,000 Hockey 68,500,000 The Beatles 1,616,500,000 13 13
  • 14. “Click here” is bad usability “Explain what users will find at the other end of the link, and include some of the key information-carrying terms in the anchor text itself to enhance scannability and SEO. Don't use ‘click here’ or other non-descriptive link text.” Jakob Nielsen Top Ten Web Design Mistakes of 2005 14 14
  • 15. Does anyone listen? • Can 3.3 billion web pages be wrong? • “Click here” prevails! 15 15
  • 16. On top: Adobe Reader 16 16
  • 17. On top: Adobe Reader 17 17
  • 18. Why is this top result? 18 18
  • 19. Incoming links Tens of thousands of incoming links, like this: “You will need Acrobat Reader to read or print this document. To download Acrobat Reader click here.” 19 19
  • 20. Real life searches 20 20
  • 21. “Click here” is bad SEO • Some are swayed by SEO angle • “Click here” still prevails, mostly 21 21
  • 22. Types of Users Three samples — how different are they? 22 22
  • 23. Three sample groups • Sighted human • Sight-impaired human • Robot 23 23
  • 24. Sighted user • Uses visually rich web browser • Read non-linear • Use visual cues to determine relevance 24 24
  • 25. Sight impaired user • Uses Assistive Technologies (AT) • Read non-linear with difficulty • Can’t use visual cues to determine relevance 25 25
  • 26. (Search engine) robot • Reads code without rendering • Reads linear • Can’t use visual cues to determine relevance 26 26
  • 27. What do they have in common? 27 27
  • 28. Usability “Usability means making sure something works well, and that a person* of average ability or experience can use it for it’s intended purpose without getting hopelessly frustrated.” Steve Krug, Author — Don't Make Me Think: A Common Sense Approach to Web Usability *be they sighted, sight-impaired, or a robot 28 28
  • 29. Structure vs. Presentation Appearances may be deceiving 29 29
  • 30. Structure tags HTML tags used to identify the significance of content, such as: • <title> — document title • <h1> — level one headline • <p> — paragraph 30 30
  • 31. Presentation The style applied to content that affects the way it looks. An example of a CSS style: h1 { ! font: bold 24px arial; ! margin: 10px 0 10px 0; } 31 31
  • 32. Good usability 32 32
  • 33. Underlying structure 33 33
  • 34. Screen reader 34 34
  • 35. Accessibility simulator 35 35
  • 36. Heading list Fangs Screen Reader Emulator (Firefox Add-on) https://addons.mozilla.org/en-us/firefox/addon/402/ 36 36
  • 37. Links list Fangs Screen Reader Emulator (Firefox Add-on) https://addons.mozilla.org/en-us/firefox/addon/402/ 37 37
  • 38. Poor usability 38 38
  • 39. Underlying structure 39 39
  • 40. Accessibility simulator 40 40
  • 41. Headings list Fangs Screen Reader Emulator (Firefox Add-on) https://addons.mozilla.org/en-us/firefox/addon/402/ 41 41
  • 42. Links list Fangs Screen Reader Emulator (Firefox Add-on) https://addons.mozilla.org/en-us/firefox/addon/402/ 42 42
  • 43. Images Don’t miss an opportunity! 43 43
  • 44. Images What a sighted user may see 44 44
  • 45. Sees images 45 45
  • 46. Images What a sight-impaired user & (Search Engine) robot may see 46 46
  • 47. Empty <alt> text <img src="/twitpocalypse.png" alt=" "> 47 47
  • 48. Helpful <alt> text "Twitpocalypse is upon us!" <img src="/twitpocalypse.png" alt="Twitpocalypse is upon us!"> 48 48
  • 49. It Doesn’t End Here There are many Usability pitfalls out there. 49 49
  • 50. Other Hurdles • Audio and video • Flash and AJAX • Frames and framesets • Dependence on visual cues • Insufficient Structural HTML tags • Poorly written content 50 50
  • 51. Conclusion • Call it Usability, Accessibility, or SEO — it’s all about Usability in one form or another. • If you do nothing else, SEO best practices can help improve usability for sighted as well as sight-impaired users. 51 51
  • 52. David Minton Managing Partner @DesignHammer @DH_David www.designhammer.com 52 52