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 levelAIA 2014: How to Make Sure Your Website Is Usable

5

Source: US Census Bureau

#s of US Adult Population, by Age


2015 2020 2025 2030 20350

20,000

40,000

60,000

80,000

100,000

120,000

140,000

18 to 4445 to 64 65 to 8485+

Year

6

2000 2002 2004 2006 2008 2010 2012 20140

20

40

60

80

100

120

18-29

30-49

50-64

65+

Year

%

% US Adults Online, by Age


989283

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


123


8

Mobile Device Ownership

eReader Tablets Smart Phone

Cell Phone0

20

40

60

80

100

18-2930-4950-6465+

Device

%



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

…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

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

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


16

Need forUniversal Design Won’t Just Fade Away


Silent Generation

Millennials

Gen X

Boomers

“Don’t Call Us Boomers”

YoungerBoomers

OlderBoomer

sG.I. Generation

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.


Need for Universal Design Won’t Just Fade Away

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)


GlareSensitivity

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

LensYellowing

MacularDegen-eration

26

Age-Related High-LevelVisual 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 movementslower 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


Fine Motor Vision Hearing0

10

20

30

40

18-4445-6465+

Age

Source: Summary Health Statistics for U.S. Adults: National Health Interview Survey, 2010

%

0.61.8

1.56.8

9.35.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 infoAIA 2014: How to Make Sure Your Website Is Usable

37

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


38

Older Adults Execute Computer Tasks More Slowly & Succeed LessContributing 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 contrastto background


43



44



45



46



47

Avoid Tiny Fonts;Provide Visible Way to Resize


48



49



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 ImportantInfo & Calls to Action


56



57



58

Provide Clear Link to Homefrom All Other Pages


59

Provide Clear Link to Homefrom 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



63



64



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 [email protected]
