0
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
Making Websites More Usable
by Older Adults
•
•
•
•

Background
The Older Adult Web User
Guidelines
Website Usability Eval...
Background
Accessibility vs. Usability
• Who’s Online?
• What’s Everyone Doing
Online?
• Why Does Usability Matter?
•

Wis...
Accessibility vs. Usability

Copyright © Darrell Chaddock,
darrellchaddock.com

Wiser Usability AIA 2013
Accessibility vs. Usability
Accessibility
Extent to which content is
accessible, to widest possible
audience.
Websites = “...
Percent US Adults Online, by
Age
97
91
77

53

1829
3049
5064
65+

Wiser Usability AIA 2013

Source: Pew Internet & Americ...
What’s Everyone Doing Online?

Wiser Usability AIA 2013

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

90 - 99

Search

80 - 89

Health...
Online-Only Activities










Shopping (Amazon)
Making travel reservations (Travelocity,
Expedia)
Taking online ...
Why Does Usability Matter?






Aging: in the cards for everyone

Internet’s universal usefulness
Better usability = ...
The Older Adult Web User
Age-Related Changes
• Impact on Web Usage
• Behavioral Characteristics
•

Wiser Usability AIA 201...
Fine Motor, Vision, and
Hearing, Impairments among
US Adults
% of Adults in US with Fine Motor, Vision, or Hearing, Impair...
Age-Related Changes: Vision








Age-related colorblindness
Narrower field of vision
Reduced color & contrast se...
Age-Related Changes: Vision
No Vision Impairment

Wiser Usability AIA 2013
Age-Related Changes: Vision
Cataracts

Wiser Usability AIA 2013
Age-Related Changes: Vision
Macular Degeneration

Wiser Usability AIA 2013
Age-Related Changes: Vision
Glaucoma

Wiser Usability AIA 2013
Age-Related Changes: Vision
No Blur

Wiser Usability AIA 2013
Age-Related Changes: Vision
Slight Blur

Wiser Usability AIA 2013
Age-Related Changes: Vision
Normal Glare Sensitivity

Wiser Usability AIA 2013
Age-Related Changes: Vision
Increased Glare Sensitivity

Wiser Usability AIA 2013
Age-Related Changes: Vision
No Colorblindness

Wiser Usability AIA 2013
Age-Related Changes: Vision
Colorblindness

Wiser Usability AIA 2013
Age-Related Changes: Vision
Normal Contrast Sensitivity

Wiser Usability AIA 2013
Age-Related Changes: Vision
Low Contrast Sensitivity

Wiser Usability AIA 2013
Age-Related Changes: Motor
Control





Difficulty grasping/manipulating small objects
Reduced eye-hand coordination
S...
Age-Related Changes:
Cognition








Reduced short-term memory
Harder to concentrate
Longer learning times
Longer...
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 h...
Impacts on Web Use
Age-Related Change

Impact on Web Use

Lower contrast sensitivity and
color perception
Reduced dexterit...
General Attitudes, Behaviors
of Older Web Users




Less computer experience
“Change blindness”
“Risk averse”




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

...
Guidelines: Graphic/Visual Design










Display text in dark colors on light, non-patterned
backgrounds
Avoid ti...
Guidelines: Graphic/Visual Design










Display text in dark colors on light, non-patterned
backgrounds
Avoid ti...
Guidelines: Graphic/Visual Design










Display text in dark colors on light, non-patterned
backgrounds
Avoid ti...
Guidelines: Ergonomics





On-screen controls should accept clicks
anywhere on the control, including the label
Make c...
Guidelines: Ergonomics





On-screen controls should accept clicks
anywhere on the control, including the label
Make c...
Guidelines:
Navigation, Focus, Guidance










Provide clear link to Home from all other pages
Focus attention o...
Guidelines:
Navigation, Focus, Guidance










Provide clear link to Home from all other pages
Focus attention o...
Guidelines: Content, Writing



Use plain language; avoid technical jargon
Minimize the amount of text








