SlideShare a Scribd company logo
:More than Skin Deep

Lisa Herrod
Web Directions South, 2007
Usability: More than Skin Deep
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
Usability: More than Skin Deep
it’s what’s on the inside that counts…
consider the code
Usability: More than Skin Deep
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
Usability: More than Skin Deep
Usability: More than Skin Deep
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
Usability: More than Skin Deep
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

More Related Content

Similar to Usability: More than Skin Deep

flyers_infographics.pdf
flyers_infographics.pdfflyers_infographics.pdf
flyers_infographics.pdf
SukhdevPanwar1
 
Intro to web_design_notes jalen
Intro to web_design_notes  jalenIntro to web_design_notes  jalen
Intro to web_design_notes jalen
jalenclark5
 
Using Audio Podcasts To Enhance Learning
Using Audio Podcasts To Enhance LearningUsing Audio Podcasts To Enhance Learning
Using Audio Podcasts To Enhance Learning
janreyes
 
Website design2
Website design2Website design2
Website design2
robclarkson
 
Cpaa
CpaaCpaa
Cpaa
cpsedtech
 
Jan 8 2014 NISO Webinar: Device to Device: Adaptive Interfaces for Content
Jan 8 2014 NISO Webinar: Device to Device: Adaptive Interfaces for ContentJan 8 2014 NISO Webinar: Device to Device: Adaptive Interfaces for Content
Jan 8 2014 NISO Webinar: Device to Device: Adaptive Interfaces for Content
National Information Standards Organization (NISO)
 
My+Magic
My+MagicMy+Magic
My+Magic
Tianwei_liu
 
Maintenance of Dynamically vs. Statically typed Languages
Maintenance of Dynamically vs. Statically typed LanguagesMaintenance of Dynamically vs. Statically typed Languages
Maintenance of Dynamically vs. Statically typed Languages
Amin Bandeali
 
Web Accessibility
Web AccessibilityWeb Accessibility
Web Accessibility
Sana Ullah
 
jhtp5_01
jhtp5_01jhtp5_01
lesson 4 literature.pdf
lesson 4 literature.pdflesson 4 literature.pdf
lesson 4 literature.pdf
MelodyGraceDacuba
 
Software Accessibility Siddhesh
Software Accessibility SiddheshSoftware Accessibility Siddhesh
Software Accessibility Siddhesh
Siddhesh Bhobe
 
Seth Duffy Accessibility97035
Seth Duffy   Accessibility97035Seth Duffy   Accessibility97035
Seth Duffy Accessibility97035
FNian
 
text media and information language.pptx
text media and information language.pptxtext media and information language.pptx
text media and information language.pptx
Catalino Yanos Jr.
 
Creating Accessible Information
Creating Accessible InformationCreating Accessible Information
Creating Accessible Information
Mags_McKay
 
Ria User Group Accessibility
Ria User Group Accessibility Ria User Group Accessibility
Ria User Group Accessibility
Skills Matter
 
Advanced_programming_language_design.pdf
Advanced_programming_language_design.pdfAdvanced_programming_language_design.pdf
Advanced_programming_language_design.pdf
RodulfoGabrito
 
SimpleK12 Webinar - GoodReader 092011
SimpleK12 Webinar - GoodReader 092011SimpleK12 Webinar - GoodReader 092011
SimpleK12 Webinar - GoodReader 092011
Christopher Casal
 
pdfslide.net_media-and-information-literacy-mil-text-information-and-media-pa...
pdfslide.net_media-and-information-literacy-mil-text-information-and-media-pa...pdfslide.net_media-and-information-literacy-mil-text-information-and-media-pa...
pdfslide.net_media-and-information-literacy-mil-text-information-and-media-pa...
JonafeSalinas2
 
Media and Information Literacy (MIL) - Text Information and Media (Part 1)
Media and Information Literacy (MIL) - Text Information and Media (Part 1)Media and Information Literacy (MIL) - Text Information and Media (Part 1)
Media and Information Literacy (MIL) - Text Information and Media (Part 1)
Arniel Ping
 

Similar to Usability: More than Skin Deep (20)

flyers_infographics.pdf
flyers_infographics.pdfflyers_infographics.pdf
flyers_infographics.pdf
 
Intro to web_design_notes jalen
Intro to web_design_notes  jalenIntro to web_design_notes  jalen
Intro to web_design_notes jalen
 
Using Audio Podcasts To Enhance Learning
Using Audio Podcasts To Enhance LearningUsing Audio Podcasts To Enhance Learning
Using Audio Podcasts To Enhance Learning
 
Website design2
Website design2Website design2
Website design2
 
Cpaa
CpaaCpaa
Cpaa
 
