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

4,408 views

Published on

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.

Published in: Design, Technology
2 Comments
7 Likes
Statistics
Notes
No Downloads
Views
Total views
4,408
On SlideShare
0
From Embeds
0
Number of Embeds
74
Actions
Shares
0
Downloads
0
Comments
2
Likes
7
Embeds 0
No embeds

No notes for slide

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

  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

×