How to Make Sure Your Website Is Usable (ASA/AIA 2014)

  • 183 views
Uploaded on

Presented on March 11, 2014 at Aging Society of America's "Aging in America" conference in San Diego. Poor usability affects almost everyone, but affects Older Adults (OAs) more severely, more …

Presented on March 11, 2014 at Aging Society of America's "Aging in America" conference in San Diego. Poor usability affects almost everyone, but affects Older Adults (OAs) more severely, more frequently. We discuss age-related changes and characteristics (visual, auditory, motor, cognitive, affective/attitudinal), and show examples of how these changes impact the user's experience. We recommend guidelines to follow for maximizing the usability of the web or app experience, along with examples of what to do and what to avoid doing.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
183
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
5
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Kate Finn & Jeff Johnson, Wiser Usability, Inc. How to Make Sure Your Website Is Usable
  • 2. 2 Definitions  “Older Adults” (OAs) = people 50+  Usability: How easy it is for something's intended users to successfully use it for its intended purpose.  Design for All/Universal Design: Designing for usability by everyone, regardless of age or ability. AIA 2014: How to Make Sure Your Website Is Usable
  • 3. 3 Basic Premises “Design for Older Adults, and you design for almost everyone else.” [Alan Newell]  Poor usability affects almost everyone, but affects OAs more severely, more frequently AIA 2014: How to Make Sure Your Website Is Usable Users 21-55 Users 65+ Vision 82% 95% Dexterity 73% 95% Memory 49% 63%
  • 4. 4 Basic Premises (cont’d) Websites designed to give OAs same quality of UX would see least 35% more business from them, based on higher success rate.” [Seniors on the Web, 2nd Edition, 2012] Compared to 2001, OAs better at using websites (more successful, faster):  Faster internet connections: easier on short-term memory, increased satisfaction  Website designs generally better (really!)  OAs as a group: more web experience, higher skill level AIA 2014: How to Make Sure Your Website Is Usable
  • 5. 5 Source: US Census Bureau #s of US Adult Population, by Age AIA 2014: How to Make Sure Your Website Is Usable 0 20 40 60 80 100 120 140 2015 2020 2025 2030 2035 Millions 18 to 44 45 to 64 65 to 84 85+ Year
  • 6. 6 0 20 40 60 80 100 120 2000 2002 2004 2006 2008 2010 2012 2014 % Year 18-29 30-49 50-64 65+ % US Adults Online, by Age AIA 2014: How to Make Sure Your Website Is Usable 98 92 83 56 Source: PewInternet.org
  • 7. 7 Common Online Activities, by Age Activity 18-33 34-45 46-55 56-64 65-73 74+ Email Search Health Info News 4 4 4 4 4 5 Purchases 5 6 6 5 6 4 Travel 7 5 5 6 5 6 Banking 6 4 7 7 7 7 AIA 2014: How to Make Sure Your Website Is Usable 1 2 3 Source: PewInternet.org
  • 8. 8 Mobile Device Ownership 0 20 40 60 80 100 eReader Tablets Smart Phone Cell Phone % Device 18-29 30-49 50-64 65+ Source: PewInternet.org AIA 2014: How to Make Sure Your Website Is Usable
  • 9. 9 Tech Can Be Transformative…  Huge potential benefit of usable interfaces to OAs:  Less tech-literate  Socially isolated  Poor access to transportation  Little tech support  “A Mac laptop opened up the world to me, right here, from my kitchen table. This is a blessing because my mobility is now extremely limited due to my physical disability.” [NY Times online reader] AIA 2014: How to Make Sure Your Website Is Usable
  • 10. 10 …but All Is Not Well  Why do they have to make the font so small?  Why does everyone think light gray text is a good idea these days?  Too bright!…My eyes have aged to the point where bright, white backgrounds impair my ability to view content.  The thin type is hard to read for those whose eyesight is not that great.  I can’t read the text, it’s too tiny!  It’s curious that Apple didn’t allow users to maintain the old appearance as an option.  How can I make the font bigger? I can’t see it! AIA 2014: How to Make Sure Your Website Is Usable
  • 11. 11 We Know How to Do It Right… So Why Don't We? “Can't they make setups that have ‘universal design’ tech elements, like the Jitterbug, to make access and use simpler for everyone?”  Aging not a “sexy” topic  OAs seldom participate in design  Designers often design for people like themselves  Time and $ limitations (“Get an MBA”) AIA 2014: How to Make Sure Your Website Is Usable
  • 12. 12 What about WCAG 2.0 and Section 508? AIA 2014: How to Make Sure Your Website Is Usable
  • 13. 13 Designers: Is this Really Us?  Tend to design for young and middle-aged people; rarely consider the challenges which their systems will present to older people. [Newell, 2006]  Tend to design for people somewhat like themselves, unless forcibly restrained. [Hawthorn, 2009]  Seem to design products for themselves. How about delighting the customer? [Orlov, 2013] AIA 2014: How to Make Sure Your Website Is Usable
  • 14. 14  User-Centered Design  Participatory Design  Empathic Design  Design Thinking  Focus Groups  Ethnographic Studies  Usability Testing  Personas Design Approaches Design Tools/Techniques AIA 2014: How to Make Sure Your Website Is Usable “We Have the Technology!”
  • 15. 15 Value of Face-to-Face Encounters  Engineers and designers often have little personal experience with OAs.  Designers tend to discount pure data on OAs.  OAs seldom included in participatory design, usability tests.  Designers tend to over-estimate OA tech ability until they see it; then they tend to under-estimate it. AIA 2014: How to Make Sure Your Website Is Usable
  • 16. 16AIA 2014: How to Make Sure Your Website Is Usable
  • 17. 17 Hardening of the Categories  Today’s YAs not all techno-whizzes now.  Technology will continue to develop rapidly.  Most of us will experience age-related declines.  Ability to generalize, willingness to learn new skills decline with age. AIA 2014: How to Make Sure Your Website Is Usable
  • 18. 18 Studies on aging are particularly subject to confounding effects. [Reddy, 2012] Individual Differences AIA 2014: How to Make Sure Your Website Is Usable
  • 19. 19 Individual Differences  Aging is a continuous process  Change is not linear, or uniform  Effects of aging are highly idiosyncratic  As group’s average age increases:  Rates of change in abilities increase  Ranges of abilities increase AIA 2014: How to Make Sure Your Website Is Usable
  • 20. 20 Individual Differences Age is just a number!  Age  Ability  Aptitude  Attitude [Chisnell & Redish, 2004-2005] AIA 2014: How to Make Sure Your Website Is Usable
  • 21. 21 • Visual • Auditory • Motor • Cognitive • Affective/Attitudinal Age-Related Changes & Characteristics AIA 2014: How to Make Sure Your Website Is Usable
  • 22. 22 Normal Age-Related Vision Changes  Decreased ability to focus close (presbyopia)   need for reading glasses  Lower light sensitivity  need for brighter lighting  Increased sensitivity to glare  Reduced sensitivity to color & contrast  Especially for blue-green wavelengths  Narrower field of vision  Slower to adapt to changes in lighting  Slower to re-focus with changes in distance AIA 2014: How to Make Sure Your Website Is Usable
  • 23. 23 Normal Age-Related Vision Changes  Normal  Presbyopia (blur) AIA 2014: How to Make Sure Your Website Is Usable  Glare Sensitivity
  • 24. 24 Age-Related Vision Disorders  Lens yellowing (common cateract)  Glaucoma  Macular Degeneration  Cataracts (less common type)  Diabetic Retinopathy AIA 2014: How to Make Sure Your Website Is Usable
  • 25. 25 Age-Related Vision Disorders AIA 2014: How to Make Sure Your Website Is Usable Normal Glaucoma Lens Yellowing Macular Degen- eration
  • 26. 26 Age-Related High-Level Visual Perception Deficits  More difficulty reading moving text  More likely to lose track of screen-pointer  Slower on visual search tasks: spotting target amid distractors AIA 2014: How to Make Sure Your Website Is Usable
  • 27. 27 Visual Search Slows with Age AIA 2014: How to Make Sure Your Website Is Usable
  • 28. 28 Auditory Harder to:  Filter out background sounds  Localize sounds  Understand fast speech  Detect high-pitched sounds AIA 2014: How to Make Sure Your Website Is Usable Everyone: 8 kHz Under 20: 16 kHz Under 50: 12 kHz
  • 29. 29 Motor  Reduced fine-motor control  Reduced hand-eye coordination  Slower movement  Stiffness  Increase in hand tremor AIA 2014: How to Make Sure Your Website Is Usable
  • 30. 30 Motor (continued)  Difficulty grasping/manipulating small objects  Difficulty with continuous movements  E.g., click-drag, tap-drag, tap-hold, draw  Problems executing coordinated gestures  E.g., pinch, spread, double-tap  E.g., one- vs. two- vs. three-finger drag  Increased variances in movementslower reliability  Increased risk of unintentional click or touch AIA 2014: How to Make Sure Your Website Is Usable
  • 31. 31 Struggles to Select “Kenya” from Pull-Right Menus AIA 2014: How to Make Sure Your Website Is Usable
  • 32. 32 Road Scholar Menus: 2012 vs. 2013 AIA 2014: How to Make Sure Your Website Is Usable
  • 33. 33 US Adults with Fine Motor, Vision, or Hearing Impairments AIA 2014: How to Make Sure Your Website Is Usable 0 10 20 30 40 Fine Motor Vision Hearing 18-44 45-64 65+ Age Source: Summary Health Statistics for U.S. Adults: National Health Interview Survey, 2010 % 0.6 1.8 1.5 6.8 9.3 5.4 15.2 14.5 7.5
  • 34. 34 Cognition  Reduced short-term memory/attention span  Difficulty keeping track of task-status  Harder to concentrate; more distractable  Longer learning times; more repetition required  Less generalization (skill transfer) between situations  More difficulty retrieving words  Reduced ability to “multi-task” (time-share)  More susceptible to “change blindness”  More easily overwhelmed AIA 2014: How to Make Sure Your Website Is Usable
  • 35. 35 “At this point… I would call them. This is so overwhelming! … Help!” AIA 2014: How to Make Sure Your Website Is Usable
  • 36. 36 Affective/Attitudinal  Less comfortable with technology  Risk averse  Strongly prefer familiar paths over efficiency  Afraid of “breaking something”  Tend to read everything on screen before acting  Fear of embarrassment  Often get frustrated, give up  Tendency to assign blame  Either to self, or to application  Reluctance to give personal info AIA 2014: How to Make Sure Your Website Is Usable
  • 37. 37 Frustrated; wants to quit task: “I would screw this.” AIA 2014: How to Make Sure Your Website Is Usable
  • 38. 38 Older Adults Execute Computer Tasks More Slowly & Succeed Less Contributing factors:  Slower cognition  Slower or faulty memory retrieval  Slower or inaccurate perception  (e.g., reading & pattern recognition)  Slower or shakier movement  Caution, hesitance, fear of “breaking it”  Combinations of above AIA 2014: How to Make Sure Your Website Is Usable
  • 39. 39 Overlapping Usability Issues  Populations w similar usability issues as OAs  Low vision or other impairments  Second language learners  Low literacy  Little technical experience AIA 2014: How to Make Sure Your Website Is Usable
  • 40. 40 • Graphic/Visual Design • Ergonomics • Navigation, Focus, Guidance • Content, Writing • Accessibility Guidelines AIA 2014: How to Make Sure Your Website Is Usable
  • 41. 41 Guidelines: Graphic/Visual Design  Simplify: remove unnecessary visual elements  Avoid purely decorative graphics; they distract  Consistent layout, labeling, & color between pages  Display text with high contrast to background  Avoid tiny fonts; provide visible way to resize text  Page layout should work even if text is enlarged  Display text in Mixed Case, NOT IN ALL CAPS  Avoid continuous animations & rolling text  Make links look distinct from non-links AIA 2014: How to Make Sure Your Website Is Usable
  • 42. 42 Display text with high contrast to background AIA 2014: How to Make Sure Your Website Is Usable
  • 43. 43 Display text with high contrast to background AIA 2014: How to Make Sure Your Website Is Usable
  • 44. 44 Display text with high contrast to background AIA 2014: How to Make Sure Your Website Is Usable
  • 45. 45 Display text with high contrast to background AIA 2014: How to Make Sure Your Website Is Usable
  • 46. 46 Display text with high contrast to background AIA 2014: How to Make Sure Your Website Is Usable
  • 47. 47 Avoid Tiny Fonts; Provide Visible Way to Resize AIA 2014: How to Make Sure Your Website Is Usable
  • 48. 48 Avoid Tiny Fonts; Provide Visible Way to Resize AIA 2014: How to Make Sure Your Website Is Usable
  • 49. 49 Avoid Tiny Fonts; Provide Visible Way to Resize AIA 2014: How to Make Sure Your Website Is Usable
  • 50. 50 Guidelines: Ergonomics  Make click-targets large & space them apart  Controls accept clicks anywhere, including label  Avoid walking (pull right) menus  Make menus open on click, not on hover  Don’t require click-hold; menu should stay open on click  Clearly indicate input focus  Highlight selection; links highlight on hover AIA 2014: How to Make Sure Your Website Is Usable
  • 51. 51 Make Click-Targets Large; Controls Accept Clicks Anywhere AIA 2014: How to Make Sure Your Website Is Usable
  • 52. 52 Make Click-Targets Large; Controls Accept Clicks Anywhere AIA 2014: How to Make Sure Your Website Is Usable
  • 53. 53 Make Click-Targets Large; Controls Accept Clicks Anywhere AIA 2014: How to Make Sure Your Website Is Usable
  • 54. 54 Guidelines: Navigation, Focus, Guidance  Focus attention on important info & calls to action  Remove non-essential functions, choices, links  Have very few calls-to-action on each page: 1 or 2  Provide clear link to Home from all other pages  Make site hierarchy shallow and broad  Make navigation consistant across pages  Show user’s position in multi-step sequence  Show current “breadcrumb” path on internal pages  Minimize vertical scrolling  Provide site map AIA 2014: How to Make Sure Your Website Is Usable
  • 55. 55 Focus Attention on Important Info & Calls to Action AIA 2014: How to Make Sure Your Website Is Usable
  • 56. 56 Focus Attention on Important Info & Calls to Action AIA 2014: How to Make Sure Your Website Is Usable
  • 57. 57 Focus Attention on Important Info & Calls to Action AIA 2014: How to Make Sure Your Website Is Usable
  • 58. 58 Provide Clear Link to Home from All Other Pages AIA 2014: How to Make Sure Your Website Is Usable
  • 59. 59 Provide Clear Link to Home from All Other Pages AIA 2014: How to Make Sure Your Website Is Usable
  • 60. 60 Guidelines: Content, Writing  Use plain language  Avoid technical jargon, abbreviations, acronyms  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, left-justified  Provide clear contact information  Provide text equivalents for non-text content AIA 2014: How to Make Sure Your Website Is Usable
  • 61. 61 Use Plain Language; Avoid Technical Jargon AIA 2014: How to Make Sure Your Website Is Usable
  • 62. 62 Use Plain Language; Avoid Technical Jargon AIA 2014: How to Make Sure Your Website Is Usable
  • 63. 63 Use Plain Language; Avoid Technical Jargon AIA 2014: How to Make Sure Your Website Is Usable
  • 64. 64 Use Plain Language; Avoid Technical Jargon AIA 2014: How to Make Sure Your Website Is Usable
  • 65. 65 Guidelines: 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 AIA 2014: How to Make Sure Your Website Is Usable
  • 66. 66 Thank You!  WiserUsability.com  408.806.8451  kfinn@wiserusability.com AIA 2014: How to Make Sure Your Website Is Usable