Usability: More than Skin Deep

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

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

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

http://www.webdirections.org	313
http://www.sitepoint.com	251
http://scenariogirl.com	118
http://www.mycatalyze.org	36
http://www.slideshare.net	31
http://www.felgner.ch	29
http://westopia.blogspot.com	9
http://cafemorrison.blogspot.com	6
http://www.scenariogirl.com	5
http://all-for-women.com	3
http://mycatalyze.org	2
http://www.netvibes.com	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://cafemorrison.blogspot.com.ar	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://www.linkedin.com	1

Usability: More than Skin Deep

by LisaHerrod

Accessibility

Categories

Upload Details

Usage Rights

25 Embeds 819

Statistics