SlideShare a Scribd company logo
1 of 73
: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.pdfSukhdevPanwar1
 
Intro to web_design_notes jalen
Intro to web_design_notes  jalenIntro to web_design_notes  jalen
Intro to web_design_notes jalenjalenclark5
 
Using Audio Podcasts To Enhance Learning
Using Audio Podcasts To Enhance LearningUsing Audio Podcasts To Enhance Learning
Using Audio Podcasts To Enhance Learningjanreyes
 
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 LanguagesAmin Bandeali
 
Web Accessibility
Web AccessibilityWeb Accessibility
Web AccessibilitySana Ullah
 
Software Accessibility Siddhesh
Software Accessibility SiddheshSoftware Accessibility Siddhesh
Software Accessibility SiddheshSiddhesh Bhobe
 
Seth Duffy Accessibility97035
Seth Duffy   Accessibility97035Seth Duffy   Accessibility97035
Seth Duffy Accessibility97035FNian
 
text media and information language.pptx
text media and information language.pptxtext media and information language.pptx
text media and information language.pptxCatalino Yanos Jr.
 
Creating Accessible Information
Creating Accessible InformationCreating Accessible Information
Creating Accessible InformationMags_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.pdfRodulfoGabrito
 
SimpleK12 Webinar - GoodReader 092011
SimpleK12 Webinar - GoodReader 092011SimpleK12 Webinar - GoodReader 092011
SimpleK12 Webinar - GoodReader 092011Christopher 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 AccessibilityLisa Herrod
 
The Age of Awareness
The Age of AwarenessThe Age of Awareness
The Age of AwarenessLisa Herrod
 
Lean Usability for startups
Lean Usability for startupsLean Usability for startups
Lean Usability for startupsLisa Herrod
 
Designing for Diversity
Designing for DiversityDesigning for Diversity
Designing for DiversityLisa Herrod
 
Deafness and the User Experience
Deafness and the User ExperienceDeafness and the User Experience
Deafness and the User ExperienceLisa 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 UsLisa 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 TeamLisa Herrod
 
WE05 Eye Tracking the User Experience
WE05 Eye Tracking the User ExperienceWE05 Eye Tracking the User Experience
WE05 Eye Tracking the User ExperienceLisa 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

COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Websitedgelyza
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintMahmoud Rabie
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxMatsuo Lab
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostMatt Ray
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxGDSC PJATK
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-pyJamie (Taka) Wang
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding TeamAdam Moalla
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024D Cloud Solutions
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemAsko Soukka
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8DianaGray10
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAshyamraj55
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Brian Pichman
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsSafe Software
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXTarek Kalaji
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1DianaGray10
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesDavid Newbury
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Will Schroeder
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...Aggregage
 

Recently uploaded (20)

COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Website
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership Blueprint
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptx
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-py
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystem
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBX
 
20150722 - AGV
20150722 - AGV20150722 - AGV
20150722 - AGV
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond Ontologies
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
 

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