State of California Vs. Bank of America

							An Introduction to Web Usability
        and Accessibility

       Mike Elledge, Assistant Director
       Usability & Accessibility Center
          Michigan State University
                     Topics

•   Why Usability is Important
•   The Kinds of Usability Testing
•   User Centered Design
•   Why Accessibility is Important
•   How to Design for Accessibility
•   Accessibility and Development




                         2
        Why Usability is Important

• About 55 percent of people who use the web are
  unable to find the information they need
• Where Web site visitors have a negative experience
  with the Web site, 40 percent of them do not return
  to the site as a result.
   – Forrester Research, 2003




                                3
    Improvement in Website Performance

•   Development projects should spend 10% of their budget on usability.
    Following a usability redesign, websites increase desired metrics by
    135% on average; intranets improve slightly less.

     Metric Average Improvement Across Web Projects
     – Sales / conversion rate                 100%
     – Traffic / visitor count                 150%
     – User performance / productivity         161%
     – Use of specific (target) features       202%

         --Jakob Nielsen's Alertbox, January 7, 2003
                 http://www.useit.com/alertbox/20030107.html




                                    4
     Savings from User Satisfaction
1)   Every dollar spent acquiring a customer relates to $100
     dollars re-acquiring them.
2)   95% of your customers use less than 5% of your site.
     Customers NEVER use about 75% of the functions.
3)   Web site usability is the single largest predictor of call center
     volume. Calls cost an average $22-$30 per call.
4)   $10 spent on critical usability problems early in development
     saves about $100 in development costs.
5)   Every dollar spent improving the visual design or style of
     your site, delivers virtually no improvement in sales.
     Spending $1 improving core behavioral interactions, will
     return $50-$100.
        --Charles L. Mauro, Mauro New Media, 12/2/2002
        http://www.taskz.com/ucd_testing_roi_summary.php


                                  5
         Kinds of Usability Reviews

•   Heuristic (aka Expert) Reviews
•   Usability Focus Groups
•   Formal (one on one) Usability Testing
•   Hybrid Testing




                            6
                   Heuristic Review

• Expert review based on Jakob Nielsen’s 10
  principles of usability
   – Three users independently review website
   – Results shared and aggregated
• Less expensive, but also less complete
   – Typically captures 2/3 of issues found in formal usability testing
   – Best for limited budgets, short time frames




                                   7
             Usability Focus Group

• Similar to traditional focus group
   – 8 to 12 participants
   – Moderator guides the group through a series of subject areas
• Differs in subject matter
   – Addresses design issues: navigation, labeling, layout, content
   – Can also address design concepts or themes
   – May include paper prototypes, functional wireframes, beta or
     finished sites
• Identifies key audience needs and perceptions,
  limited diagnostic capabilities



                                  8
           Formal Usability Testing
• One-on-one testing of target audience groups
   – 8 to 10 persons per group
   – 5 to 8 tasks per participant
   – Review paper prototypes, functional wireframes, beta or finished
     sites, on or off computer.
• Protocol development, facilitation, note-taking and
  analysis
   – Screen capture program (Morae) if done on computer
   – Dedicated note taker (graduate student)
• Identification of key usability issues with
  recommendations for their resolution
   – Best for in-depth diagnosis, but more expensive and time-
     consuming

                                 9
                      Hybrid Testing

• Combination of formal user testing and usability
  focus group
   –   Up to 9 participants (subject to number of PCs in room)
   –   Self-guided through tasks, noting time, usability issues and paths
   –   Rate tasks wrt to difficulty
   –   Subsequent discussion of problems encountered
• More users, faster, but less in-depth




                                   10
User-Centered Design

1                 2




                  3



5




         4



         11
Step 1: User Requirements Analysis

• To determine user needs and usability requirements:
   –   Target audience definition
   –   User Interviews
   –   Consumer surveys
   –   User profiles (aka personas)
• Work with product team to decide on goals for the
  Web site from the perspective of the user and the
  business.




                                  12
          Step 2: Conceptual Design

• To create design concepts for testing:
   –   Heuristic review of existing site
   –   Competitive analysis
   –   Concept testing
   –   Card sorting for information architecture design
   –   Mockups of new site
• To test design concepts for usability
   – ―Wizard of Oz‖ tests for mock-ups




                                   13
 Step 3: Design and Implementation

• Work with client on design iterations and final
  implementation
• Evaluate final design for usability, accessibility, and
  optimization




                            14
        Step 4: Usability Evaluation

