New and Improved: The Intersection of Usability, Accessibility, and SEO

1,450 views

Published on

Presented by David Minton (Managing Partner) at
Wake Tech Community College (02/17/2011)

Note: This is a longer version of the Internet Summit 2010 version of the presentation.

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: Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,450
On SlideShare
0
From Embeds
0
Number of Embeds
457
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

New and Improved: The Intersection of Usability, Accessibility, and SEO

  1. 1. Don’t “Click here:” The Intersection of Usability, Accessibility, and SEO Wake Tech Community College February 17th, 2011 David Minton @DH_DavidManaging Partner @DesignHammer 1
  2. 2. Overview• What are Usability, Accessibility, and Search Engine Optimization (SEO)?• What could Usability, Accessibility, and SEO have in common? 2
  3. 3. Why worry aboutUsability, Accessibility, and SEO? 3
  4. 4. Search Engine Optimization“In my experience, the traffic difference fromposition #1 to position #11 is…somethingcloser to 1/100th of the visits.” Rand Fishkin CEO & Co-Founder of SEOmoz 4
  5. 5. Usability“It’s quite normal for e-commerce sites toincrease sales by 100% or more as a result ofusability. More important, they can probablyavoid 9 of 10 returns by eliminating most mis-designed items (a 1,000% improvement of theerror rate metric).” Jakob Nielsen, Nielsen Norman Group “the guru of Web page usability” 5
  6. 6. Accessibility“Companies that do not consider accessibilityin their Web site or product development willcome to regret that decision, because weintend to use every tool at our disposal toensure that people with disabilities have equalaccess to technology…” Thomas E. Perez, Asst. Attorney General, US Dept. of Justice 2010 Jacobus tenBroek Disability Law Symposium 6
  7. 7. A classic blunder Can 3 billion web pages be wrong? 7
  8. 8. W3C website: 2010 8
  9. 9. W3C website: c.1992 9
  10. 10. “Click here”• Emerged sometime between 1992 & 1995• Became popular 10
  11. 11. Very, very popular 11
  12. 12. More than the Beatles 12
  13. 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
  14. 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. Dont use ‘click here’ or other non-descriptive link text.” Jakob Nielsen Top Ten Web Design Mistakes of 2005 14
  15. 15. Does anyone listen?• Can 3.3 billion web pages be wrong?• “Click here” prevails! 15
  16. 16. On top: Adobe Reader 16
  17. 17. On top: Adobe Reader 17
  18. 18. Why is this top result? 18
  19. 19. Incoming linksTens of thousands of incoming links, like this:“You will need Acrobat Reader to read orprint this document. To download AcrobatReader click here.” 19
  20. 20. Real life searches 20
  21. 21. “Click here” is bad SEO• Some are swayed by SEO angle• “Click here” still prevails, mostly 21
  22. 22. Types of UsersThree samples — how different are they? 22
  23. 23. Three sample groups• Sighted human• Sight-impaired human• Robot 23
  24. 24. Sighted user• Uses visually rich web browser• Read non-linear• Use visual cues to determine relevance 24
  25. 25. Sight impaired user• Uses Assistive Technologies (AT)• Read non-linear with difficulty• Can’t use visual cues to determine relevance 25
  26. 26. (Search engine) robot• Reads code without rendering• Reads linear• Can’t use visual cues to determine relevance 26
  27. 27. What do they have in common? 27
  28. 28. Usability“Usability means making sure something workswell, and that a person* of average ability orexperience can use it for it’s intended purposewithout getting hopelessly frustrated.” Steve Krug, Author — Dont Make Me Think: A Common Sense Approach to Web Usability *be they sighted, sight-impaired, or a robot 28
  29. 29. Structure vs.PresentationAppearances may be deceiving 29
  30. 30. Structure tagsHTML tags used to identify the significance ofcontent, such as:• <title> — document title• <h1> — level one headline• <p> — paragraph 30
  31. 31. PresentationThe style applied to content that affects theway it looks. An example of a CSS style:h1 {! font: bold 24px arial;! margin: 10px 0 10px 0;} 31
  32. 32. Good usability 32
  33. 33. Underlying structure 33
  34. 34. Screen reader 34
  35. 35. Accessibility simulator 35
  36. 36. Heading list Fangs Screen Reader Emulator (Firefox Add-on)https://addons.mozilla.org/en-us/firefox/addon/402/ 36
  37. 37. Links list Fangs Screen Reader Emulator (Firefox Add-on)https://addons.mozilla.org/en-us/firefox/addon/402/ 37
  38. 38. Poor usability 38
  39. 39. Underlying structure 39
  40. 40. Accessibility simulator 40
  41. 41. Headings list Fangs Screen Reader Emulator (Firefox Add-on)https://addons.mozilla.org/en-us/firefox/addon/402/ 41
  42. 42. Links list Fangs Screen Reader Emulator (Firefox Add-on)https://addons.mozilla.org/en-us/firefox/addon/402/ 42
  43. 43. ImagesDon’t miss an opportunity! 43
  44. 44. Sees images 44
  45. 45. Images What a sight-impaired user &(Search Engine) robot may see 45
  46. 46. Empty <alt> text<img src="/twitpocalypse.png" alt=" "> 46
  47. 47. Helpful <alt> text "Twitpocalypse is upon us!" <img src="/twitpocalypse.png"alt="Twitpocalypse is upon us!"> 47
  48. 48. Types of Disabilities Four classes, each with different needs 48
  49. 49. Types of disabilities• Visual • Blind • Low vision • Color blind• Hearing• Mobility• Cognitive and Learning Disabilities 49
  50. 50. Color DeficitsDon’t rely on color to express information 50
  51. 51. Normal vision 59.8% Google 59.2% 21.3% Yahoo 21.6% 9.4%Microsoft 9.6% 4.8% AOL 4.9% 0% 10% 20% 30% 40% 50% 60% 51
  52. 52. Deuteranope view 59.8% Google 59.2% 21.3% Yahoo 21.6% 9.4%Microsoft 9.6% 4.8% AOL 4.9% 0% 10% 20% 30% 40% 50% 60% 52
  53. 53. Good: add legend 59.8% Google 59.2% 21.3% Yahoo 21.6% 9.4%Microsoft 9.6% 4.8% AOL 4.9% 0% 10% 20% 30% 40% 50% 60% February 2008 March 2008 53
  54. 54. Better: add pattern 59.8% Google 59.2% 21.3% Yahoo 21.6% 9.4%Microsoft 9.6% 4.8% AOL 4.9% 0% 10% 20% 30% 40% 50% 60% February 2008 March 2008 54
  55. 55. Audio & VideoWhat a hearing disabled user may experience 55
  56. 56. Video without text 56
  57. 57. Audio & Video What a hearing disabled user &(Search Engine) robot may experience 57
  58. 58. Video without text 58
  59. 59. Subtitles & transcript 59
  60. 60. Prada S.p.A.Case study: style over substance 60
  61. 61. Prada home page 61
  62. 62. English home page 62
  63. 63. Links spawn videos 63
  64. 64. …lots of videos 64
  65. 65. Store finder 65
  66. 66. Home page 66
  67. 67. Home page SEO view 67
  68. 68. Prada Online Store Sighted user experience 68
  69. 69. Store home page 69
  70. 70. Product list page 70
  71. 71. Product detail page 71
  72. 72. Secure checkout 72
  73. 73. Prada Online StoreSearch Engine & sight-impaired user experience 73
  74. 74. Site listing 74
  75. 75. Online store 75
  76. 76. Secure checkout 76
  77. 77. Levi Strauss & Co. Case study: hard working website 77
  78. 78. Site listing 78
  79. 79. Levis home page 79
  80. 80. Product list page 80
  81. 81. Product detail page 81
  82. 82. Product detail page 82
  83. 83. Product detail page 83
  84. 84. It Doesn’t End HereThere are many Usability pitfalls out there. 84
  85. 85. Other Hurdles• Audio and video• Flash and AJAX• Frames and framesets• Dependence on visual cues• Insufficient Structural HTML tags• Poorly written content 85
  86. 86. 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. 86
  87. 87. David MintonManaging Partner @DesignHammer @DH_David www.designhammer.com 87

×