Making Websites More Usable by Older Adults (ASA/AIA 2013)

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


• Accessibility vs. Usability• Who’s Online?• What’s Everyone Doing Online?• Why Does Usability Matter?

Background


Accessibility vs. Usability


Copyright © Darrell Chaddock,

darrellchaddock.com

Accessibility vs. Usability


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


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?


Copyright 2012, Jack Zylkin, www.usbtypewriter.com

Common Online Activities, by Age


Activity 18-33 34-45 46-55 56-64 65-73 74+

Email

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


Why Does Usability Matter?

Aging: in the cards for everyone

Internet’s universal usefulness Better usability = More successful users Older adults: Greatest winners


• Age-Related Changes• Impact on Web Usage• Behavioral Characteristics

The Older Adult Web User


Fine Motor, Vision, and Hearing, Impairments among US Adults


% 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


Age-Related Changes: VisionNo Vision Impairment


Age-Related Changes: VisionCataracts


Age-Related Changes: VisionMacular Degeneration


Age-Related Changes: VisionGlaucoma


Age-Related Changes: VisionNo Blur


Age-Related Changes: VisionSlight Blur


Age-Related Changes: VisionNormal Glare Sensitivity


Age-Related Changes: VisionIncreased Glare Sensitivity


Age-Related Changes: VisionNo Colorblindness


Age-Related Changes: VisionColorblindness


Age-Related Changes: VisionNormal Contrast Sensitivity


Age-Related Changes: VisionLow Contrast Sensitivity


Age-Related Changes: Motor Control Difficulty grasping/manipulating small

objects Reduced eye-hand coordination Stiffness Increase in hand tremor


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


Age-Related Changes: Cognition






Age-Related Changes: Hearing Harder to filter out background sounds Difficult to localize sounds Harder to detect high-pitched sounds


Everyone:8 kHz

Under 20:16 kHz

Under 50:12 kHz

Impacts on Web Use


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


• Graphic/Visual Design• Ergonomics• Navigation, Focus, Guidance• Content, Writing• General Accessibility

Guidelines


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


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


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


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



• Types of Website Evaluation• Testing on Older Adults

Website Usability Evaluation


Types of Website Evaluation

Web Analytics Usability Tests Expert Usability Review



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



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


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


Example: Testing Finished Website


Example: Testing Finished Website



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


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


Thank You!

User/Usage Studies

Focus Groups Usability Testing Usability Review Accessibility

Review Website Design UI/UX Training

WiserUsability.com 408.806.8451 [email protected]

om