Jan 8 2014 NISO Webinar: Device to Device: Adaptive Interfaces for Content
Jan 8 2014 NISO Webinar: Device to Device: Adaptive Interfaces for ContentJan 8 2014 NISO Webinar: Device to Device: Adaptive Interfaces for Content
Jan 8 2014 NISO Webinar: Device to Device: Adaptive Interfaces for Content
 
My+Magic
My+MagicMy+Magic
My+Magic
 
Maintenance of Dynamically vs. Statically typed Languages
Maintenance of Dynamically vs. Statically typed LanguagesMaintenance of Dynamically vs. Statically typed Languages
Maintenance of Dynamically vs. Statically typed Languages
 
Web Accessibility
Web AccessibilityWeb Accessibility
Web Accessibility
 
jhtp5_01
jhtp5_01jhtp5_01
jhtp5_01
 
lesson 4 literature.pdf
lesson 4 literature.pdflesson 4 literature.pdf
lesson 4 literature.pdf
 
Software Accessibility Siddhesh
Software Accessibility SiddheshSoftware Accessibility Siddhesh
Software Accessibility Siddhesh
 
Seth Duffy Accessibility97035
Seth Duffy   Accessibility97035Seth Duffy   Accessibility97035
Seth Duffy Accessibility97035
 
text media and information language.pptx
text media and information language.pptxtext media and information language.pptx
text media and information language.pptx
 
Creating Accessible Information
Creating Accessible InformationCreating Accessible Information
Creating Accessible Information
 
Ria User Group Accessibility
Ria User Group Accessibility Ria User Group Accessibility
Ria User Group Accessibility
 
Advanced_programming_language_design.pdf
Advanced_programming_language_design.pdfAdvanced_programming_language_design.pdf
Advanced_programming_language_design.pdf
 
SimpleK12 Webinar - GoodReader 092011
SimpleK12 Webinar - GoodReader 092011SimpleK12 Webinar - GoodReader 092011
SimpleK12 Webinar - GoodReader 092011
 
pdfslide.net_media-and-information-literacy-mil-text-information-and-media-pa...
pdfslide.net_media-and-information-literacy-mil-text-information-and-media-pa...pdfslide.net_media-and-information-literacy-mil-text-information-and-media-pa...
pdfslide.net_media-and-information-literacy-mil-text-information-and-media-pa...
 
Media and Information Literacy (MIL) - Text Information and Media (Part 1)
Media and Information Literacy (MIL) - Text Information and Media (Part 1)Media and Information Literacy (MIL) - Text Information and Media (Part 1)
Media and Information Literacy (MIL) - Text Information and Media (Part 1)
 

More from Lisa Herrod

A11yCamp2015_Agile Accessibility
A11yCamp2015_Agile AccessibilityA11yCamp2015_Agile Accessibility
A11yCamp2015_Agile Accessibility
Lisa Herrod
 
The Age of Awareness
The Age of AwarenessThe Age of Awareness
The Age of Awareness
Lisa Herrod
 
Lean Usability for startups
Lean Usability for startupsLean Usability for startups
Lean Usability for startups
Lisa Herrod
 
Designing for Diversity
Designing for DiversityDesigning for Diversity
Designing for Diversity
Lisa Herrod
 
Deafness and the User Experience
Deafness and the User ExperienceDeafness and the User Experience
Deafness and the User Experience
Lisa Herrod
 
User Testing For The Rest Of Us
User Testing For The Rest Of UsUser Testing For The Rest Of Us
User Testing For The Rest Of Us
Lisa Herrod
 
Supporting the Individual in Collaborative Content
Supporting the Individual in Collaborative Content Supporting the Individual in Collaborative Content
Supporting the Individual in Collaborative Content
Lisa Herrod
 
Better Content by Design
Better Content by Design Better Content by Design
Better Content by Design
Lisa Herrod
 
Usability in a Multidisciplinary Team
Usability in a Multidisciplinary TeamUsability in a Multidisciplinary Team
Usability in a Multidisciplinary Team
Lisa Herrod
 
WE05 Eye Tracking the User Experience
WE05 Eye Tracking the User ExperienceWE05 Eye Tracking the User Experience
WE05 Eye Tracking the User Experience
Lisa Herrod
 

More from Lisa Herrod (10)

A11yCamp2015_Agile Accessibility
A11yCamp2015_Agile AccessibilityA11yCamp2015_Agile Accessibility
A11yCamp2015_Agile Accessibility
 
The Age of Awareness
The Age of AwarenessThe Age of Awareness
The Age of Awareness
 
Lean Usability for startups
Lean Usability for startupsLean Usability for startups
Lean Usability for startups
 
Designing for Diversity
Designing for DiversityDesigning for Diversity
Designing for Diversity
 
