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.

1. :More than Skin Deep
Lisa Herrod
Web Directions South, 2007

4. :More than Skin Deep
Lisa Herrod
Web Directions South, 2007

5. User Interface Design
Information Architect
Interaction design
User Researcher
User Testing
Ethnographer
Eye Tracking

6. incomplete and unbalanced

8. it’s what’s on the inside that counts…

9. consider the code

11. Original presentation image: http://flickr.com/photos/12177584@N05/1244504642/

12. Auslan: ‘shopping’

13. more than skin deep

14. Shallow
personas

15. David Wallace, works on the web

16. Selective User Experience Design
True User Experience Design

17. True User Experience Design
User Profiles are inclusive not exclusive
Accessible design from the outset
Accessibility is integral

18. Accessible Design
Usability > Accessibility
Compliance != Usability
Holistic approach
User testing

21. User Centered Design
User Focused Development

22. Elements of
User Centered Design

23. users with disabilities are a
primary user group

24. expertise is essential

25. Interview real users
who use
Assistive Technologies

26. there’s more than blindness

27. Elements of
User Focused Development

28. UFD ==UCD

29. it’s not just about the code
(it’ about the peeps)

30. role specific checklists

31. Collaborate & Refine

32. Six Steps to Recovery

33. Six Simple Steps
1 Define Primary User Group
2 Site Build
3 Code Review

34. Six Simple Steps
4 User Testing
5 Rework Code
6 Final Compliance Review

35. 1 Define Primary User Group

36. 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.

37. Petra is deaf
General surfing and
.
online shopping.
Purchasing travel
and movie tickets.
Basic literacy in
English
Auslan is her primary
language

38. Paul…
Male 20 – 29
Uni Student Studying
journalism
Experienced web
user spends in excess
of 60 hours a week
online

39. 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.

40. “These user experiences
enrich our sites”

41. 2 Site Build
All roles are involved
Create a check list for each role
Research, design, build

42. The Checklist

43. 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.

44. 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.

45. 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.

46. 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.

47. let me entertain you…

48. 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.

49. 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.

50. 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

51. 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

52. 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

53. 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…

54. 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

55. 3 Code Review
Semantics, standards & validation
Accessibility Review
Automated
Manual
Informal user-testing

56. 4 User Testing
Run AUP as a separate group
1 to 1
Task-based
Allow time to familiarise
User-defined tasks
Additional time

58. 4 User Testing
Run AUP as a separate group
1 to 1
Task-based
Allow time to familiarise
User-defined tasks
Additional time

59. 5 Rework Code
design build test refine

60. 6 Final Compliance Review
1. Code review
2. Accessibility Compliance review
Automated and Manual
3. Informal user testing
4. Final edits

61. Benefits

62. higher quality site

63. all primary users are considered

64. Accessibility becomes integral
to the Design Process

65. Specialist Skills are Valued

66. Going Forward

67. web usability
depends on accessibility

68. compliance checks
are not enough

69. Specialist Skills
are essential

70. True User Experience Design
is achieved

71. Questions….

72. scenariogirl.com
scenarioseven.com.au
iworkontheweb.com

73. 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