Making Websites More Usable by Older Adults (ASA/AIA 2013)
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

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

on

  • 302 views

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

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

Statistics

Views

Total Views
302
Views on SlideShare
302
Embed Views
0

Actions

Likes
0
Downloads
8
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

  • 1. Making Websites More Usable by Older Adults Kate Finn & Jeff Johnson, Wiser Usability, Inc.
  • 2. Wiser Usability AIA 2013 Copyright 2012 Bryan Nye, www.NyeHumor.com
  • 3. Making Websites More Usable by Older Adults • • • • Background The Older Adult Web User Guidelines Website Usability Evaluation Wiser Usability AIA 2013
  • 4. Background Accessibility vs. Usability • Who’s Online? • What’s Everyone Doing Online? • Why Does Usability Matter? • Wiser Usability AIA 2013
  • 5. Accessibility vs. Usability Copyright © Darrell Chaddock, darrellchaddock.com Wiser Usability AIA 2013
  • 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. 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. What’s Everyone Doing Online? Wiser Usability AIA 2013 Copyright 2012, Jack Zylkin, www.usbtypewriter.com
  • 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. 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. 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. The Older Adult Web User Age-Related Changes • Impact on Web Usage • Behavioral Characteristics • Wiser Usability AIA 2013
  • 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. 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. Age-Related Changes: Vision No Vision Impairment Wiser Usability AIA 2013
  • 16. Age-Related Changes: Vision Cataracts Wiser Usability AIA 2013
  • 17. Age-Related Changes: Vision Macular Degeneration Wiser Usability AIA 2013
  • 18. Age-Related Changes: Vision Glaucoma Wiser Usability AIA 2013
  • 19. Age-Related Changes: Vision No Blur Wiser Usability AIA 2013
  • 20. Age-Related Changes: Vision Slight Blur Wiser Usability AIA 2013
  • 21. Age-Related Changes: Vision Normal Glare Sensitivity Wiser Usability AIA 2013
  • 22. Age-Related Changes: Vision Increased Glare Sensitivity Wiser Usability AIA 2013
  • 23. Age-Related Changes: Vision No Colorblindness Wiser Usability AIA 2013
  • 24. Age-Related Changes: Vision Colorblindness Wiser Usability AIA 2013
  • 25. Age-Related Changes: Vision Normal Contrast Sensitivity Wiser Usability AIA 2013
  • 26. Age-Related Changes: Vision Low Contrast Sensitivity Wiser Usability AIA 2013
  • 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. 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. Age-Related Changes: Cognition Wiser Usability AIA 2013
  • 30. Age-Related Changes: Cognition Wiser Usability AIA 2013
  • 31. Age-Related Changes: Cognition Wiser Usability AIA 2013
  • 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. 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. 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. Guidelines Graphic/Visual Design • Ergonomics • Navigation, Focus, Guidance • Content, Writing • General Accessibility • Wiser Usability AIA 2013
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. Wiser Usability AIA 2013
  • 48. Website Usability Evaluation Types of Website Evaluation • Testing on Older Adults • Wiser Usability AIA 2013
  • 49. Types of Website Evaluation    Web Analytics Usability Tests Expert Usability Review Wiser Usability AIA 2013
  • 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. 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. 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. Example: Testing Paper Prototype Wiser Usability AIA 2013
  • 54. Example: Testing Finished Website Wiser Usability AIA 2013
  • 55. Example: Testing Finished Website Wiser Usability AIA 2013
  • 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. 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. 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