: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
        Ethnog...
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 ...
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 fam...
Petra is deaf
                  General surfing and
                .
                  online shopping.
                 ...
Paul…
        Male 20 – 29
        Uni Student Studying
        journalism
        Experienced web
        user spends in ...
Paul is blind
                Mail lists and chat, as
                well as researching
                things for uni a...
“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 i...
General

         1.1 Provide a text equivalent for every non-text element.
C
         2.1 Ensure that all information con...
General

         1.1 Provide a text equivalent for every non-text element.
C
         2.1 Ensure that all information con...
General

         1.1 Provide a text equivalent for every non-text element.
C
         2.1 Ensure that all information con...
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 i...
General

         1.1 Provide a text equivalent for every non-text element.
C
         2.1 Ensure that all information con...
Content
General        1.1 Provide a text equivalent for every non-text element.

               4.1 Clearly identify chan...
IA
General       6.1 Organize documents so they may be read without style sheets.


hmmm.....

              Design
Genera...
Scripting
General     6.2 Ensure that equivalents for dynamic content are updated when the dynamic
            content cha...
Front End
General         4.1 Clearly identify changes in the natural language of a document's text and any text
         ...
I might be a mini-geek…
 Content and Front End work together a lot
 Everyone works together except IA and Script

Role    ...
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 tes...
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 ...
Usability: More than Skin Deep
Usability: More than Skin Deep
Usability: More than Skin Deep
Usability: More than Skin Deep
Usability: More than Skin Deep
Usability: More than Skin Deep
Usability: More than Skin Deep
Upcoming SlideShare
Loading in...5
×

Usability: More than Skin Deep

16,791

Published on

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.

Published in: Technology, Design
2 Comments
74 Likes
Statistics
Notes
No Downloads
Views
Total Views
16,791
On Slideshare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
657
Comments
2
Likes
74
Embeds 0
No embeds

No notes for slide

Usability: More than Skin Deep

  1. 1. :More than Skin Deep Lisa Herrod Web Directions South, 2007
  2. 2. :More than Skin Deep Lisa Herrod Web Directions South, 2007
  3. 3. User Interface Design Information Architect Interaction design User Researcher User Testing Ethnographer Eye Tracking
  4. 4. incomplete and unbalanced
  5. 5. it’s what’s on the inside that counts…
  6. 6. consider the code
  7. 7. Original presentation image: http://flickr.com/photos/12177584@N05/1244504642/
  8. 8. Auslan: ‘shopping’
  9. 9. more than skin deep
  10. 10. Shallow personas
  11. 11. David Wallace, works on the web
  12. 12. Selective User Experience Design True User Experience Design
  13. 13. True User Experience Design User Profiles are inclusive not exclusive Accessible design from the outset Accessibility is integral
  14. 14. Accessible Design Usability > Accessibility Compliance != Usability Holistic approach User testing
  15. 15. User Centered Design User Focused Development
  16. 16. Elements of User Centered Design
  17. 17. users with disabilities are a primary user group
  18. 18. expertise is essential
  19. 19. Interview real users who use Assistive Technologies
  20. 20. there’s more than blindness
  21. 21. Elements of User Focused Development
  22. 22. UFD ==UCD
  23. 23. it’s not just about the code (it’ about the peeps)
  24. 24. role specific checklists
  25. 25. Collaborate & Refine
  26. 26. Six Steps to Recovery
  27. 27. Six Simple Steps 1 Define Primary User Group 2 Site Build 3 Code Review
  28. 28. Six Simple Steps 4 User Testing 5 Rework Code 6 Final Compliance Review
  29. 29. 1 Define Primary User Group
  30. 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. 31. Petra is deaf General surfing and . online shopping. Purchasing travel and movie tickets. Basic literacy in English Auslan is her primary language
  32. 32. Paul… Male 20 – 29 Uni Student Studying journalism Experienced web user spends in excess of 60 hours a week online
  33. 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. 34. “These user experiences enrich our sites”
  35. 35. 2 Site Build All roles are involved Create a check list for each role Research, design, build
  36. 36. The Checklist
  37. 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. 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. 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. 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. 41. let me entertain you…
  42. 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. 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. 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. 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. 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. 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. 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. 49. 3 Code Review Semantics, standards & validation Accessibility Review Automated Manual Informal user-testing
  50. 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. 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. 52. 5 Rework Code design build test refine
  53. 53. 6 Final Compliance Review 1. Code review 2. Accessibility Compliance review Automated and Manual 3. Informal user testing 4. Final edits
  54. 54. Benefits
  55. 55. higher quality site
  56. 56. all primary users are considered
  57. 57. Accessibility becomes integral to the Design Process
  58. 58. Specialist Skills are Valued
  59. 59. Going Forward
  60. 60. web usability depends on accessibility
  61. 61. compliance checks are not enough
  62. 62. Specialist Skills are essential
  63. 63. True User Experience Design is achieved
  64. 64. Questions….
  65. 65. scenariogirl.com scenarioseven.com.au iworkontheweb.com
  66. 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

×