AbilityNet Factsheet - May 2021

Designing for Dementia

Based on a webinar by AbilityNet, this factsheet offers tips on dementia-friendly website and digital design. You will find practical tips on co-designing with people who have dementia and tips for website structure, simple language, text styling, contrast, presenting multimedia and helping people better process instructions online.

Last updated: May 2021

The tips and guidance in this factsheet were delivered in a FREE webinar on designing for dementia provided by one of AbilityNet's experienced consultants (May 2021).

Many of the design tips that make it easier for people with dementia to access your website will improve it for everyone who visits your website.

AbilityNet advocates this Inclusive Design approach throughout our products and services. You can find out more about how we can support you on your accessibility journey in the "About AbilityNet" section of this factsheet.

 

1. Understand the needs of people living with dementia

Dementia is the name for a group of symptoms that commonly include problems with memory, thinking, problem-solving, language and perception. 

It is a progressive condition, and everyone's experience of dementia is different. 

Common symptoms people with dementia may experience include:

  • Trouble with kind of day-to-day memory.
  • Remembering recent events or recalling information.
  • Difficulty with concentration and planning.
  • Decision-making
  • Carrying out a sequence of actions, particularly as part of a task or solving problems.
  • Language problems such as finding the right words or following spoken language.
  • Issues with visual perception.

2. Co-design with people living with dementia

Everyone’s experience of dementia is different. Symptoms vary from person to person but include memory loss and difficulty concentrating/planning. People may also experience problems with language and visual perception.

Dementia symptoms can impact someone’s ability to use digital products. 

It’s essential to listen to the people who are interacting with your service and seek the input of people living with dementia and “co-design” products with them.

There are many ways to find people to co-design with you:

  • Reach out through social media or networking groups
  • Reach out to charities such as the Alzheimer’s Society
  • Use forums such as local support groups for carers, people with dementia and older individuals.

The benefits of co-designing with people with dementia

A 2019 study of 26 different co-design sessions with people with dementia revealed positive benefits of co-designing with people living with dementia.

Co-design gives people a voice, makes them feel valued and included. It helps designers challenge assumptions and the stigma we might foster if we rely on those assumptions.

There are a few things to consider when working with people with dementia.

  • Have smaller focus groups
  • Focus on a single activity at a time
  • Use topic guides to steer the conversation and external memory aids to complement the topic you are discussing. 

3. Use a clear website structure.

A clear structure is essential, so break up the content of web pages, or app screens, into smaller chunks of content. 

This will make content easier to scan and understand.

Similarly, organise content under clear headings and sub-headings. These headings should be descriptive and reflect the hierarchy of the content and what the section contains.

Break walls of text into smaller paragraphs and keep to a single idea per paragraph, which will allow someone with dementia to go at their own pace. 

Use ordered lists o help people navigate. Call out boxes help highlight particular information, especially if it’s something the individual will need to refer to regularly.

Use descriptive headings

Descriptive headings will help everyone navigate your site.

Avoid ambiguous terms saying things like "news or services" are you talking about local news or regional news? When you say "services", what do you mean?

Think about similar headings and how it might be pretty easy to misinterpret those meanings and get those mixed up.

A straightforward website structure helps people with dementia

A clear design is essential, so break up the content of web pages, or app screens, into smaller chunks of content. 

This will make content easier to scan and understand.

Similarly, organise content under clear headings and sub-headings. These headings should be descriptive and reflect the hierarchy of the content and what the section contains.

Break walls of text into smaller paragraphs and keep to a single idea per paragraph, which will allow someone with dementia to go at their own pace. 

To help people navigate, use ordered lists. Call out boxes help highlight specific information, especially if it’s something the individual will need to refer to regularly.

Page titles help people navigate your site

Think about page titles as these are the first things people will encounter on your site. Page categories will help people orientate themselves within your website. It helps me to know where I am on your wider website and avoid ambiguity. 

Keep options consistent. If you have a certain set of links in your navigation, repeat these on subsequent pages so that visitors gain familiarity and the confidence to know where they are.

That is not to say you can't add additional links.

Keeping a relative order is especially important for "breadcrumbs". The BBC and NHS websites do a good job of showing me how I've arrived at my location and to track back if I need to.

Make links descriptive

Any links within your website should be descriptive.

Avoid links that say "click here and read more". It should be clear from the link what the outcome of interacting with it will be. Doing so will give visitors confidence about where a link will take them.

