Dementia Digital Design Guidelines / Heuristics
 Share
The version of the browser you are using is no longer supported. Please upgrade to a supported browser.Dismiss

 
View only
 
 
Still loading...
ABCDEFGHIJKLMNOPQRSTUVWXYZAAABACADAE
1
'File > Make a copy...' or 'File > Download as...' if you want to use for your own workEvaluated system:e.g., Website URL / App Name and Evaluator and Date
2
IDGuidelineWCAG 2.0ExampleResultSeverityFix EffortExampleNotes, Reccomendations
3
0Include people affected by dementia
4
Before your design was launched, did you include with people affected by dementia?
5
0.1Include people living with dementia in the design stages.
Did you conduct primary research with representative users?
6
0.2Get feedback from people living with dementia during beta.
Did you test, validate and iterate designs with representative users?
7
0.3Communicate that your website is dementia-friendly.
Help build dementia-friendly communities and mitigate stigma.
DEEP: Creating Dementia Friendly Communities [PDF]
8
9
10
1Content
11
Make it clear what your website is doing and why you're doing it.
12
1.1Use Simple, Clear, Direct and Precise language.
Avoid generic calls to action, complex wordplay, jargon.
Use very clear, specific and unambiguous, headings and labels.
Struggle to remember terminology. Struggle to find correct word.
3.1.5 ; 2.4.6 ; 2.4.2 ; 2.4.4 ; 2.4.10gov.uk: Writing for the Web guidelines
13
DEEP: Writing Dementia-friendly Information [PDF]
14
1.2Use Explicit and Arresting content.
Make the purpose clear and content interesting and focussed.
15
1.3
Make content easily printable.
Useful for people with issues with vision and perception.
Include an explicit "Print" control
Write effective print style sheets (CSS)
16
1.4Avoid using abbreviations and acronyms.
Don't assume people with dementia will recognise these.
3.1.3 ; 3.1.4gov.uk: Writing for the Web guidelines
17
1.4Include content from people living with dementia.
When relevant provide tangible context:
- evidence living well with dementia.
- include helpful stories from people living with dementia.
18
1.5During longer tasks, give clear feedback on goal & progress.
People living with dementia may have problems with memory.
W3C WAI: Multi-page forms
19
20
21
2Layout, Navigation and Interface Design
22
Make your navigation explicit and signpost a route back to the homepage.
23
2.1Avoid splitting tasks across multiple screens.
Especially if this relies on memory of previous actions.
May struggle to remember location and task in a process.
If content must be split, then consider:
- using the minimum stages possible.
- avoiding splitting by separate pages.
- reminding about goal(s).
- giving clear feedback on progress.
- guideline 2.5.
24
2.2Use clear breadcrumb navigation.
So that it is easy to understand location in the site structure.
Disorientation when trying recall relative location in a system.
3.2.3 ; 2.4.5 ; 2.4.8Alzheimer's Soceity: section page.
25
2.3Use a clear "Home" button.
Do not rely on using a logo only to link to the homepage.
Disorientation when trying recall relative location in a system.
3.2.3 ; 2.4.5Alzheimer's Soceity: section page.
26
2.4Make hyperlink styles and states clear.
Clear visual styles for :link, :visited, :focus and :hover link states.
Smashing Magazine: The Definitive Guide To Styling Web Links
27
2.5Use clear line and section breaks to make splits obvious.
Clearly defined sections with strong lines and explicit headers.
2.4.6 ; 2.4.10Consider using:
- <fieldset> and <legend> in web forms.
- strong colours, backgrounds.
- clear headings (label and style).
- horizontal rules (<hr />).
28
2.6Iterate designs gradually and judiciously.
Don't tinker with design necessarily. If it's working, keep it.
Aspects of impaired memory and learnability.
Where possible: refine, rather than wholly redesign.
29
2.7Avoid hiding navigation.
Hiding navigation harms discoverability and use for all users.
NN/g: Hamburger menus hurt UX
30
2.8Avoid using elaborate design and user interface patterns.
This may make the interface and content confusing.
Users may not be able to learn new complex motor skills.
Older people may struggle with complex movements, esp. if novel.
Use simple and elegant visual design.
Use simple / standard interface patterns.
Do not assume prior knowledge.
Beware controls that assume life stage.
31
2.9Make links, buttons, controls have large enough target sizes.
Fine motor skills, and ability to learn M. skills, may be degraded.
Also: general aspects of "Fat Finger Syndrome" and Fitt's law.
2Smashing Magazine: Desiging for the Elderly
32
33
34
3Colours and Contrast
35
Each type of dementia can damage the visual system in a number of different ways.
36
3.1Use a high contrast colour scheme to improve readability.
WCAG ratios for contrast are 7:1 and 4.5:1 are a minimum.
1.4.3 ; 1.4.6Paciello Group: Colour Contrast Analyser
37
3.2Use plain backgrounds for textual content
Avoid background images, patterned background graphics.
Damage to the occipital lobe can cause problems with perception.
Plain backgrounds avoid distractions.
Keep text content easy to distinguish, perceive and comprehend for all users, devices and contexts of use.
38
3.3Avoid use of blue, especially for important interface elements.
Colour vision declines with age, in particular, shades of blue.
Smashing Magazine: Designing for the Elderly
39
40
41
4Text and Fonts
42
The simplicity of the sans letter shapes makes them more readable on all computer devices.
43
4.1Use an open source sans-serif typeface.
The simplicity of the letter shapes is more readable, digitally.
Google Fonts: Source Sans Pro
44
4.2Use a large font size, or make explicit controls to change size.
Consider including explicit text size controls.
Maximise readability to provide the occipital lobe with enough info.
As people age, their eyesight ability declines.
1.4.4Dementia Diaries: text controls, CSS
45
4.3Use bold text, alongside clear, concise, statements.
Useful to highlight important information (see 1.1 and 1.2).
Alzheimer's Society: Heading and Strapline
46
4.4Avoid using multiple fonts, unnecessarily.
This may make the interface and content confusing.
Keep your design simple and use one or two fonts only, never three.
47
48
49
5Images and Multimedia
50
People with dementia can misinterpret videos and images for real people. Keep images and multimedia simple and relevant.
51
5.1Keep images relevant and closely related to the content.
To reduce the chance that the interface and content is confusing.
Make images simple, engaging and meaningful.
Dementia Diaries; Tommy; Photo
52
5.2Use autoplay where audio or video is the only focus.
See 5.4 and never autoplay on the landing page of a site (shock)
1.4.2 ; 2.2.2
53
5.3Provide subtitles or transcripts for video and audio content.1.1.1 ; 1.2.1 ; 1.2.2 ; 1.2.3Dementia Diaries; Tommy; Audio
54
5.4Use very simple and familiar playback controls.
So that it's predictable and easy to control the content playback.
2.2.2Dementia Diaries; Tommy; Audio
55
5.5Provide enough time to use and control content.
Movements are slower in older people, also D. w. Lewey bodies.
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
Loading...
 
 
 
Dementia Digital Design Guidelines / Heuristics
Data
About