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

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 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
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
Users 21-55 Users 65+
Vision 82% 95%
Dexterity 73% 95%
Memory 49% 63%

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

5
Source: US Census Bureau
#s of US Adult Population, by Age
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
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
98
92
83
56
Source: PewInternet.org

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
1
2
3

8
Mobile Device Ownership
0
20
40
60
80
100
eReader Tablets Smart Phone Cell Phone
%
Device
18-29
30-49
50-64
65+

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]

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!

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”)

12
What about
WCAG 2.0 and Section 508?

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]

14
 User-Centered Design
 Participatory Design
 Empathic Design
 Design Thinking
 Focus Groups
 Ethnographic Studies
 Usability Testing
 Personas
Design Approaches Design Tools/Techniques
“We Have the Technology!”

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.

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.
 Most of us will experience age-related declines.
 Ability to generalize, willingness to learn new skills
decline with age.

18
Studies on aging are particularly subject to
confounding effects. [Reddy, 2012]
Individual Differences

19
 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

20
Age is just a number!
 Age
 Ability
 Aptitude
 Attitude [Chisnell & Redish, 2004-2005]

21
• Visual
• Auditory
• Motor
• Cognitive
• Affective/Attitudinal
Age-Related Changes
& Characteristics

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

23
Normal Age-Related Vision Changes
 Normal
 Presbyopia
(blur)
 Glare
Sensitivity

24
Age-Related Vision Disorders
 Lens yellowing (common cateract)
 Glaucoma
 Macular Degeneration
 Cataracts (less common type)
 Diabetic Retinopathy

25
Age-Related Vision Disorders
Normal
Glaucoma
Lens
Yellowing
Macular
Degen-
eration

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

27
Visual Search Slows with Age

28
Auditory
Harder to:
 Filter out background sounds
 Localize sounds
 Understand fast speech
 Detect high-pitched sounds
Everyone:
8 kHz
Under 20:
16 kHz
Under 50:
12 kHz

29
Motor
 Reduced fine-motor control
 Reduced hand-eye coordination
 Slower movement
 Stiffness
 Increase in hand tremor

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

31
Struggles to Select “Kenya” from
Pull-Right Menus

32
Road Scholar Menus: 2012 vs. 2013

33
US Adults with Fine Motor, Vision,
or Hearing Impairments
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
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

35
“At this point… I would call them.
This is so overwhelming! … Help!”

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

37
Frustrated; wants to quit task:
“I would screw this.”

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

39
Overlapping Usability Issues
 Populations w similar usability issues as OAs
 Low vision or other impairments
 Second language learners
 Low literacy
 Little technical experience

40
• Graphic/Visual Design
• Ergonomics
• Navigation, Focus, Guidance
• Content, Writing
• Accessibility
Guidelines

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

42
Display text with high contrast
to background

43
to background

44
to background

45
to background

46
to background

47
Avoid Tiny Fonts;
Provide Visible Way to Resize

48
Avoid Tiny Fonts;

49
Avoid Tiny Fonts;

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

51
Make Click-Targets Large;
Controls Accept Clicks Anywhere

52

53

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

55
Focus Attention on Important
Info & Calls to Action

56

57

58
Provide Clear Link to Home
from All Other Pages

59
Provide Clear Link to Home
from All Other Pages

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

61
Use Plain Language;
Avoid Technical Jargon

62
Use Plain Language;

63
Use Plain Language;

64
Use Plain Language;

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

66
Thank You!
 WiserUsability.com
 408.806.8451
 kfinn@wiserusability.com

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

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (20)

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

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

Dernier

Dernier (20)

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