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

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

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

incomplete and unbalanced

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

consider the code

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

Auslan: ‘shopping’

more than skin deep

Shallow
personas

David Wallace, works on the web

Selective User Experience Design
True User Experience Design

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

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

User Centered Design
User Focused Development

Elements of
User Centered Design

users with disabilities are a
primary user group

expertise is essential

Interview real users
who use
Assistive Technologies

there’s more than blindness

Elements of
User Focused Development

UFD ==UCD

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

role specific checklists

Collaborate & Refine

Six Steps to Recovery

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

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

1 Define Primary User Group

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.

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

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

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.

“These user experiences
enrich our sites”

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

The Checklist

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.

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.

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.

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.

let me entertain you…

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.

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.

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

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

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

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…

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

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

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

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

5 Rework Code
design build test refine

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

Benefits

higher quality site

all primary users are considered

Accessibility becomes integral
to the Design Process

Specialist Skills are Valued

Going Forward

web usability
depends on accessibility

compliance checks
are not enough

Specialist Skills
are essential

True User Experience Design
is achieved

Questions….

scenariogirl.com
scenarioseven.com.au
iworkontheweb.com

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