• Save
Usability: More than Skin Deep
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Usability: More than Skin Deep

on

  • 21,078 views

Web Usability is far more complex than User Testing and Interaction Design alone. And while interface design is an important consideration, there’s more to a usable site than what’s on the ...

Web Usability is far more complex than User Testing and Interaction Design alone. And while interface design is an important consideration, there’s more to a usable site than what’s on the surface.
We all know the importance of accessibility and web standards, so let’s take that knowledge one step further and into the realm of usability. In this slide show Lisa Herrod will redefine the common definition of usability by introducing a greater focus on accessibility and web standards. By taking a more holistic approach you will soon see why usability is more than skin deep.

Statistics

Views

Total Views
21,078
Views on SlideShare
20,232
Embed Views
846

Actions

Likes
74
Downloads
657
Comments
2

26 Embeds 846

http://www.webdirections.org 332
http://www.sitepoint.com 251
http://scenariogirl.com 118
http://www.mycatalyze.org 36
http://www.felgner.ch 33
http://www.slideshare.net 31
http://westopia.blogspot.com 9
http://cafemorrison.blogspot.com 7
http://www.scenariogirl.com 5
http://all-for-women.com 3
http://www.netvibes.com 2
http://mycatalyze.org 2
http://www.linkedin.com 2
http://cafemorrison.blogspot.com.ar 2
http://www.cms.rk.edu.pl 2
https://mercy.blackboard.com 1
http://dist-ed.waketech.edu 1
http://cafemorrison.blogspot.in 1
http://www.slideshow.com 1
http://203.208.35.101 1
http://www.zhuaxia.com 1
http://lesaperosdujeudi.com 1
http://westciv.com 1
file:// 1
http://rss.sitepoint.com 1
http://thierrydec 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Usability: More than Skin Deep Presentation Transcript

  • 1. :More than Skin Deep Lisa Herrod Web Directions South, 2007
  • 2. :More than Skin Deep Lisa Herrod Web Directions South, 2007
  • 3. User Interface Design Information Architect Interaction design User Researcher User Testing Ethnographer Eye Tracking
  • 4. incomplete and unbalanced
  • 5. it’s what’s on the inside that counts…
  • 6. consider the code
  • 7. Original presentation image: http://flickr.com/photos/12177584@N05/1244504642/
  • 8. Auslan: ‘shopping’
  • 9. more than skin deep
  • 10. Shallow personas
  • 11. David Wallace, works on the web
  • 12. Selective User Experience Design True User Experience Design
  • 13. True User Experience Design User Profiles are inclusive not exclusive Accessible design from the outset Accessibility is integral
  • 14. Accessible Design Usability > Accessibility Compliance != Usability Holistic approach User testing
  • 15. User Centered Design User Focused Development
  • 16. Elements of User Centered Design
  • 17. users with disabilities are a primary user group
  • 18. expertise is essential
  • 19. Interview real users who use Assistive Technologies
  • 20. there’s more than blindness
  • 21. Elements of User Focused Development
  • 22. UFD ==UCD
  • 23. it’s not just about the code (it’ about the peeps)
  • 24. role specific checklists
  • 25. Collaborate & Refine
  • 26. Six Steps to Recovery
  • 27. Six Simple Steps 1 Define Primary User Group 2 Site Build 3 Code Review
  • 28. Six Simple Steps 4 User Testing 5 Rework Code 6 Final Compliance Review
  • 29. 1 Define Primary User Group
  • 30. Petra… Female 30 – 39. . University Degree Two young children 65k family income Semi-experienced web user spends about 2 hours a day online. Flickr, IM, email.
  • 31. Petra is deaf General surfing and . online shopping. Purchasing travel and movie tickets. Basic literacy in English Auslan is her primary language
  • 32. Paul… Male 20 – 29 Uni Student Studying journalism Experienced web user spends in excess of 60 hours a week online
  • 33. Paul is blind Mail lists and chat, as well as researching things for uni and personal interest Has his own blog Uses Window Eyes with voice output and a Pacmate: PDA with Braille display.
  • 34. “These user experiences enrich our sites”
  • 35. 2 Site Build All roles are involved Create a check list for each role Research, design, build
  • 36. The Checklist
  • 37. General 1.1 Provide a text equivalent for every non-text element. 2.1 Ensure that all information conveyed with colour is also available without colour, for example from context or markup. 6.1 Organize documents so they may be read without style sheets. 6.2 Ensure that equivalents for dynamic content are updated when the dynamic content changes. Images and image maps 1.2 Provide redundant text links for each active region of a server-side image map. Data tables 5.1 For data tables, identify row and column headers. Frames 12.1 Title each frame to facilitate frame identification and navigation. Applets and scripts 6.3 Ensure that pages are usable when scripts, applets etc are turned off or not supported. If this is not possible, provide equivalent information on an alternative accessible page. Multimedia 1.3 Until user agents can automatically read aloud the text equivalent of a visual track, provide an audio description of the important visual information of a multimedia presentation. 1.4 For any time-based multimedia presentation (e.g., a movie or animation), synchronize equivalent alternatives (e.g., captions or auditory descriptions of the visual track) with the presentation. And if all else fails 11.4 If you cannot create an accessible page, provide a link to an alternative page that is accessible, has equivalent information (or functionality), and is updated as often as the inaccessible page.
  • 38. General 1.1 Provide a text equivalent for every non-text element. C 2.1 Ensure that all information conveyed with colour is also available without colour, for example from context or markup. D 6.1 Organize documents so they may be read without style sheets. C IA F 6.2 Ensure that equivalents for dynamic content are updated when the dynamic content changes. CDFS Images and image maps 1.2 Provide redundant text links for each active region of a server-side image map. F Data tables 5.1 For data tables, identify row and column headers. F Frames 12.1 Title each frame to facilitate frame identification and navigation. F Applets and scripts 6.3 Ensure that pages are usable when scripts, applets etc are turned off or not supported. If this is not possible, provide equivalent information on an DFS alternative accessible page. Multimedia 1.3 Until user agents can automatically read aloud the text equivalent of a visual track, provide an audio description of the important visual information of a C multimedia presentation. 1.4 For any time-based multimedia presentation (e.g., a movie or animation), synchronize equivalent alternatives (e.g., captions or auditory descriptions of CDMF the visual track) with the presentation. And if all else fails 11.4 If you cannot create an accessible page, provide a link to an alternative page that is accessible, has equivalent information (or functionality), and is CF updated as often as the inaccessible page.
  • 39. General 1.1 Provide a text equivalent for every non-text element. C 2.1 Ensure that all information conveyed with colour is also available without colour, for example from context or markup. D 6.1 Organize documents so they may be read without style sheets. C IA F 6.2 Ensure that equivalents for dynamic content are updated when the dynamic content changes. CDFS Images and image maps 1.2 Provide redundant text links for each active region of a server-side image map. F Data tables 5.1 For data tables, identify row and column headers. F Frames 12.1 Title each frame to facilitate frame identification and navigation. F Applets and scripts 6.3 Ensure that pages are usable when scripts, applets etc are turned off or not supported. If this is not possible, provide equivalent information on an DFS alternative accessible page. Multimedia 1.3 Until user agents can automatically read aloud the text equivalent of a visual track, provide an audio description of the important visual information of a C multimedia presentation. 1.4 For any time-based multimedia presentation (e.g., a movie or animation), synchronize equivalent alternatives (e.g., captions or auditory descriptions of CDMF the visual track) with the presentation. And if all else fails 11.4 If you cannot create an accessible page, provide a link to an alternative page that is accessible, has equivalent information (or functionality), and is CF updated as often as the inaccessible page.
  • 40. General 1.1 Provide a text equivalent for every non-text element. C 2.1 Ensure that all information conveyed with colour is also available without colour, for example from context or markup. D 6.1 Organize documents so they may be read without style sheets. C IA F 6.2 Ensure that equivalents for dynamic content are updated when the dynamic content changes. CDFS Images and image maps 1.2 Provide redundant text links for each active region of a server-side image map. F Data tables 5.1 For data tables, identify row and column headers. F Frames 12.1 Title each frame to facilitate frame identification and navigation. F Applets and scripts 6.3 Ensure that pages are usable when scripts, applets etc are turned off or not supported. If this is not possible, provide equivalent information on an DFS alternative accessible page. Multimedia 1.3 Until user agents can automatically read aloud the text equivalent of a visual track, provide an audio description of the important visual information of a C multimedia presentation. 1.4 For any time-based multimedia presentation (e.g., a movie or animation), synchronize equivalent alternatives (e.g., captions or auditory descriptions of CDMF the visual track) with the presentation. And if all else fails 11.4 If you cannot create an accessible page, provide a link to an alternative page that is accessible, has equivalent information (or functionality), and is CF updated as often as the inaccessible page.
  • 41. let me entertain you…
  • 42. General 1.1 Provide a text equivalent for every non-text element. 2.1 Ensure that all information conveyed with colour is also available without colour, for example from context or markup. 6.1 Organize documents so they may be read without style sheets. 6.2 Ensure that equivalents for dynamic content are updated when the dynamic content changes. Images and image maps 1.2 Provide redundant text links for each active region of a server-side image map. Data tables 5.1 For data tables, identify row and column headers. Frames 12.1 Title each frame to facilitate frame identification and navigation. Applets and scripts 6.3 Ensure that pages are usable when scripts, applets etc are turned off or not supported. If this is not possible, provide equivalent information on an alternative accessible page. Multimedia 1.3 Until user agents can automatically read aloud the text equivalent of a visual track, provide an audio description of the important visual information of a multimedia presentation. 1.4 For any time-based multimedia presentation (e.g., a movie or animation), synchronize equivalent alternatives (e.g., captions or auditory descriptions of the visual track) with the presentation. And if all else fails 11.4 If you cannot create an accessible page, provide a link to an alternative page that is accessible, has equivalent information (or functionality), and is updated as often as the inaccessible page.
  • 43. General 1.1 Provide a text equivalent for every non-text element. C 2.1 Ensure that all information conveyed with colour is also available without colour, for example from context or markup. D 6.1 Organize documents so they may be read without style sheets. C IA F 6.2 Ensure that equivalents for dynamic content are updated when the dynamic content changes. CDFS Images and image maps 1.2 Provide redundant text links for each active region of a server-side image map. F Data tables 5.1 For data tables, identify row and column headers. F Frames 12.1 Title each frame to facilitate frame identification and navigation. F Applets and scripts 6.3 Ensure that pages are usable when scripts, applets etc are turned off or not supported. If this is not possible, provide equivalent information on an DFS alternative accessible page. Multimedia 1.3 Until user agents can automatically read aloud the text equivalent of a visual track, provide an audio description of the important visual information of a C multimedia presentation. 1.4 For any time-based multimedia presentation (e.g., a movie or animation), synchronize equivalent alternatives (e.g., captions or auditory descriptions of CDMF the visual track) with the presentation. And if all else fails 11.4 If you cannot create an accessible page, provide a link to an alternative page that is accessible, has equivalent information (or functionality), and is CF updated as often as the inaccessible page.
  • 44. Content General 1.1 Provide a text equivalent for every non-text element. 4.1 Clearly identify changes in the natural language of a document's text and any text equivalents (e.g., captions). 6.1 Organize documents so they may be read without style sheets. 6.2 Ensure that equivalents for dynamic content are updated when the dynamic content changes. 14.1 Use the clearest and simplest language appropriate for a site's content. Multimedia 1.3 Until user agents can automatically read aloud the text equivalent of a visual track, provide an audio description of the important visual information of a multimedia presentation. 1.4 For any time-based multimedia presentation (e.g., a movie or animation), synchronize equivalent alternatives (e.g., captions or auditory descriptions of the visual track) with the presentation. And if all else 11.4 If you cannot create an accessible page, provide a link to an alternative fails page that is accessible, has equivalent information (or functionality), and is updated as often as the inaccessible page. 8 Priority 1 Checkpoints
  • 45. IA General 6.1 Organize documents so they may be read without style sheets. hmmm..... Design General 2.1 Ensure that all information conveyed with colour is also available without colour, for example from context or markup. 6.2 Ensure that equivalents for dynamic content are updated when the dynamic content changes. 7.1 Until user agents allow users to control flickering, avoid causing the screen to flicker. Applets and 6.3 Ensure that pages are usable when scripts, applets etc are turned off or not scripts supported. If this is not possible, provide equivalent information on an alternative accessible page. Multimedia 1.4 For any time-based multimedia presentation (e.g., a movie or animation), synchronize equivalent alternatives (e.g., captions or auditory descriptions of the visual track) with the presentation. 5 Priority 1 Checkpoints
  • 46. Scripting General 6.2 Ensure that equivalents for dynamic content are updated when the dynamic content changes. Applets and 6.3 Ensure that pages are usable when scripts, applets etc are turned off or not scripts supported. If this is not possible, provide equivalent information on an alternative accessible page. 2 Priority 1 Checkpoints
  • 47. Front End General 4.1 Clearly identify changes in the natural language of a document's text and any text equivalents (e.g., captions). 6.1 Organize documents so they may be read without style sheets. 12 / 16 6.2 Ensure that equivalents for dynamic content are updated when the dynamic content changes. 7.1 Until user agents allow users to control flickering, avoid causing the screen to flicker. Images and 1.2 Provide redundant text links for each active region of a server-side image map. image maps 9.1 Provide client-side image maps instead of server-side image maps except where the regions cannot be defined available shapes. Data tables 5.1 For data tables, identify row and column headers 5.2 For data tables with two or more logical levels of row or column headers, use markup to associate data cells and header cells. Frames 12.1 Title each frame to facilitate frame identification and navigation. Applets and 6.3 Ensure that pages are usable when scripts, applets etc are turned off or not scripts supported. If this is not possible, provide equivalent information on an alternative accessible page. Multimedia 1.4 For any time-based multimedia presentation (e.g., a movie or animation), synchronize equivalent alternatives (e.g., captions or auditory descriptions of the visual track) with the presentation. If all else fails 11.4 If you cannot create an accessible page, provide a link to an alternative…
  • 48. I might be a mini-geek… Content and Front End work together a lot Everyone works together except IA and Script Role Checkpoints 1 & 2 IA 5 Script 10 Design 13 Content 15 Front End 35
  • 49. 3 Code Review Semantics, standards & validation Accessibility Review Automated Manual Informal user-testing
  • 50. 4 User Testing Run AUP as a separate group 1 to 1 Task-based Allow time to familiarise User-defined tasks Additional time
  • 51. 4 User Testing Run AUP as a separate group 1 to 1 Task-based Allow time to familiarise User-defined tasks Additional time
  • 52. 5 Rework Code design build test refine
  • 53. 6 Final Compliance Review 1. Code review 2. Accessibility Compliance review Automated and Manual 3. Informal user testing 4. Final edits
  • 54. Benefits
  • 55. higher quality site
  • 56. all primary users are considered
  • 57. Accessibility becomes integral to the Design Process
  • 58. Specialist Skills are Valued
  • 59. Going Forward
  • 60. web usability depends on accessibility
  • 61. compliance checks are not enough
  • 62. Specialist Skills are essential
  • 63. True User Experience Design is achieved
  • 64. Questions….
  • 65. scenariogirl.com scenarioseven.com.au iworkontheweb.com
  • 66. Photo Credits Tuxedo http://flickr.com/photos/patrick_q/384905514/ 7 http://flickr.com/photos/urbanmkr/475810169/ Signing ‘shop’ http://flickr.com/photos/lisaherrod/375406486/ I Love Mac http://flickr.com/photos/broccolini/1529939373/ Eye Charts in 4 Languages http://flickr.com/photos/wengs/159621776/ I toast every kind of freedom there is http://flickr.com/photos/earlg/548355186