Your SlideShare is downloading. ×
  • Like
  • Save
New and Improved: The Intersection of Usability, Accessibility, and SEO
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

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

  • 1,179 views
Published

Presented by David Minton (Managing Partner) at …

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
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,179
On SlideShare
0
From Embeds
0
Number of Embeds
3

Actions

Shares
Downloads
0
Comments
0
Likes
1

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 Wake Tech Community College February 17th, 2011 David Minton @DH_DavidManaging Partner @DesignHammer 1
  • 2. Overview• What are Usability, Accessibility, and Search Engine Optimization (SEO)?• What could Usability, Accessibility, and SEO have in common? 2
  • 3. Why worry aboutUsability, Accessibility, and SEO? 3
  • 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. 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. 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. A classic blunder Can 3 billion web pages be wrong? 7
  • 8. W3C website: 2010 8
  • 9. W3C website: c.1992 9
  • 10. “Click here”• Emerged sometime between 1992 & 1995• Became popular 10
  • 11. Very, very popular 11
  • 12. More than the Beatles 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
  • 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. Does anyone listen?• Can 3.3 billion web pages be wrong?• “Click here” prevails! 15
  • 16. On top: Adobe Reader 16
  • 17. On top: Adobe Reader 17
  • 18. Why is this top result? 18
  • 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. Real life searches 20
  • 21. “Click here” is bad SEO• Some are swayed by SEO angle• “Click here” still prevails, mostly 21
  • 22. Types of UsersThree samples — how different are they? 22
  • 23. Three sample groups• Sighted human• Sight-impaired human• Robot 23
  • 24. Sighted user• Uses visually rich web browser• Read non-linear• Use visual cues to determine relevance 24
  • 25. Sight impaired user• Uses Assistive Technologies (AT)• Read non-linear with difficulty• Can’t use visual cues to determine relevance 25
  • 26. (Search engine) robot• Reads code without rendering• Reads linear• Can’t use visual cues to determine relevance 26
  • 27. What do they have in common? 27
  • 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. Structure vs.PresentationAppearances may be deceiving 29
  • 30. Structure tagsHTML tags used to identify the significance ofcontent, such as:• <title> — document title• <h1> — level one headline• <p> — paragraph 30
  • 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. Good usability 32
  • 33. Underlying structure 33
  • 34. Screen reader 34
  • 35. Accessibility simulator 35
  • 36. Heading list Fangs Screen Reader Emulator (Firefox Add-on)https://addons.mozilla.org/en-us/firefox/addon/402/ 36
  • 37. Links list Fangs Screen Reader Emulator (Firefox Add-on)https://addons.mozilla.org/en-us/firefox/addon/402/ 37
  • 38. Poor usability 38
  • 39. Underlying structure 39
  • 40. Accessibility simulator 40
  • 41. Headings list Fangs Screen Reader Emulator (Firefox Add-on)https://addons.mozilla.org/en-us/firefox/addon/402/ 41
  • 42. Links list Fangs Screen Reader Emulator (Firefox Add-on)https://addons.mozilla.org/en-us/firefox/addon/402/ 42
  • 43. ImagesDon’t miss an opportunity! 43
  • 44. Sees images 44
  • 45. Images What a sight-impaired user &(Search Engine) robot may see 45
  • 46. Empty <alt> text<img src="/twitpocalypse.png" alt=" "> 46
  • 47. Helpful <alt> text "Twitpocalypse is upon us!" <img src="/twitpocalypse.png"alt="Twitpocalypse is upon us!"> 47
  • 48. Types of Disabilities Four classes, each with different needs 48
  • 49. Types of disabilities• Visual • Blind • Low vision • Color blind• Hearing• Mobility• Cognitive and Learning Disabilities 49
  • 50. Color DeficitsDon’t rely on color to express information 50
  • 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. 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. 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. 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. Audio & VideoWhat a hearing disabled user may experience 55
  • 56. Video without text 56
  • 57. Audio & Video What a hearing disabled user &(Search Engine) robot may experience 57
  • 58. Video without text 58
  • 59. Subtitles & transcript 59
  • 60. Prada S.p.A.Case study: style over substance 60
  • 61. Prada home page 61
  • 62. English home page 62
  • 63. Links spawn videos 63
  • 64. …lots of videos 64
  • 65. Store finder 65
  • 66. Home page 66
  • 67. Home page SEO view 67
  • 68. Prada Online Store Sighted user experience 68
  • 69. Store home page 69
  • 70. Product list page 70
  • 71. Product detail page 71
  • 72. Secure checkout 72
  • 73. Prada Online StoreSearch Engine & sight-impaired user experience 73
  • 74. Site listing 74
  • 75. Online store 75
  • 76. Secure checkout 76
  • 77. Levi Strauss & Co. Case study: hard working website 77
  • 78. Site listing 78
  • 79. Levis home page 79
  • 80. Product list page 80
  • 81. Product detail page 81
  • 82. Product detail page 82
  • 83. Product detail page 83
  • 84. It Doesn’t End HereThere are many Usability pitfalls out there. 84
  • 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. 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. David MintonManaging Partner @DesignHammer @DH_David www.designhammer.com 87