• To evaluate final design:
   – Information architecture review
   – Wireframe and prototype testing
• To evaluate implementation:
   – Evaluate usability through focus groups, user tests, and
     cognitive walkthroughs.
   – Website optimization (through partner)




                                 15
   Step 5: Launch and Maintenance

• Review additions to site
• Train site designers and developers
• Conduct collaborative site review




                          16
     Why Accessibility is Important

• About 20 percent of the population has a disability
   – One in ten Americans have a severe disability
   – One in two Americans over 65 have reduced capabilities
• Disabilities include a wide range of conditions
• Persons with disabilities rely on the Internet




                                17
Persons with Disabilities

20% of 296.5 Million = 59 Million People




      Texas + California (54.7 M)
This equates to 500+ million worldwide!

                   18
             Types of Disabilities

•   Hearing—Conductive, sensorineural
•   Visual—Color blindness, low vision, blindness
•   Cognitive Impairments—ADD, TBI, Dyslexia
•   Physiological Impairments—Temporary, permanent




                          19
Share of Disabilities




          20
       Online Use by Persons with
               Disabilities
• Adults with disabilities spend, on average, twice as
  much time online as adults without disabilities- 20
  hours per week compared to 10 hours per week.

• Adults with disabilities are much more likely than
  adults without disabilities to report that the Internet
  has significantly improved the quality of their lives
  (48% vs. 27%)
      ―How the Internet is Improving the Lives of Americans with
        Disabilities,‖ Humphrey Taylor, Harris Poll #30, June 7, 2000




                                   21
        Accessibility is Uncommon
• 81% of websites are inaccessible (I.e., fail to comply
  with most basic WCAG guidelines)
   – Disabilities Rights Commission (UK), 2004
• Of 148 (Federal) agencies examined, 13.5 percent
  had fully accessible sites. All sites were supposed to
  have met accessibility standards by June 25, 2001.
   – 2002 study released by PriceWaterhouseCoopers




                                22
                     Disability Law

•   ADA prohibits discrimination against persons with
    disabilities (1990)
•   Federal Government amended the Rehabilitation
    Act of 1973 with Section 508 (1998)
    – Section 508 now requires Federal agencies to provide persons
      with disabilities equal access to Federal information, and
      employees with disabilities equal access to electronic and
      information technology
•   Some states have 508-based requirements for
    higher education (California--2002) and State
    agencies (Texas, Nebraska, Wisconsin)


                                23
               ADA Lawsuit History

•   In past, lawsuits about online access settled out of
    court; led to compliance and/or award of dollar
    damages
    – State of New York (Ramada.com & Priceline.com--2004)
    – AccessNow vs. Southwest Airlines (2002)
    – CA Council for the Blind vs. Bank of America & Wells Fargo
      ATM (2000)
    – NFB vs. Connecticut Attorney General’s Office (IRS forms)
      (2000)
    – National Federation for the Blind (NFB) vs. AOL (1999)




                                 24
                     NFB vs. Target

•   ADA suit against Target is something new
    – Target decided to fight suit rather than settle
    – Sexton and NFB Vs. Target (2006): Judge Marilyn Hall Patel
      ruled that retailers can be sued if their websites are not
      accessible to the blind
    – ―The 'ordinary meaning' of the ADA's prohibition against
      discrimination in the enjoyment of goods, services, facilities or
      privileges, is that whatever goods or services the place
      provides, it cannot discriminate on the basis of disability in
      providing enjoyment of those goods and services.―
    – Recently, judge ruled it can proceed as a class-action suit




                                  25
                An Untapped Market

