Your SlideShare is downloading. ×
Don’t “Click here:”    The Intersection of Usability,       Accessibility, and SEO   Wake Tech Community College       Feb...
Overview• What are Usability, Accessibility, and Search  Engine Optimization (SEO)?• What could Usability, Accessibility, ...
Why worry aboutUsability, Accessibility,      and SEO?            3
Search Engine Optimization“In my experience, the traffic difference fromposition #1 to position #11 is…somethingcloser to 1...
Usability“It’s quite normal for e-commerce sites toincrease sales by 100% or more as a result ofusability. More important,...
Accessibility“Companies that do not consider accessibilityin their Web site or product development willcome to regret that...
A classic blunder Can 3 billion web pages be wrong?                 7
W3C website: 2010        8
W3C website: c.1992         9
“Click here”• Emerged sometime between 1992 & 1995• Became popular                  10
Very, very popular        11
More than the Beatles          12
…and major sports   786,000,000    Football   415,000,000    Basketball   216,000,000    Baseball   131,000,000    Hockey ...
“Click here” is bad usability   “Explain what users will find at the other   end of the link, and include some of the key  ...
Does anyone listen?• Can 3.3 billion web pages be wrong?• “Click here” prevails!                    15
On top: Adobe Reader         16
On top: Adobe Reader         17
Why is this top result?           18
Incoming linksTens of thousands of incoming links, like this:“You will need Acrobat Reader to read orprint this document. ...
Real life searches        20
“Click here” is bad SEO• Some are swayed by SEO angle• “Click here” still prevails, mostly                       21
Types of UsersThree samples — how different are they?                  22
Three sample groups• Sighted human• Sight-impaired human• Robot                   23
Sighted user• Uses visually rich web browser• Read non-linear• Use visual cues to determine relevance                     24
Sight impaired user• Uses Assistive Technologies (AT)• Read non-linear with difficulty• Can’t use visual cues to determine ...
(Search engine) robot• Reads code without rendering• Reads linear• Can’t use visual cues to determine relevance           ...
What do they have in    common?         27
Usability“Usability means making sure something workswell, and that a person* of average ability orexperience can use it f...
Structure vs.PresentationAppearances may be deceiving             29
Structure tagsHTML tags used to identify the significance ofcontent, such as:• <title> — document title• <h1> — level one h...
PresentationThe style applied to content that affects theway it looks. An example of a CSS style:h1 {! font: bold 24px ari...
Good usability      32
Underlying structure         33
Screen reader      34
Accessibility simulator           35
Heading list     Fangs Screen Reader Emulator (Firefox Add-on)https://addons.mozilla.org/en-us/firefox/addon/402/         ...
Links list     Fangs Screen Reader Emulator (Firefox Add-on)https://addons.mozilla.org/en-us/firefox/addon/402/           ...
Poor usability      38
Underlying structure         39
Accessibility simulator           40
Headings list     Fangs Screen Reader Emulator (Firefox Add-on)https://addons.mozilla.org/en-us/firefox/addon/402/        ...
Links list     Fangs Screen Reader Emulator (Firefox Add-on)https://addons.mozilla.org/en-us/firefox/addon/402/           ...
ImagesDon’t miss an opportunity!            43
Sees images     44
Images What a sight-impaired user &(Search Engine) robot may see             45
Empty <alt> text<img src="/twitpocalypse.png"          alt=" ">              46
Helpful <alt> text           "Twitpocalypse             is upon us!" <img src="/twitpocalypse.png"alt="Twitpocalypse is up...
Types of Disabilities Four classes, each with different needs                   48
Types of disabilities• Visual  •   Blind  •   Low vision  •   Color blind• Hearing• Mobility• Cognitive and Learning Disab...
Color DeficitsDon’t rely on color to express information                    50
Normal vision                                                           59.8%  Google                                     ...
Deuteranope view                                                           59.8%  Google                                  ...
Good: add legend                                                           59.8%  Google                                  ...
Better: add pattern                                                           59.8%  Google                               ...
Audio & VideoWhat a hearing disabled user may experience                    55
Video without text        56
Audio & Video   What a hearing disabled user &(Search Engine) robot may experience                 57
Video without text        58
Subtitles & transcript          59
Prada S.p.A.Case study: style over substance               60
Prada home page       61
English home page        62
Links spawn videos        63
…lots of videos       64
Store finder     65
Home page    66
Home page SEO view        67
Prada Online Store    Sighted user experience              68
Store home page       69
Product list page        70
Product detail page         71
Secure checkout       72
Prada Online StoreSearch Engine & sight-impaired user experience                      73
Site listing     74
Online store     75
Secure checkout       76
Levi Strauss & Co. Case study: hard working website                77
Site listing     78
Levis home page       79
Product list page        80
Product detail page         81
Product detail page         82
Product detail page         83
It Doesn’t End HereThere are many Usability pitfalls out there.                     84
Other Hurdles• Audio and video• Flash and AJAX• Frames and framesets• Dependence on visual cues• Insufficient Structural HT...
Conclusion• Call it Usability, Accessibility, or SEO; it’s all  about Usability in one form or another.• If you do nothing...
David MintonManaging Partner @DesignHammer          @DH_David    www.designhammer.com              87
Upcoming SlideShare
Loading in...5
×

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

1,220

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,220
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "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

×