0
Kate Finn & Jeff Johnson, Wiser Usability, Inc.
How to Make Sure
Your Website Is Usable
2
Definitions
 “Older Adults” (OAs) = people 50+
 Usability: How easy it is for something's intended
users to successful...
3
Basic Premises
“Design for Older Adults, and you design for almost
everyone else.” [Alan Newell]
 Poor usability affect...
4
Basic Premises (cont’d)
Websites designed to give OAs same quality of UX would see least
35% more business from them, ba...
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
...
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
AI...
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
Pu...
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: ...
9
Tech Can Be Transformative…
 Huge potential benefit of usable interfaces to OAs:
 Less tech-literate
 Socially isolat...
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 ...
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 t...
12
What about
WCAG 2.0 and Section 508?
AIA 2014: How to Make Sure Your Website Is Usable
13
Designers: Is this Really Us?
 Tend to design for young and middle-aged people;
rarely consider the challenges which t...
14
 User-Centered Design
 Participatory Design
 Empathic Design
 Design Thinking
 Focus Groups
 Ethnographic Studies...
15
Value of Face-to-Face Encounters
 Engineers and designers often have little personal
experience with OAs.
 Designers ...
16AIA 2014: How to Make Sure Your Website Is Usable
17
Hardening of the Categories
 Today’s YAs not all techno-whizzes now.
 Technology will continue to develop rapidly.
 ...
18
Studies on aging are particularly subject to
confounding effects. [Reddy, 2012]
Individual Differences
AIA 2014: How to...
19
Individual Differences
 Aging is a continuous process
 Change is not linear, or uniform
 Effects of aging are highly...
20
Individual Differences
Age is just a number!
 Age
 Ability
 Aptitude
 Attitude [Chisnell & Redish, 2004-2005]
AIA 2...
21
• Visual
• Auditory
• Motor
• Cognitive
• Affective/Attitudinal
Age-Related Changes
& Characteristics
AIA 2014: How to ...
22
Normal Age-Related Vision Changes
 Decreased ability to focus close (presbyopia)
  need for reading glasses
 Lower ...
23
Normal Age-Related Vision Changes
 Normal
 Presbyopia
(blur)
AIA 2014: How to Make Sure Your Website Is Usable
 Glar...