Deafness and the User Experience
Deafness and the User ExperienceDeafness and the User Experience
Deafness and the User Experience
 
User Testing For The Rest Of Us
User Testing For The Rest Of UsUser Testing For The Rest Of Us
User Testing For The Rest Of Us
 
Supporting the Individual in Collaborative Content
Supporting the Individual in Collaborative Content Supporting the Individual in Collaborative Content
Supporting the Individual in Collaborative Content
 
Better Content by Design
Better Content by Design Better Content by Design
Better Content by Design
 
Usability in a Multidisciplinary Team
Usability in a Multidisciplinary TeamUsability in a Multidisciplinary Team
Usability in a Multidisciplinary Team
 
WE05 Eye Tracking the User Experience
WE05 Eye Tracking the User ExperienceWE05 Eye Tracking the User Experience
WE05 Eye Tracking the User Experience
 

Recently uploaded

Opencast Summit 2024 — Opencast @ University of Münster
Opencast Summit 2024 — Opencast @ University of MünsterOpencast Summit 2024 — Opencast @ University of Münster
Opencast Summit 2024 — Opencast @ University of Münster
Matthias Neugebauer
 
Data Integration Basics: Merging & Joining Data
Data Integration Basics: Merging & Joining DataData Integration Basics: Merging & Joining Data
Data Integration Basics: Merging & Joining Data
Safe Software
 
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-InTrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc
 
High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...
High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...
High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...
bhumivarma35300
 
Tirana Tech Meetup - Agentic RAG with Milvus, Llama3 and Ollama
Tirana Tech Meetup - Agentic RAG with Milvus, Llama3 and OllamaTirana Tech Meetup - Agentic RAG with Milvus, Llama3 and Ollama
Tirana Tech Meetup - Agentic RAG with Milvus, Llama3 and Ollama
Zilliz
 
Girls Call Churchgate 9910780858 Provide Best And Top Girl Service And No1 in...
Girls Call Churchgate 9910780858 Provide Best And Top Girl Service And No1 in...Girls Call Churchgate 9910780858 Provide Best And Top Girl Service And No1 in...
Girls Call Churchgate 9910780858 Provide Best And Top Girl Service And No1 in...
maigasapphire
 
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
alexjohnson7307
 
How to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptxHow to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptx
Adam Dunkels
 
The Role of IoT in Australian Mobile App Development - PDF Guide
The Role of IoT in Australian Mobile App Development - PDF GuideThe Role of IoT in Australian Mobile App Development - PDF Guide
The Role of IoT in Australian Mobile App Development - PDF Guide
Shiv Technolabs
 
The Rise of AI in Cybersecurity How Machine Learning Will Shape Threat Detect...
The Rise of AI in Cybersecurity How Machine Learning Will Shape Threat Detect...The Rise of AI in Cybersecurity How Machine Learning Will Shape Threat Detect...
The Rise of AI in Cybersecurity How Machine Learning Will Shape Threat Detect...
digitalxplive
 
BLOCKCHAIN TECHNOLOGY - Advantages and Disadvantages
BLOCKCHAIN TECHNOLOGY - Advantages and DisadvantagesBLOCKCHAIN TECHNOLOGY - Advantages and Disadvantages
BLOCKCHAIN TECHNOLOGY - Advantages and Disadvantages
SAI KAILASH R
 
Dublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptx
Dublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptxDublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptx
Dublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptx
Kunal Gupta
 
Types of Weaving loom machine & it's technology
Types of Weaving loom machine & it's technologyTypes of Weaving loom machine & it's technology
Types of Weaving loom machine & it's technology
ldtexsolbl
 
“Deploying Large Language Models on a Raspberry Pi,” a Presentation from Usef...
“Deploying Large Language Models on a Raspberry Pi,” a Presentation from Usef...“Deploying Large Language Models on a Raspberry Pi,” a Presentation from Usef...
“Deploying Large Language Models on a Raspberry Pi,” a Presentation from Usef...
Edge AI and Vision Alliance
 
find out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challengesfind out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challenges
huseindihon
 
Introduction-to-the-IAM-Platform-Implementation-Plan.pptx
Introduction-to-the-IAM-Platform-Implementation-Plan.pptxIntroduction-to-the-IAM-Platform-Implementation-Plan.pptx
Introduction-to-the-IAM-Platform-Implementation-Plan.pptx
313mohammedarshad
 
The importance of Quality Assurance for ICT Standardization
The importance of Quality Assurance for ICT StandardizationThe importance of Quality Assurance for ICT Standardization
The importance of Quality Assurance for ICT Standardization
Axel Rennoch
 
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyyActive Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
RaminGhanbari2
 