4. Simple language will empower people with dementia

If language appears to be too long or too complex or appears irrelevant to what someone is trying to do, it can be difficult to understand, and off-putting particularly for people living with dementia. Use clear, appropriate language:

  • Use simpler words with fewer syllables
  • Avoid long sentences with complicated words, which may be difficult to read.
  • Stick to one idea per paragraph.
  • One subject per sentence is ideal.
  • Use a direct and active voice where possible, ideally subject, verb, action, to convey key messages.
  • When you are giving instructions, it can be helpful to be quite direct and use the active voice.
  • Use acronyms sparingly or avoid them if you can; describe them when introducing them to clear the meaning.
  • Avoid abstract concepts such as “thinking outside the box”.

Use language sensitively

Avoid language that could be harmful because we are talking about people when we talk about people with dementia.

We want always to bear that in mind.

So, avoid language that belittles or de-humanises people with dementia. Avoid language such as "suffers from dementia" or language that reinforces stigmas around memory loss and incapacity.

Try instead to empower people and make them feel included as well.

5. Dementia-friendly text styling

The way you present text impacts how accessible your website is for people with dementia, including font choice.

Avoid fonts that can seem cluttered and a bit busy like the serif fonts with the curly flourishing on them and instead use Arial or Verdana, known as sans-serif fonts, which don't have little tails on them.

If you need to, use bold text to draw attention to particular words but bear in mind if you use italics or underlines, they can appear quite busy and fussy, particularly if someone has multiple conditions; if this is an older person experiencing dementia, it may be that their eyesight is affected.

Text alignment

Where possible, use left-aligned text, and avoid centred or fully justified text. Left-aligned text is better because it creates a clear, hard-left edge compared to the centred text where the edge is staggered.

Your eyes have to do more work to track the left-hand edge and find the next sentence's beginning.

Avoiding using all caps

There are different schools of thought; the predominant feeling is that we recognise words by shape. If you are using all caps, you are presenting me with a block shape. It can be quite tiring and difficult to read.

Caps are OK in moderation for the odd heading, but not in the actual body copy.

Use a suitable font size.

We recommend using a 12 point or larger font size but crucially, that your website allows me to adjust that size.

Don't restrict your website or your app to just a fixed font size.

Consider colour contrast

Think about colour and contrast because vision does decline with age, and most people with dementia are in that older age bracket. Blue, in particular, can be a problematic colour if it's used for user interface elements to show that something is selected or has focus, for example.

Colour contrast of text

Colour contrast applies to text, as well as other elements of your design. The Web Content Accessibility Guidelines (WCAG) set out minimum requirements for regular-sized text with a ratio of 4.5:1; for larger text, the ratio is 3:1. We would recommend you aim for 4.5:1 as a baseline.

The contrast of UI elements

For user interface (UI) elements such as links, use a baseline contrast ratio of 3:1,  making it clear visitors I know which elements are focused, which elements are selected, which element is a link.

Don't rely on colour alone to communicate that information; for a line, for example, you can underline text as well.

In the case of something like a chart or a graph, you can use patterns to distinguish different colours.

6. Multimedia elements 

Using images well can make a website more dementia-friendly. Images can complement text-based information and help to clarify a message.

Be wary of using illustrations that can appear childish or patronising. Realistic photographs may work better if you ensure they are subject-specific and not over-used. For example, if talking about contactless tube travel, illustrating this with a picture of an Oyster card tapping into a station would be ideal.

Image labels

Web Content Accessibility Guidelines (WCAG) require all images to have labels or Alt Text to identify them for screen readers. Where you have text labels or captions, use ones that reinforce the meaning. 

Avoid putting text on top of an image because you can run into colour contrast issues. It makes that a busy element to understand. Instead, you can have a solid colour behind the text.

Ultimately, for a person with dementia, separate the image and the text and let visitors consume those elements individually.

Icons

Consider icons carefully and avoid ambiguous ones. For example, on social media, heart icons have multiple meanings depending on the social media platform you use.

7. Easier data input for people living with dementia