•   Persons with disabilities have $175 (1) to $220 (2)
    billion in disposable income in the U.S.
    – Almost 2 times the spending power of teens and more than 17
      times the spending power of tweens (8-12 year-olds)
       (1) Bureau of Labor Statistics (http://www.usdoj.gov/crt/ada/busstat.htm)
       (2) National Organization on Disability (http://www.nod.org)

•   Persons in Canada with disabilities have $25 billion
    in disposable income
       Royal Bank, ―Outlook for people with disabilities,‖ 2000
•   Persons in the UK with disabilities have ₤80 billion
    in disposable income


                                       26
   Who Benefits From Accessibility

• Persons with Disabilities—Video Clips
• Persons without Disabilities—Curb cut analogy




                         27
          What Accessible Design Is

• Basic criteria
   –   Don’t need mouse—Keyboard-only
   –   Enlarged without user losing context
   –   Understandable when read aloud
   –   Understandable without sound
• Adjusts to user needs
• Is usable for persons with disabilities, not solely
  standards-compliant
• Formal criteria
   – Section 508 (U.S.)
   – WCAG 1.0, soon to be WCAG 2.0 (Rest of World)


                                   28
          Designing for Blindness

• Web content is read by screen readers (like JAWS)
  and blind persons navigate with the keyboard
• Benefit from keyboard shortcuts, organized
  content, contextual clues

   Example:
     www.webaim.org/media/video/kyle/kyle.asx




                             29
         Designing for Low Vision

• Use stylesheets, browser settings or screen
  enlarging software (like ZoomText)
• Benefit from sites that support text enlargement
  (CSS) , window resizing (%) and image
  magnification (SVG)

   Example:
     http://www.afb.org/




                           30
          Designing for Deafness

• Need text for all audio-based information
• Benefit from sites that provide text of audio

   Example:
     www.webaim.org/media/video/curtis/curtis.asx




                             31
          Designing for Dexterity

• Need varying assistance including special
  keyboards, brain switches, mouth sticks, joysticks
  and rollerballs
      (http://www.synapseadaptive.com/)
• Benefit from large clickable area and pre-loaded
  fields

   Example:
     www.webaim.org/media/video/gordon/gordon.asx




                              32
   Adaptive Technologies




Brain Switch        Head Tracking Device



                                    Ergonomic
                                    Keyboard




               33
          Designing for Cognition

• Need support for comprehension
• Benefit from logical, uncluttered sites, navigation
  cues, alternative presentations of content,
  simple terminology, consistency

   Additional information:
     http://www.webaim.org/articles/cognitive/cognitive_too
     _little/




                              34
         Section 508 vs. WCAG 1.0--
               Characteristics
• Section 508
  – Descriptive—Not so much ―how,‖ but ―what‖
       www.access-board.gov/sec508/guide/ 1194.22.htm
• WCAG 1.0
  – Prescriptive—‖How‖
  – HTML-focused
  – Can be more comprehensive than 508, depending on priority
    level chosen (I, II or III)
      www.w3.org/TR/WAI-WEBCONTENT/full-checklist.html




                              35
           Guidelines--WCAG 1.0

• Web Content Accessibility Guidelines
  – Priority One: MUST be done (aka ―A‖)
  – Priority Two: SHOULD be done (―AA‖)
  – Priority Three: MAY be done (helpful) (―AAA‖)
• Based on specific HTML-based standards
• Created in 1999




                                36
            Guidelines--WCAG 2.0

• Technology and programming language - neutral
• Baseline conformance vs. HTML-based standards

• Principles: Perceivable, operable, understandable,
  robust
• Levels similar to WCAG 1.0 priorities:
   – Level 1: Minimum level—All content
   – Level 2: Enhanced level—All content
   – Level 3: Additional enhancement—Some content




                              37
   Section 508: Hybrid of WCAG 1.0
a) Text equivalent for images      i) Title frames with text (A)
   (A)                             j) No page flicker (A)
b) Synchronized multimedia         k) A text-only version only when
   captioning (A)                     no alternative (A)
c) Information not color           l) Accessible alternative to
   dependant (A)                      scripting (A)
d) Readable without style sheet    m) Links to accessible plug-ins
   (A)                                or applets (AA)
e) Redundant text links for        n) Make forms accessible (AA)
   image maps (A)                  o) Ability to skip repetitive
f) Client-side image maps (A)         navigation links (AAA)
g) Row and column headers for      p) Notification of timed response
   data tables (A)                    and ability to notify if more
h) Associate data with headers        time is needed (not in WCAG
   in complex tables (A)              1.0)

       http://www.jimthatcher.com/sidebyside.htm#WCAGView


                                  38
 Accessible Design and Development

• Make accessibility part of the development process
   –   Design for people; include people with disabilities
   –   Establish internal standards (such as WCAG 1.0 AA)
   –   Train designers and developers
   –   Use web editors with prompts
   –   Practice User-Centered Design (UCD)




                                  39
User-Centered Design

1                 2




                  3



5




         4



         40
Step 1: User Requirements Analysis

•   Include persons with disabilities among your
    personas
•   Identify their functional and practical needs through
    market research




                            41
           Personas—UAC Example

