Post on 28-Jan-2015
description
Making Websites More Usable by
Older Adults Kate Finn & Jeff Johnson, Wiser Usability, Inc.
Wiser Usability AIA 2013
Copyright 2012 Bryan Nye,www.NyeHumor.com
• Background• The Older Adult Web User• Guidelines• Website Usability Evaluation
Making Websites More Usable by Older Adults
Wiser Usability AIA 2013
• Accessibility vs. Usability• Who’s Online?• What’s Everyone Doing Online?• Why Does Usability Matter?
Background
Wiser Usability AIA 2013
Accessibility vs. Usability
Wiser Usability AIA 2013
Copyright © Darrell Chaddock,
darrellchaddock.com
Accessibility vs. Usability
Wiser Usability AIA 2013
Accessibility Usability
Extent to which content is accessible, to widest possible audience.
How easy it is to successfully use a website
Websites = “spaces in the public domain.” Required by US law to be accessible
Not required by law (but a good idea!)
Often contained in underlying code
Often more obvious, self-evident
Can be Accessible but not Usable, or vice versa. Not only for older people, or people with disabilities. Improvements made for 1 population often benefit others.
Percent US Adults Online, by Age
Wiser Usability AIA 2013
18-29
30-49
50-64
65+
Source: Pew Internet & American Life Project Surveys, April 2000-April 2012
9791
77
53
What’s Everyone Doing Online?
Wiser Usability AIA 2013
Copyright 2012, Jack Zylkin, www.usbtypewriter.com
Common Online Activities, by Age
Wiser Usability AIA 2013
Activity 18-33 34-45 46-55 56-64 65-73 74+
Search
Health Info
News
Travel
Gov’t
Purchases
90 - 99
80 - 89
70 - 79
60 - 69
50 - 59
40 - 49Key: % of Online Users Engaging in Activity
Source: Pew Internet & American Life Project Surveys, April 2000-April 2012
Online-Only Activities
Shopping (Amazon) Making travel reservations (Travelocity,
Expedia) Taking online courses (Coursera)
Applying for jobs, schools (UC) Filing benefit claims (state unemployment) Managing financial accounts Reading digital-only publications
Wiser Usability AIA 2013
Why Does Usability Matter?
Aging: in the cards for everyone
Internet’s universal usefulness Better usability = More successful users Older adults: Greatest winners
Wiser Usability AIA 2013
• Age-Related Changes• Impact on Web Usage• Behavioral Characteristics
The Older Adult Web User
Wiser Usability AIA 2013
Fine Motor, Vision, and Hearing, Impairments among US Adults
Wiser Usability AIA 2013
% of Adults in US with Fine Motor, Vision, or Hearing, Impairments
Age
Source: Summary Health Statistics for U.S. Adults: National Health Interview Survey, 2010
.61.8
1.56.8
9.35.4
15.2
14.5
7.5
Age-Related Changes: Vision Age-related colorblindness Narrower field of vision Reduced color & contrast sensitivity Increased sensitivity to glare Slower to adapt to changes in light Slower to focus with changes in distance Visual tasks more demanding, time-
consuming
Wiser Usability AIA 2013
Age-Related Changes: VisionNo Vision Impairment
Wiser Usability AIA 2013
Age-Related Changes: VisionCataracts
Wiser Usability AIA 2013
Age-Related Changes: VisionMacular Degeneration
Wiser Usability AIA 2013
Age-Related Changes: VisionGlaucoma
Wiser Usability AIA 2013
Age-Related Changes: VisionNo Blur
Wiser Usability AIA 2013
Age-Related Changes: VisionSlight Blur
Wiser Usability AIA 2013
Age-Related Changes: VisionNormal Glare Sensitivity
Wiser Usability AIA 2013
Age-Related Changes: VisionIncreased Glare Sensitivity
Wiser Usability AIA 2013
Age-Related Changes: VisionNo Colorblindness
Wiser Usability AIA 2013
Age-Related Changes: VisionColorblindness
Wiser Usability AIA 2013
Age-Related Changes: VisionNormal Contrast Sensitivity
Wiser Usability AIA 2013
Age-Related Changes: VisionLow Contrast Sensitivity
Wiser Usability AIA 2013
Age-Related Changes: Motor Control Difficulty grasping/manipulating small
objects Reduced eye-hand coordination Stiffness Increase in hand tremor
Wiser Usability AIA 2013
Age-Related Changes: Cognition Reduced short-term memory Harder to concentrate Longer learning times Longer processing time More distractible Difficulty retrieving words More easily overwhelmed
Wiser Usability AIA 2013
Age-Related Changes: Cognition
Wiser Usability AIA 2013
Age-Related Changes: Cognition
Wiser Usability AIA 2013
Age-Related Changes: Cognition
Wiser Usability AIA 2013
Age-Related Changes: Hearing Harder to filter out background sounds Difficult to localize sounds Harder to detect high-pitched sounds
Wiser Usability AIA 2013
Everyone:8 kHz
Under 20:16 kHz
Under 50:12 kHz
Impacts on Web Use
Wiser Usability AIA 2013
Age-Related Change Impact on Web UseLower contrast sensitivity and color perception
Harder to see links and read text
Reduced dexterity and fine motor control
Harder to select small targets, move pointer accurately
More distractible Harder to filter out extra stimuli
Harder to learn and remember new skills and info
Harder to master novel websites, interactions, technologies
Combinations of above changes
Compounding of above impacts
General Attitudes, Behaviorsof Older Web Users Less computer experience “Change blindness” “Risk averse”
Afraid of “breaking something” Tendency to read entire page Fear of embarrassment
Susceptible to information overload Reluctance to give personal info Tendency to blame themselves, not
interface
Wiser Usability AIA 2013
• Graphic/Visual Design• Ergonomics• Navigation, Focus, Guidance• Content, Writing• General Accessibility
Guidelines
Wiser Usability AIA 2013
Guidelines: Graphic/Visual Design
Display text in dark colors on light, non-patterned backgrounds
Avoid tiny fonts; provide a visible way to resize text
Page layout should continue to work if text is enlarged
Display text in Mixed Case, NOT IN ALL CAPS Avoid continuous animations and rolling text Number steps in multi-step user-action
sequencesWiser Usability AIA 2013
Guidelines: Graphic/Visual Design
Display text in dark colors on light, non-patterned backgrounds
Avoid tiny fonts; provide a visible way to resize text
Page layout should continue to work if text is enlarged
Display text in Mixed Case, NOT IN ALL CAPS Avoid continuous animations and rolling text Number steps in multi-step user-action
sequencesWiser Usability AIA 2013
Guidelines: Graphic/Visual Design
Display text in dark colors on light, non-patterned backgrounds
Avoid tiny fonts; provide a visible way to resize text
Page layout should continue to work if text is enlarged
Display text in Mixed Case, NOT IN ALL CAPS Avoid continuous animations and rolling text Number steps in multi-step user-action
sequencesWiser Usability AIA 2013
Guidelines: Ergonomics
On-screen controls should accept clicks anywhere on the control, including the label
Make click-targets large, and space them apart
Avoid walking (pull right) menus Or make them open on click, not on hover
Clearly indicate input focus Highlight selection; Links highlight on hover
Wiser Usability AIA 2013
Guidelines: Ergonomics
On-screen controls should accept clicks anywhere on the control, including the label
Make click-targets large, and space them apart
Avoid walking (pull right) menus Make them open on click, not on hover
Clearly indicate input focus Highlight selection; links highlight on hover
Wiser Usability AIA 2013
Guidelines:Navigation, Focus, Guidance
Provide clear link to Home from all other pages Focus attention on important info and calls to
action Show current “breadcrumb” path on internal
pages Minimize vertical scrolling Make links look distinct from non-links Provide site map Make site hierarchy shallow and broad Use consistent layout across pages, esp. for
navigationWiser Usability AIA 2013
Guidelines:Navigation, Focus, Guidance
Provide clear link to Home from all other pages Focus attention on important info and calls to
action Show current “breadcrumb” path on internal
pages Minimize vertical scrolling Make links look distinct from non-links Provide site map Make site hierarchy shallow and broad Use consistent layout across pages, esp. for
navigationWiser Usability AIA 2013
Guidelines: Content, Writing
Use plain language; avoid technical jargon Minimize the amount of text
Break up text using headings, bullets, tables Provide summaries for long texts, with “More…”
links Use active voice & positive statements Display text in short lines Provide clear contact information Provide text equivalents for non-text
contentWiser Usability AIA 2013
Guidelines: Content, Writing
Use plain language; avoid technical jargon Minimize the amount of text
Break up text using headings, bullets, tables Provide summaries for long texts, with “More…”
links Use active voice & positive statements Display text in short lines Provide clear contact information Provide text equivalents for non-text
contentWiser Usability AIA 2013
Guidelines: General Accessibility
Images should include alt and title text Code lists as HTML lists, e.g., <ul> or <ol> Specify layout and appearance in CSS, not in
HTML Don’t use HTML appearance tags: <b>, <font>, etc. Use tables only to display tabular data
Provide Skip Nav links on every page Navbar links to current page should be inactive In internal anchors, use id= instead of name= Declare character set on every HTML page
Wiser Usability AIA 2013
Guidelines: Resources
www.WiserUsability.com/Resources/ Wiser Usability’s Design Guidelines for Usable
Websites NIH/NIA: Making Your Website Senior Friendly W3C: Web Accessibility and Older People AARP: Audience Centered Heuristics: Older
Adults Kurniawan & Zaphiris: Research-Derived Web
Design Guidelines for Older People
Wiser Usability AIA 2013
Wiser Usability AIA 2013
• Types of Website Evaluation• Testing on Older Adults
Website Usability Evaluation
Wiser Usability AIA 2013
Types of Website Evaluation
Web Analytics Usability Tests Expert Usability Review
Wiser Usability AIA 2013
Types of Website Evaluation
Web Analytics Only after release; “Test in the marketplace” Lots of data (if site has traffic) But it’s mainly page-hit counts; limited info
on users’: Paths through site Goals Satisfaction
Usability Tests Expert Usability Review
Wiser Usability AIA 2013
Types of Website Evaluation
Web Analytics Usability Tests
Before, during, or after development With paper mock-up, semi-functional prototype,
actual website Can be inexpensive and quick
Ask people to do tasks; record with screen-capture software
Identifies usability problems Produces hard-to-ignore evidence of problems
Expert Usability Review
Wiser Usability AIA 2013
Usability Test: Steps
Identify goals of website, goals for test Identify intended user population Develop representative test tasks, script Pilot-test tasks, script
Revise tasks, script Choose test site(s) Recruit & schedule participants Conduct test sessions Analyze data
Identify problems; suggest improvementsWiser Usability AIA 2013
Example: Testing Paper Prototype
Wiser Usability AIA 2013
Example: Testing Finished Website
Wiser Usability AIA 2013
Example: Testing Finished Website
Wiser Usability AIA 2013
Types of Website Evaluation
Web Analytics Usability Tests Expert Usability Review
Aka “Heuristic Evaluation” (Nielsen & Molich, 1990) Get experts to review website & report usability
problems Domain experts or web design experts Use web design heuristics or guidelines
UI experts are better than non-UI-experts Multiple evaluations better than one; 10 is too
many
Wiser Usability AIA 2013
Recommendations for ConductingUsability Tests with Older Adults
Test at Participant’s site if possible Be sensitive to security/privacy concerns Keep test sessions short Minimize audio/visual distractions Use their computer or provide a similar,
familiar setup Avoid speaking in computer/Web jargon Be patient and respectful Offer to explain things after the session Small compensation is greatly appreciated
Wiser Usability AIA 2013
Thank You!
User/Usage Studies
Focus Groups Usability Testing Usability Review Accessibility
Review Website Design UI/UX Training
WiserUsability.com 408.806.8451 kfinn@wiserusability.c
om
Wiser Usability AIA 2013