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

• 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

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

Source: Pew Internet & American Life Project Surveys, April 2000-April 2012

What’s Everyone Doing Online?

Common Online Activities, by Age

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

Search

Health Info

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

Source: Summary Health Statistics for U.S. Adults: National Health Interview Survey, 2010

1.56.8

9.35.4

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

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

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 kfinn@wiserusability.c

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

Design

Cisco ASA 5510, ASA 5520, ASA 5540, and ASA 5550 · PDF fileCisco ASA 5510, ASA 5520, ASA 5540, and ASA 5550 Hardware Installation Guide ©2009-2012 Cisco Systems, Inc. ... manual

Usable Security

· 9 - 4 AIA Health Cancer, AIA CI Plus, AIA H&S Extra AIA HB Extra

A Architext · Baani Singh, AIA Past-President: Pasquale Marchese, AIA AIA NYS Director Pasquale Marchese, AIA Jeffrey Morris, AIA (through 2016) Daniel Wilson, AIA (through 2017)

Usable Past

AIA Northern Virginia News D. Weaver, AIA AIA Virginia Directors John A. Burns, FAIA Karen M. Conkey, AIA Eliza B. Engle, AIA Spencer E. Lepler, AIA Randall A. Mars AIA Kevin G. Sneed,

RE-USABLE WRITING BOOKS CATALOGUEgreenindiabooks.com/images/e-catalogue.pdfRE-USABLE WRITING BOOKS CATALOGUE MRP ` 199/-2/3 letters book MY RE-USABLE Manufacturer of Re-usable Writing

Introducing iPads to Older Adults (ASA/AIA 2014)

PROTECTION AIA Cl PLUS AIA PLUS AIA Cl PLUS 100% 44 80 $100 1 AIA Plus AIA Plus 2 80 AIA CI Plus 15,000 100,000 31 5)

Instantly Usable Video

Improving Usable Authentication

AIA Brooklyn Emerging Professionals A Committee of AIA

Create usable writing

Conf Usable

INDIANAPOLIS YEAR€¦ · celebrate the value of design. Rob Proctor, Jr., AIA, NCARB 2019 AIA Indianapolis President INDIANAPOLIS AIA AIA INDIANAPOLIS / YEAR IN REVIEW 2019 . AIA

Cisco ASA 5505, ASA 5510, ASA 5520, ASA 5540, ASA 5550, ASA

Designing Usable Systems

Usable Content

MAR 2016 - AIA MinnesotaMATRIX AIA Minnesota MAR 2016 3 CHAPTER UPDATES AIA Minneapolis AIA Minneapolis President, Mike Schellin, AIA mschellin@kodet.com STRIKE FORCE BOWLING EVENT

Usable Presentation Design