Best Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdfBest Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdf
Tatiana Al-Chueyr
 
CiscoIconsLibrary cours de réseau VLAN.ppt
CiscoIconsLibrary cours de réseau VLAN.pptCiscoIconsLibrary cours de réseau VLAN.ppt
CiscoIconsLibrary cours de réseau VLAN.ppt
moinahousna
 

Recently uploaded (20)

Opencast Summit 2024 — Opencast @ University of Münster
Opencast Summit 2024 — Opencast @ University of MünsterOpencast Summit 2024 — Opencast @ University of Münster
Opencast Summit 2024 — Opencast @ University of Münster
 
Data Integration Basics: Merging & Joining Data
Data Integration Basics: Merging & Joining DataData Integration Basics: Merging & Joining Data
Data Integration Basics: Merging & Joining Data
 
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-InTrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
 
High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...
High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...
High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...
 
Tirana Tech Meetup - Agentic RAG with Milvus, Llama3 and Ollama
Tirana Tech Meetup - Agentic RAG with Milvus, Llama3 and OllamaTirana Tech Meetup - Agentic RAG with Milvus, Llama3 and Ollama
Tirana Tech Meetup - Agentic RAG with Milvus, Llama3 and Ollama
 
Girls Call Churchgate 9910780858 Provide Best And Top Girl Service And No1 in...
Girls Call Churchgate 9910780858 Provide Best And Top Girl Service And No1 in...Girls Call Churchgate 9910780858 Provide Best And Top Girl Service And No1 in...
Girls Call Churchgate 9910780858 Provide Best And Top Girl Service And No1 in...
 
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
 
How to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptxHow to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptx
 
The Role of IoT in Australian Mobile App Development - PDF Guide
The Role of IoT in Australian Mobile App Development - PDF GuideThe Role of IoT in Australian Mobile App Development - PDF Guide
The Role of IoT in Australian Mobile App Development - PDF Guide
 
The Rise of AI in Cybersecurity How Machine Learning Will Shape Threat Detect...
The Rise of AI in Cybersecurity How Machine Learning Will Shape Threat Detect...The Rise of AI in Cybersecurity How Machine Learning Will Shape Threat Detect...
The Rise of AI in Cybersecurity How Machine Learning Will Shape Threat Detect...
 
BLOCKCHAIN TECHNOLOGY - Advantages and Disadvantages
BLOCKCHAIN TECHNOLOGY - Advantages and DisadvantagesBLOCKCHAIN TECHNOLOGY - Advantages and Disadvantages
BLOCKCHAIN TECHNOLOGY - Advantages and Disadvantages
 
Dublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptx
Dublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptxDublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptx
Dublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptx
 
Types of Weaving loom machine & it's technology
Types of Weaving loom machine & it's technologyTypes of Weaving loom machine & it's technology
Types of Weaving loom machine & it's technology
 
“Deploying Large Language Models on a Raspberry Pi,” a Presentation from Usef...
“Deploying Large Language Models on a Raspberry Pi,” a Presentation from Usef...“Deploying Large Language Models on a Raspberry Pi,” a Presentation from Usef...
“Deploying Large Language Models on a Raspberry Pi,” a Presentation from Usef...
 
find out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challengesfind out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challenges
 
Introduction-to-the-IAM-Platform-Implementation-Plan.pptx
Introduction-to-the-IAM-Platform-Implementation-Plan.pptxIntroduction-to-the-IAM-Platform-Implementation-Plan.pptx
Introduction-to-the-IAM-Platform-Implementation-Plan.pptx
 
The importance of Quality Assurance for ICT Standardization
The importance of Quality Assurance for ICT StandardizationThe importance of Quality Assurance for ICT Standardization
The importance of Quality Assurance for ICT Standardization
 
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyyActive Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
 
Best Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdfBest Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdf
 
CiscoIconsLibrary cours de réseau VLAN.ppt
CiscoIconsLibrary cours de réseau VLAN.pptCiscoIconsLibrary cours de réseau VLAN.ppt
CiscoIconsLibrary cours de réseau VLAN.ppt
 

Usability: 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
  • 8. it’s what’s on the inside that counts…
  • 11. Original presentation image: http://flickr.com/photos/12177584@N05/1244504642/
  • 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
  • 23. users with disabilities are a primary user group
  • 25. Interview real users who use Assistive Technologies
  • 29. it’s not just about the code (it’ about the peeps)
  • 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
  • 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.
  • 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
  • 63. all primary users are considered
  • 64. Accessibility becomes integral to the Design Process
  • 67. web usability depends on accessibility
  • 68. compliance checks are not enough
  • 70. True User Experience Design is achieved
  • 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