24
Age-Related Vision Disorders
 Lens yellowing (common cateract)
 Glaucoma
 Macular Degeneration
 Cataracts (less com...
25
Age-Related Vision Disorders
AIA 2014: How to Make Sure Your Website Is Usable
Normal
Glaucoma
Lens
Yellowing
Macular
D...
26
Age-Related High-Level
Visual Perception Deficits
 More difficulty reading moving text
 More likely to lose track of ...
27
Visual Search Slows with Age
AIA 2014: How to Make Sure Your Website Is Usable
28
Auditory
Harder to:
 Filter out background sounds
 Localize sounds
 Understand fast speech
 Detect high-pitched sou...
29
Motor
 Reduced fine-motor control
 Reduced hand-eye coordination
 Slower movement
 Stiffness
 Increase in hand tre...
30
Motor (continued)
 Difficulty grasping/manipulating small objects
 Difficulty with continuous movements
 E.g., click...
31
Struggles to Select “Kenya” from
Pull-Right Menus
AIA 2014: How to Make Sure Your Website Is Usable
32
Road Scholar Menus: 2012 vs. 2013
AIA 2014: How to Make Sure Your Website Is Usable
33
US Adults with Fine Motor, Vision,
or Hearing Impairments
AIA 2014: How to Make Sure Your Website Is Usable
0
10
20
30
...
34
Cognition
 Reduced short-term memory/attention span
 Difficulty keeping track of task-status
 Harder to concentrate;...
35
“At this point… I would call them.
This is so overwhelming! … Help!”
AIA 2014: How to Make Sure Your Website Is Usable
36
Affective/Attitudinal
 Less comfortable with technology
 Risk averse
 Strongly prefer familiar paths over efficiency...
37
Frustrated; wants to quit task:
“I would screw this.”
AIA 2014: How to Make Sure Your Website Is Usable
38
Older Adults Execute Computer
Tasks More Slowly & Succeed Less
Contributing factors:
 Slower cognition
 Slower or fau...
39
Overlapping Usability Issues
 Populations w similar usability issues as OAs
 Low vision or other impairments
 Second...
40
• Graphic/Visual Design
• Ergonomics
• Navigation, Focus, Guidance
• Content, Writing
• Accessibility
Guidelines
AIA 20...
41
Guidelines: Graphic/Visual Design
 Simplify: remove unnecessary visual elements
 Avoid purely decorative graphics; th...
42
Display text with high contrast
to background
AIA 2014: How to Make Sure Your Website Is Usable
43
Display text with high contrast
to background
AIA 2014: How to Make Sure Your Website Is Usable
44
Display text with high contrast
to background
AIA 2014: How to Make Sure Your Website Is Usable
45
Display text with high contrast
to background
AIA 2014: How to Make Sure Your Website Is Usable
46
Display text with high contrast
to background
AIA 2014: How to Make Sure Your Website Is Usable
47
Avoid Tiny Fonts;
Provide Visible Way to Resize
AIA 2014: How to Make Sure Your Website Is Usable
48
Avoid Tiny Fonts;
Provide Visible Way to Resize
AIA 2014: How to Make Sure Your Website Is Usable
49
Avoid Tiny Fonts;
Provide Visible Way to Resize
AIA 2014: How to Make Sure Your Website Is Usable
50
Guidelines: Ergonomics
 Make click-targets large & space them apart
 Controls accept clicks anywhere, including label...
51
Make Click-Targets Large;
Controls Accept Clicks Anywhere
AIA 2014: How to Make Sure Your Website Is Usable
52
Make Click-Targets Large;
Controls Accept Clicks Anywhere
AIA 2014: How to Make Sure Your Website Is Usable
53
Make Click-Targets Large;
Controls Accept Clicks Anywhere
AIA 2014: How to Make Sure Your Website Is Usable
54
Guidelines:
Navigation, Focus, Guidance
 Focus attention on important info & calls to action
 Remove non-essential fu...
55
Focus Attention on Important
Info & Calls to Action
AIA 2014: How to Make Sure Your Website Is Usable
56
Focus Attention on Important
Info & Calls to Action
AIA 2014: How to Make Sure Your Website Is Usable
57
Focus Attention on Important
Info & Calls to Action
AIA 2014: How to Make Sure Your Website Is Usable
58
Provide Clear Link to Home
from All Other Pages
AIA 2014: How to Make Sure Your Website Is Usable
59
Provide Clear Link to Home
from All Other Pages
AIA 2014: How to Make Sure Your Website Is Usable
60
Guidelines: Content, Writing
 Use plain language
 Avoid technical jargon, abbreviations, acronyms
 Minimize the amou...
61
Use Plain Language;
Avoid Technical Jargon
AIA 2014: How to Make Sure Your Website Is Usable
62
Use Plain Language;
Avoid Technical Jargon
AIA 2014: How to Make Sure Your Website Is Usable
63
Use Plain Language;
Avoid Technical Jargon
AIA 2014: How to Make Sure Your Website Is Usable
64
Use Plain Language;
Avoid Technical Jargon
AIA 2014: How to Make Sure Your Website Is Usable
65
Guidelines: Accessibility
 Images should include alt and title text
 Code lists as HTML lists, e.g., <ul> or <ol>
 S...
66
Thank You!
 WiserUsability.com
 408.806.8451
 kfinn@wiserusability.com
AIA 2014: How to Make Sure Your Website Is Us...
Upcoming SlideShare
Loading in...5
×

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

314

Published 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 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.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
314
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
10
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

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

  1. 1. Kate Finn & Jeff Johnson, Wiser Usability, Inc. How to Make Sure Your Website Is Usable
  2. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 12 What about WCAG 2.0 and Section 508? AIA 2014: How to Make Sure Your Website Is Usable
  13. 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. 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. 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. 16. 16AIA 2014: How to Make Sure Your Website Is Usable
  17. 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. 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. 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. 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. 21 • Visual • Auditory • Motor • Cognitive • Affective/Attitudinal Age-Related Changes & Characteristics AIA 2014: How to Make Sure Your Website Is Usable
  22. 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. 23 Normal Age-Related Vision Changes  Normal  Presbyopia (blur) AIA 2014: How to Make Sure Your Website Is Usable  Glare Sensitivity
  24. 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. 25 Age-Related Vision Disorders AIA 2014: How to Make Sure Your Website Is Usable Normal Glaucoma Lens Yellowing Macular Degen- eration
  26. 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. 27 Visual Search Slows with Age AIA 2014: How to Make Sure Your Website Is Usable
  28. 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. 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. 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. 31 Struggles to Select “Kenya” from Pull-Right Menus AIA 2014: How to Make Sure Your Website Is Usable
  32. 32. 32 Road Scholar Menus: 2012 vs. 2013 AIA 2014: How to Make Sure Your Website Is Usable
  33. 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. 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. 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. 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. 37 Frustrated; wants to quit task: “I would screw this.” AIA 2014: How to Make Sure Your Website Is Usable
  38. 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. 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. 40 • Graphic/Visual Design • Ergonomics • Navigation, Focus, Guidance • Content, Writing • Accessibility Guidelines AIA 2014: How to Make Sure Your Website Is Usable
  41. 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. 42 Display text with high contrast to background AIA 2014: How to Make Sure Your Website Is Usable
  43. 43. 43 Display text with high contrast to background AIA 2014: How to Make Sure Your Website Is Usable
  44. 44. 44 Display text with high contrast to background AIA 2014: How to Make Sure Your Website Is Usable
  45. 45. 45 Display text with high contrast to background AIA 2014: How to Make Sure Your Website Is Usable
  46. 46. 46 Display text with high contrast to background AIA 2014: How to Make Sure Your Website Is Usable
  47. 47. 47 Avoid Tiny Fonts; Provide Visible Way to Resize AIA 2014: How to Make Sure Your Website Is Usable
  48. 48. 48 Avoid Tiny Fonts; Provide Visible Way to Resize AIA 2014: How to Make Sure Your Website Is Usable
  49. 49. 49 Avoid Tiny Fonts; Provide Visible Way to Resize AIA 2014: How to Make Sure Your Website Is Usable
  50. 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. 51 Make Click-Targets Large; Controls Accept Clicks Anywhere AIA 2014: How to Make Sure Your Website Is Usable
  52. 52. 52 Make Click-Targets Large; Controls Accept Clicks Anywhere AIA 2014: How to Make Sure Your Website Is Usable
  53. 53. 53 Make Click-Targets Large; Controls Accept Clicks Anywhere AIA 2014: How to Make Sure Your Website Is Usable
  54. 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. 55 Focus Attention on Important Info & Calls to Action AIA 2014: How to Make Sure Your Website Is Usable
  56. 56. 56 Focus Attention on Important Info & Calls to Action AIA 2014: How to Make Sure Your Website Is Usable
  57. 57. 57 Focus Attention on Important Info & Calls to Action AIA 2014: How to Make Sure Your Website Is Usable
  58. 58. 58 Provide Clear Link to Home from All Other Pages AIA 2014: How to Make Sure Your Website Is Usable
  59. 59. 59 Provide Clear Link to Home from All Other Pages AIA 2014: How to Make Sure Your Website Is Usable
  60. 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. 61 Use Plain Language; Avoid Technical Jargon AIA 2014: How to Make Sure Your Website Is Usable
  62. 62. 62 Use Plain Language; Avoid Technical Jargon AIA 2014: How to Make Sure Your Website Is Usable
  63. 63. 63 Use Plain Language; Avoid Technical Jargon AIA 2014: How to Make Sure Your Website Is Usable
  64. 64. 64 Use Plain Language; Avoid Technical Jargon AIA 2014: How to Make Sure Your Website Is Usable
  65. 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. 66 Thank You!  WiserUsability.com  408.806.8451  kfinn@wiserusability.com AIA 2014: How to Make Sure Your Website Is Usable
  1. A particular slide catching your eye?

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

×