The Intersection of Usability, Accessibility, and SEO

766 views

Published on

Presented by David Minton (Managing Partner) at
NCTech4Good Meetup (01/18/2012)
Note: This is essentially the same as the Wake Tech Community College 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
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
766
On SlideShare
0
From Embeds
0
Number of Embeds
88
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • The Intersection of Usability, Accessibility, and SEO

    1. 1. Don’t “Click here:” The Intersection of Usability, Accessibility, and SEO NCTech4Good Meetup January 18th, 2012 David Minton @DH_DavidManaging Partner @DesignHammer 1
    2. 2. Overview 2
    3. 3. Overview• What are Usability, Accessibility, and Search Engine Optimization (SEO)? 2
    4. 4. Overview• What are Usability, Accessibility, and Search Engine Optimization (SEO)?• What could Usability, Accessibility, and SEO have in common? 2
    5. 5. Why worry aboutUsability, Accessibility, and SEO? 3
    6. 6. 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
    7. 7. 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
    8. 8. 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
    9. 9. A classic blunder Can 3 billion web pages be wrong? 7
    10. 10. W3C website: 2010 8
    11. 11. W3C website: c.1992 9
    12. 12. “Click here” 10
    13. 13. “Click here”• Emerged sometime between 1992 & 1995 10
    14. 14. “Click here”• Emerged sometime between 1992 & 1995• Became popular 10
    15. 15. Very, very popular 11
    16. 16. More than the Beatles 12
    17. 17. …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
    18. 18. “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
    19. 19. Does anyone listen? 15
    20. 20. Does anyone listen?• Can 3.3 billion web pages be wrong? 15
    21. 21. Does anyone listen?• Can 3.3 billion web pages be wrong?• “Click here” prevails! 15
    22. 22. On top: Adobe Reader 16
    23. 23. On top: Adobe Reader 17
    24. 24. Why is this top result? 18
    25. 25. 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
    26. 26. Real life searches 20
    27. 27. “Click here” is bad SEO 21
    28. 28. “Click here” is bad SEO• Some are swayed by SEO angle 21
    29. 29. “Click here” is bad SEO• Some are swayed by SEO angle• “Click here” still prevails, mostly 21
    30. 30. Types of UsersThree samples — how different are they? 22
    31. 31. Three sample groups 23
    32. 32. Three sample groups• Sighted human 23
    33. 33. Three sample groups• Sighted human• Sight-impaired human 23
    34. 34. Three sample groups• Sighted human• Sight-impaired human• Robot 23
    35. 35. Sighted user 24
    36. 36. Sighted user• Uses visually rich web browser 24
    37. 37. Sighted user• Uses visually rich web browser• Read non-linear 24
    38. 38. Sighted user• Uses visually rich web browser• Read non-linear• Use visual cues to determine relevance 24
    39. 39. Sight impaired user 25
    40. 40. Sight impaired user• Uses Assistive Technologies (AT) 25
    41. 41. Sight impaired user• Uses Assistive Technologies (AT)• Read non-linear with difficulty 25
    42. 42. Sight impaired user• Uses Assistive Technologies (AT)• Read non-linear with difficulty• Can’t use visual cues to determine relevance 25
    43. 43. (Search engine) robot 26
    44. 44. (Search engine) robot• Reads code without rendering 26
    45. 45. (Search engine) robot• Reads code without rendering• Reads linear 26
    46. 46. (Search engine) robot• Reads code without rendering• Reads linear• Can’t use visual cues to determine relevance 26
    47. 47. What do they have in common? 27
    48. 48. Usability 28
    49. 49. 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
    50. 50. Structure vs.PresentationAppearances may be deceiving 29
    51. 51. Structure tags 30
    52. 52. Structure tagsHTML tags used to identify the significance ofcontent, such as: 30
    53. 53. Structure tagsHTML tags used to identify the significance ofcontent, such as:• <title> — document title 30
    54. 54. Structure tagsHTML tags used to identify the significance ofcontent, such as:• <title> — document title• <h1> — level one headline 30
    55. 55. Structure tagsHTML tags used to identify the significance ofcontent, such as:• <title> — document title• <h1> — level one headline• <p> — paragraph 30
    56. 56. Presentation 31
    57. 57. 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
    58. 58. Good usability 32
    59. 59. Underlying structure 33
    60. 60. Screen reader 34
    61. 61. Accessibility simulator 35
    62. 62. Heading list 36
    63. 63. Heading list Fangs Screen Reader Emulator (Firefox Add-on)https://addons.mozilla.org/en-us/firefox/addon/402/ 36
    64. 64. Links list 37
    65. 65. Links list Fangs Screen Reader Emulator (Firefox Add-on)https://addons.mozilla.org/en-us/firefox/addon/402/ 37
    66. 66. Poor usability 38
    67. 67. Underlying structure 39
    68. 68. Accessibility simulator 40
    69. 69. Headings list 41
    70. 70. Headings list Fangs Screen Reader Emulator (Firefox Add-on)https://addons.mozilla.org/en-us/firefox/addon/402/ 41
    71. 71. Links list 42
    72. 72. Links list Fangs Screen Reader Emulator (Firefox Add-on)https://addons.mozilla.org/en-us/firefox/addon/402/ 42
    73. 73. ImagesDon’t miss an opportunity! 43
    74. 74. Sees images 44
    75. 75. Images What a sight-impaired user &(Search Engine) robot may see 45
    76. 76. Empty <alt> text<img src="/twitpocalypse.png" alt=" "> 46
    77. 77. Helpful <alt> text "Twitpocalypse is upon us!" <img src="/twitpocalypse.png"alt="Twitpocalypse is upon us!"> 47
    78. 78. Types of Disabilities Four classes, each with different needs 48
    79. 79. Types of disabilities 49
    80. 80. Types of disabilities• Visual 49
    81. 81. Types of disabilities• Visual • Blind 49
    82. 82. Types of disabilities• Visual • Blind • Low vision 49
    83. 83. Types of disabilities• Visual • Blind • Low vision • Color blind 49
    84. 84. Types of disabilities• Visual • Blind • Low vision • Color blind• Hearing 49
    85. 85. Types of disabilities• Visual • Blind • Low vision • Color blind• Hearing• Mobility 49
    86. 86. Types of disabilities• Visual • Blind • Low vision • Color blind• Hearing• Mobility• Cognitive and Learning Disabilities 49
    87. 87. Color DeficitsDon’t rely on color to express information 50
    88. 88. 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
    89. 89. 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
    90. 90. 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% March 2008 February 2008 53
    91. 91. 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% March 2008 February 2008 54
    92. 92. Audio & VideoWhat a hearing disabled user may experience 55
    93. 93. Video without text 56
    94. 94. Audio & Video What a hearing disabled user &(Search Engine) robot may experience 57
    95. 95. Video without text 58
    96. 96. Subtitles & transcript 59
    97. 97. Prada S.p.A.Case study: style over substance 60
    98. 98. Prada home page 61
    99. 99. English home page 62
    100. 100. Links spawn videos 63
    101. 101. …lots of videos 64
    102. 102. Store finder 65
    103. 103. Home page 66
    104. 104. Home page SEO view 67
    105. 105. Prada Online Store Sighted user experience 68
    106. 106. Store home page 69
    107. 107. Product list page 70
    108. 108. Product detail page 71
    109. 109. Secure checkout 72
    110. 110. Prada Online StoreSearch Engine & sight-impaired user experience 73
    111. 111. Site listing 74
    112. 112. Online store 75
    113. 113. Secure checkout 76
    114. 114. Levi Strauss & Co. Case study: hard working website 77
    115. 115. Site listing 78
    116. 116. Levis home page 79
    117. 117. Product list page 80
    118. 118. Product detail page 81
    119. 119. Product detail page 82
    120. 120. Product detail page 83
    121. 121. It Doesn’t End HereThere are many Usability pitfalls out there. 84
    122. 122. Other Hurdles 85
    123. 123. Other Hurdles• Flash and AJAX 85
    124. 124. Other Hurdles• Flash and AJAX• Frames and framesets 85
    125. 125. Other Hurdles• Flash and AJAX• Frames and framesets• Dependence on visual cues 85
    126. 126. Other Hurdles• Flash and AJAX• Frames and framesets• Dependence on visual cues• Poorly written content 85
    127. 127. Conclusion 86
    128. 128. Conclusion• Call it Usability, Accessibility, or SEO; it’s all about Usability in one form or another. 86
    129. 129. 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
    130. 130. David MintonManaging Partner @DesignHammer @DH_David www.designhammer.com 87

    ×