• Fluid Open Source Project:
   Primary Persona - Monica Windsor
   “Blind Instructor Teaching
   Online Course in Organizational Management”

  Accessibility Considerations
  Since Monica is attempting to communicate more online this term with her
     students, some of whom may have disabilities, she will make extensive use
     of online communication tools.
            1. She will need to have fully accessible tools for discussion and
                online chat.
            2. She will need to insure visually-oriented content is accessible,
                including organization diagrams, bar charts, photographs of
                subjects, etc.




                                        42
       Step 2: Conceptual Design

1. User Requirements Analysis
2. Conceptual Design
  – Include functional and practical needs of persons with
    disabilities identified in User Requirements Analysis
  – Follow MSU Accessibility Guidelines on Web Accessibility site:
    http://webaccess.msu.edu/
  – Conduct a simple accessibility evaluation




                               43
  Step 3: Design & Implementation

1. User Requirements Analysis
2. Conceptual Design
3. Design & Implementation
  – Use accessibility prompts in your web editor (Dreamweaver)
  – Conduct a comprehensive accessibility evaluation on a
    functional prototype




                               44
Comprehensive Accessibility Evaluation

• For conducting in-depth evaluation of site
  accessibility

   Step 1: Evaluate Markup with AIS Toolbar Extension
   Step 2: Evaluate Site with System Access to Go (SATOGO)
   Step 3: Validate Site Compliance with WCAG 1.0

   MSU’s protocol and evaluation checklist can be found at this
    address: http://webaccess.msu.edu/review-process/evaluation-
    procedure.html




                               45
          Step 4: Usability Evaluation

1.   User Requirements Analysis
2.   Conceptual Design
3.   Design & Implementation
4.   Usability Evaluation
     – Include persons with disabilities in user testing




                                    46
                    User Testing

• For evaluating accessibility of website by target
  audience
   – Major West Coast Bank

   One-on-One User Testing with Screen Reader Users
   – Average, Above Average, Expert users
   – JAWS and Window-Eyes




                              47
       Step 5: Launch & Maintenance

1.   User Requirements Analysis
2.   Conceptual Design
3.   Design & Implementation
4.   Usability Evaluation
5.   Launch & Maintenance
     – Review additions and revisions for accessibility
     – Repair problems




                                   48
        Accessible Design Concepts

• Include accessibility concepts
   – Separate content from presentation (HTML vs. CSS)
      • Tables for data, not layout
   – Consistent navigation and layout
   – Organize content into digestible chunks




                                      49
          Accessible Design Elements

• Include accessibility concepts
• Include accessible elements
   –   Image descriptions
   –   Headings, summaries, lists
   –   Relate content to structure: tables, forms
   –   Mindful design: skip links, meaningful link phrases, captions




                                   50
    Accessible Design Components

• Include accessibility concepts
• Include accessible elements
• Include accessible components
  – JavaScript that degrades gracefully
  – DOJO, jQuery component libraries




                                51
                    Thank you!
For more information, please contact us at the
  Usability & Accessibility Center (UAC):

      Mike Elledge, Assistant Director
      elledge@msu.edu

      Sarah Swierenga, Director
      sswieren@msu.edu

      usability.msu.edu
      517-353-8977

                            52
                      Your Questions
•   History and organization
    1. How was the UAC formed?
    2. What type of work do you complete day-to-day? Who do you work
       with?
    3. What resources and organization are essential for a Web team to be
       effective?
•   Common usability and accessibility problems
    1. What are the usability and accessibility problems you see most
       frequently?
    2. Which problems would you consider to be the most important to
       correct?
    3. What methods do you recommend for identifying and fixing usability
       and accessibility problems?
    4. What is your impression of sites that use tables for visual design and
       formatting of Web pages?
    5. Are there specific tools that are helpful for increasing usability and
       accessibility (e.g. Dreamweaver Accessibility Validator)?


                                      53
                     More Questions
•   Audience
    1. How does usability vary for different audiences (e.g. young vs. old,
       tech savvy vs. no)?
    2. How can a designer/developer balance the usability needs of all
       audiences?
    3. What can be done to maximize accessibility for all audiences?
    4. Have you seen any changes or trends in the ability and or expectations
       of target audiences?
•   Evaluation and improvement
    1. What strategies do you recommend for evaluation of and improvement
       of usability?
    2. How would you approach working on a Web page vs. an online
       application or electronic database? (e.g. how might the usability of a
       visual library be increased: http://digitalcollections-
       wmich.cdmhost.com/)



                                     54