Bre...
Guidelines: Content, Writing



Use plain language; avoid technical jargon
Minimize the amount of text








Bre...
Guidelines: General Accessibility




Images should include alt and title text
Code lists as HTML lists, e.g., <ul> or ...
Guidelines: Resources


www.WiserUsability.com/Resources/







Wiser Usability’s Design Guidelines for Usable
Webs...
Wiser Usability AIA 2013
Website Usability
Evaluation

Types of Website Evaluation
• Testing on Older Adults
•

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 ha...
Types of Website Evaluation



Web Analytics
Usability Tests


Before, during, or after development
 With

paper mock-...
Usability Test: Steps





Identify goals of website, goals for test
Identify intended user population
Develop represe...
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” (...
Recommendations for
Conducting
Usability Tests with Older Adults

Test at Participant’s site if possible
 Be sensitive to...
Thank You!




WiserUsability.com
408.806.8451
kfinn@wiserusability.c
om











Wiser Usability AIA 2013

Us...
Upcoming SlideShare
Loading in...5
×

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

484

Published on

Presented at American Society on Aging's "Aging in America" Conference, March 2013, Chicago, Illinois.

Published in: Design, Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
484
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
24
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

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

  1. 1. Making Websites More Usable by Older Adults Kate Finn & Jeff Johnson, Wiser Usability, Inc.
  2. 2. Wiser Usability AIA 2013 Copyright 2012 Bryan Nye, www.NyeHumor.com
  3. 3. Making Websites More Usable by Older Adults • • • • Background The Older Adult Web User Guidelines Website Usability Evaluation Wiser Usability AIA 2013
  4. 4. Background Accessibility vs. Usability • Who’s Online? • What’s Everyone Doing Online? • Why Does Usability Matter? • Wiser Usability AIA 2013
  5. 5. Accessibility vs. Usability Copyright © Darrell Chaddock, darrellchaddock.com Wiser Usability AIA 2013
  6. 6. Accessibility vs. Usability Accessibility Extent to which content is accessible, to widest possible audience. Websites = “spaces in the public domain.” Required by US law to be accessible Often contained in underlying code Usability How easy it is to successfully use a website Not required by law (but a good idea!) Often more obvious, selfevident 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. Wiser Usability AIA 2013
  7. 7. Percent US Adults Online, by Age 97 91 77 53 1829 3049 5064 65+ Wiser Usability AIA 2013 Source: Pew Internet & American Life Project Surveys, April 2000-April 2012
  8. 8. What’s Everyone Doing Online? Wiser Usability AIA 2013 Copyright 2012, Jack Zylkin, www.usbtypewriter.com
  9. 9. Common Online Activities, by Age Activity 18-33 34-45 46-55 56-64 65-73 74+ Email 90 - 99 Search 80 - 89 Health Info 70 - 79 News 60 - 69 Travel 50 - 59 Gov’t 40 - 49 Key: % of Online Users Engaging in Activity Purchases Source: Pew Internet & American Life Project Surveys, April 2000-April 2012 Wiser Usability AIA 2013
  10. 10. 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
  11. 11. 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
  12. 12. The Older Adult Web User Age-Related Changes • Impact on Web Usage • Behavioral Characteristics • Wiser Usability AIA 2013
  13. 13. Fine Motor, Vision, and Hearing, Impairments among US Adults % of Adults in US with Fine Motor, Vision, or Hearing, Impairments 14.5 Age 15.2 5.4 9.3 6.8 .6 1.8 7.5 1.5 Wiser Usability AIA 2013 Source: Summary Health Statistics for U.S. Adults: National Health Interview Survey, 2010
  14. 14. 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, timeconsuming Wiser Usability AIA 2013
  15. 15. Age-Related Changes: Vision No Vision Impairment Wiser Usability AIA 2013
  16. 16. Age-Related Changes: Vision Cataracts Wiser Usability AIA 2013
  17. 17. Age-Related Changes: Vision Macular Degeneration Wiser Usability AIA 2013
  18. 18. Age-Related Changes: Vision Glaucoma Wiser Usability AIA 2013
  19. 19. Age-Related Changes: Vision No Blur Wiser Usability AIA 2013
  20. 20. Age-Related Changes: Vision Slight Blur Wiser Usability AIA 2013
  21. 21. Age-Related Changes: Vision Normal Glare Sensitivity Wiser Usability AIA 2013
  22. 22. Age-Related Changes: Vision Increased Glare Sensitivity Wiser Usability AIA 2013
  23. 23. Age-Related Changes: Vision No Colorblindness Wiser Usability AIA 2013
  24. 24. Age-Related Changes: Vision Colorblindness Wiser Usability AIA 2013
  25. 25. Age-Related Changes: Vision Normal Contrast Sensitivity Wiser Usability AIA 2013
  26. 26. Age-Related Changes: Vision Low Contrast Sensitivity Wiser Usability AIA 2013
  27. 27. Age-Related Changes: Motor Control     Difficulty grasping/manipulating small objects Reduced eye-hand coordination Stiffness Increase in hand tremor Wiser Usability AIA 2013
  28. 28. 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
  29. 29. Age-Related Changes: Cognition Wiser Usability AIA 2013
  30. 30. Age-Related Changes: Cognition Wiser Usability AIA 2013
  31. 31. Age-Related Changes: Cognition Wiser Usability AIA 2013
  32. 32. Age-Related Changes: Hearing    Harder to filter out background sounds Difficult to localize sounds Harder to detect high-pitched sounds Everyone: 8 kHz Under 50: 12 kHz Wiser Usability AIA 2013 Under 20: 16 kHz
  33. 33. Impacts on Web Use Age-Related Change Impact on Web Use Lower contrast sensitivity and color perception Reduced dexterity and fine motor control More distractible Harder to see links and read text Harder to select small targets, move pointer accurately Harder to filter out extra stimuli Harder to learn and remember new skills and info Harder to master novel websites, interactions, technologies Compounding of above impacts Combinations of above changes Wiser Usability AIA 2013
  34. 34. General Attitudes, Behaviors of 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
  35. 35. Guidelines Graphic/Visual Design • Ergonomics • Navigation, Focus, Guidance • Content, Writing • General Accessibility • Wiser Usability AIA 2013
  36. 36. 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 sequences Wiser Usability AIA 2013
  37. 37. 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 sequences Wiser Usability AIA 2013
  38. 38. 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 sequences Wiser Usability AIA 2013
  39. 39. 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
  40. 40. 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
  41. 41. 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  Wiser Usability AIA 2013
  42. 42. 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  Wiser Usability AIA 2013
  43. 43. 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 content Wiser Usability AIA 2013
  44. 44. 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 content Wiser Usability AIA 2013
  45. 45. 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
  46. 46. 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
  47. 47. Wiser Usability AIA 2013
  48. 48. Website Usability Evaluation Types of Website Evaluation • Testing on Older Adults • Wiser Usability AIA 2013
  49. 49. Types of Website Evaluation    Web Analytics Usability Tests Expert Usability Review Wiser Usability AIA 2013
  50. 50. 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  Goals through site  Satisfaction   Usability Tests Expert Usability Review Wiser Usability AIA 2013
  51. 51. 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
  52. 52. 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 improvements Wiser Usability AIA 2013
  53. 53. Example: Testing Paper Prototype Wiser Usability AIA 2013
  54. 54. Example: Testing Finished Website Wiser Usability AIA 2013
  55. 55. Example: Testing Finished Website Wiser Usability AIA 2013
  56. 56. 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
  57. 57. Recommendations for Conducting Usability 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 
  58. 58. Thank You!    WiserUsability.com 408.806.8451 kfinn@wiserusability.c om        Wiser Usability AIA 2013 User/Usage Studies Focus Groups Usability Testing Usability Review Accessibility Review Website Design UI/UX Training
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×