Illustration of a woman's face with a matrix mapping key points on her face for facial recognitionYou can make entering information on a website easier for someone living with dementia with clear instructions and reduce the amount of time it takes to process information. 

  • Use clear, accurate instructions about what you expect of visitors and use examples (for example, the date format you require)
  • Use auto-complete or "remember me" options for people logging into a website.
  • Take advantage of what the platform offers, so for a mobile device, you could use face ID as an alternative to complex passwords.
  • Where a journey spans multiple screens, carry information forwards. The government's visa eligibility checker is a good example of this. Carrying information forward can help keep a person with dementia on the task regarding where they are in the process and what information they have already entered. It saves having to ask them for that information repeatedly and reduces the amount of energy required.
  • Focus on distinct tasks, discreet tasks, and if a task will take a long time, save progress so someone can return to it later. 
  • If something goes wrong, tell me what and why and how I can fix it. Ideally, pre-empt the error and provide a picker for dates, for example, rather than manual typing.
  • With errors and labels, consider the proximity and place labels beside the field. Typically as soon as someone puts their cursor inside the form field, the place holder disappears, so always having visible permanent labels close to the input field can help people complete those forms.

Avoid Distractions

People's energy and attention may fluctuate throughout the day. So it's good to avoid elements that can be disorientating, distracting or tiring, such as adverts around the side of the page, particularly where someone is reading an informative article or completing a form.

Where there is video content, turn off autoplay because that immediately bombards visitors with sensory information, which can be quite disorientating and distracting.

It's a difficult issue for people with dementia and people with disorders where it might be triggering, and they may feel nauseous or ill from experiencing that.

Put key information within the page as static text rather than pop-ups or dialogue boxes.

If there are essential messages like "you are about to be logged out", it's appropriate to an immediate dialogue make that interaction as clear, simple and accessible as possible. Don't expect people to hunt down that dialogue and perform a complicated action to remain logged in.

Provide enough processing time

Be mindful that users, particularly people with dementia, might need additional time, whether that is because they lack attention or energy or their ability to recall certain words.

People might need additional time to complete tasks and consume information, particularly dense information. There are security reasons why we have to have time-outs more often than not, so if you can't avoid them, make it easy for people to extend the time if needed. 

If visitors have advance notice, there will be a time-out after half an hour. For example, some method to increase that time-out period can be very beneficial.

Avoid auto-advancing carousels

Provide static information so people can stay and work through information in their own time. 

A carousel where you have a slide that advances to show the next slide means people may not have enough time to read key information or decide what to do about it. Where possible, avoiding auto-advancing carousels, just like the auto-playing videos.

8. Input devices, and information

Consider carefully the input devices people use, and how you configure your website for these. Quite often a tooltip will appear if I move my mouse pointer over the little button and when I move the mouse pointer away the tooltip disappears.

There are technical minimum requirements that the web context guidelines set out for how to handle that situation.

Be mindful that not everyone might be using a mouse or a touch screen and that people may  have tremors or joint pain or lack the fine motor control to use something like a mouse.  It can also be the case with touch screens that, as we get older, our skin becomes dry and leathery and the touch screens become less effective.

People may be using another form of input whether that is keyboard or speech recognition or some kind of voice control. Particularly in the case of voice control. It's quite important that you are labelling is accurate so when someone calls out a particular button the correct element is targeted.

Provide larger hit targets can help people who lack fine motor control so that they don't run into the situation of not being able to interact with something or accidentally interacting with the wrong thing. Google sets out size of 48x48 pixels.

9. How AbilityNet can help you

More information on our accessibility services

We offer consultancy services to help make products and services roe accessible.

My Computer My Way

My Computer My Way is an AbilityNet run website packed with articles explaining how to use the accessibility features built into your computer, tablet or smartphone. The site is routinely updated as new features and changes are made to the Windows, macOS, iOS, Chrome OS and Android operating systems. The site is broken down into the following sections:

  • Vision – computer adjustments to do with vision and colour
  • Hearing – computer adjustments to do with hearing, communication and speech
  • Motor – computer adjustments to do mobility, stamina and dexterity
  • Cognitive – computer adjustments to do with attention, learning and memory

Use it for free at mcmw.abilitynet.org.uk

Advice and information

If you have any questions, please contact us at AbilityNet and we will do all we can to help.

IT support at Home

If you’re looking for in-person support, you can book a free visit from one of our disclosure-checked volunteers. Many of our volunteers are former IT professionals who give their time to help older people and people with disabilities to use technology to achieve their goals. Our friendly volunteers can help with most major computer systems, laptops, tablet devices and smartphones.

https://abilitynet.org.uk/at-home

Was this content helpful?