The article was published on smashingmagazine and was translated specifically for Habrahabr.
A proven method of web design: you need to minimize the number of possible choices for the user; create intuitive navigation tools; Help people get what they are looking for as quickly as possible.
')
Sounds pretty simple, right? And now let's consider this from what point of view ...
The number of Internet users suffering from dementia is constantly growing throughout the world. They may have different levels of computer literacy, they may experience the following problems: memory loss, confusion, problems related to vision and perception, difficulties with organizing and processing information, speech problems, inability to solve some problems and tasks.
When we thought that integrated design was already firmly entrenched in its positions, a completely new dimension arose.
Website development for people suffering from dementia has so far been a relative unexplored topic in the web design world. However, on Our Radar, we had to deal with the problem of design convenience for people with dementia last year when creating the “Dementia Diaries”: a project that should encourage people with dementia to keep audio diaries of their lives, achievements and problems with using a special mobile phone printed on a 3D printer. A collection of audio stories is posted on the site, they are selected for media campaigns in the media, or used in services and organizations that work with people suffering from dementia.
We wanted to make a convenient site for people suffering from dementia, so that they can listen to stories shared by the same people and share tips, or support each other. With the help of Rory Gilchrist, a specialist in integrated web application development, we started to create a website that would contain as much information as possible and at the same time remain a platform for attracting new users.
In the design process, we attracted people with dementia, listened to their feedback to create a site that would work for them. The project Exploring Dementia and Empowerment also helped us at the time.
In this article we will share some of the knowledge that we gained during the creation of the site’s user interface for people with dementia (and we were very limited in our budget).
What is dementia?The word "dementia" describes a set of symptoms that may include memory loss and difficulty in processing information, difficulty solving problems, or difficulty in communicating. Dementia occurs due to brain damage by a disease (such as Alzheimer's disease) or as a result of injury. Dementia progresses, and over time, symptoms gradually increase. Less known symptoms include hallucinations, sensory disturbances, insomnia, and mood swings.
By some estimates, at the end of 2015, there were about 46.8 million people suffering from dementia worldwide. The number of people with dementia will almost double every 20 years and reach 74.7 million by 2030, 131.5 million by 2050. There are 3.3 billion such Internet users worldwide, and since the number of people suffering from dementia continues to increase, and the percentage of users with this disease will grow.
New frontier site design for people with dementiaWhy is it important?Organizations and enterprises, especially with a large number of users over 60, are at risk of pushing away a significant portion of their visitors if they cannot adapt to the new conditions.
Many people with dementia have a harder time working with computers and the Internet as their illness progresses. Although many people with dementia use the Internet to access information or chat with colleagues, friends or family, navigating in these digital spaces can be problematic for them.
Many websites provide services, products or information for people with dementia, but they are ineffective because they are designed without taking into account the characteristics of users of this group. Other people can (and often do) help people with dementia to access this information, although this reduces the independence of people with dementia, it still remains an important factor for maintaining emotional well-being.
Social networksOlder people and people with dementia are especially susceptible to loneliness and social exclusion. Loneliness can also cause cognitive decline. Expanding online opportunities when older people and people with dementia can interact and share information on the Internet can bring incredible benefits.

Tommy Dunn, a man with dementia from Liverpool, UK.
The main features of the site for people with dementiaContentLet people understand how your website works and how to interact with it. Although textual content is being used less and less often, and visual, more and more, the combination of these two forms can really make the site easier for people with dementia. Add a content printing function so that information can be printed and read anytime, anywhere. If you can be interested in your product and attract people with dementia, then you have already won, especially if it is directly related to their condition. Often, other people speak on behalf of people with dementia, but this reinforces the stereotype that they are not able to solve ordinary, or even exceptional tasks.
Key points• Everything must be clear and precise: what is your website for and why are you doing this? Avoid difficult word games, calls to action (for example, "Participate").
• Content must be understandable and eye-catching.
• The function of printing content is useful to people who have problems with vision and perception.
• The language used on websites is more important than the language of printed materials: avoid generalizations and make the text as clear as possible.
• Avoid jargon, too technical or scientific language.
• Stories and advice from people with dementia will not be redundant and will help a lot.
Their words“When you have dementia, it’s quite difficult to focus on things for a long period of time, especially if you just sit there.”
-Paul Hichmau
“It is not difficult to read, there is no difficulty in this. Remember what you read - this is already a problem. It is hard to remember the books that have been read, even to remember the name of the book ... Sometimes I take a book in my hands and I cannot remember whether I read it or not. ”
Whale Oliver

When you click on the big “print” button, the user opens a style sheet for printing. (Image taken from: The Dementia Diaries)
Layout, Navigation And Graphical InterfaceMake your navigation clear and clearly mark the path back to the main page.
There has been a surge in the use of tablets among the elderly, so when developing digital solutions for these groups, this fact should be taken into account. This means that websites targeting older people need to be adapted for mobile devices.
Five years ago, in the Pew Internet and American Life Project studies, it turned out that older users who suffer from chronic diseases, more often than their peers, participate in online discussions and are looking for new communities. Considering the fact that Facebook is the most popular social network for people over 50, you may want to make it as easy as possible to share your content on this network. Make the buttons big and noticeable.
Key points• Avoid such tasks when the action takes place on multiple screens, and at the same time it is necessary to remember your previous actions (as shown in the figure below).
• Make the bread crumbs visible, so that you can easily move back and forth.
• Do not use the menu-hamburger, functions like "View menu" and "Close menu".
• Use the “Home” button. Do not rely on the use of the logo to return to the home page.
• Ensure that hyperlinks are clearly visible.
• Use clear buttons for sharing content that are large enough so that they can be distinguished on tablets.
• Use clear line breaks. Accurately identify areas with important sentences and headings so that the gap is obvious.
• Make changes gradually. If something works, do not change this element unnecessarily.

When you click on the “Ask Elaine Stephenson” button (see on the left side), a question window appears on the same screen as the story itself (see on the right side), so that the person asking the question can easily see original story. (Images taken from: The Dementia Diaries)

We did not use the hamburger menu and tried to make the menu headings as simple as possible. (Images taken from: The Dementia Diaries)
And x words"I almost can not track the sequence of actions ... I live alone, and for me it is quite a difficult task."
- Agnes Houston
“We have to simplify everything. In my head everything is confused. It is necessary to do everything gradually. Read slowly.
- Archie Latta
“Our brain needs more time to absorb the information in Alzheimer's disease. Each in its own way, but probably everyone is anxious, confused, has to plan and recheck absolutely everything. ”
- Ann Macdonald
Colors and contrastDementia can manifest as difficulties with visual-perceptual perception (problems that affect both vision and perception) or problems with sensation. The specific difficulties experienced by a person will depend on the type of dementia. This is because each type of dementia can have a different effect on visual perception.
These difficulties include:
· Decreased sensitivity in distinguishing contrast (including color contrast, such as black and white, the contrast between objects and the background).
· Decreased ability to catch movement (movement).
· Changes in the field of view (how well you see objects at the edges of the field of view, looking straight ahead).
· Decreased ability to detect different colors (for example, a person may have problems describing the difference between blue and purple).
· Changes in the reaction of the pupil to light.
· Problems of directing or shifting gaze.
Therefore, when choosing the ratio of color and contrast, it is important to follow the instructions in the Web Content Accessibility Guidelines (RCMs).
Key points· Use a high contrast color scheme to make pages more readable.
· The proposed coefficients of the AFRS for contrast are 7: 1 and 4.5: 1. Due to the fact that our site is designed for people suffering from dementia, we went beyond the scope of these recommendations.
· Publish text without overlapping images.
· Use a simple background that will not distract the attention of users.

1) Blue color of the theme with white text: contrast ratio - 7.4: 1
2) Black text on a white background: contrast ratio - 9.45: 1.
3) The names of each part are located below the image, and does not overlap them. You can click on the name or on the picture to go to the post. (Image taken from: The Dementia Diaries)
Their words“Now at home I use colored pads of plexiglass and prism with glasses to reduce the effect of ghosting in my eyes and to perceive the font and text normally.”
- Agnes Houston
It is important to note that high contrast can also be a problem for some people with dementia, which also affects the condition of the eyes. Symptoms of dementia are varied and, unfortunately, it is not always possible to take into account the needs of each. However, high contrast is a good starting point, and with customizable website contrast ratios, you can try to ensure accessibility for as many people as possible. The Alzheimer's Society offers the most comprehensive set of customizable accessibility options (text, font, and letter spacing are customizable).
Text and FontsThe text should be clear and simple!Sans serif is a type of fonts with small protruding dashes (so-called serifs) at the end of the stroke. Modern, minimalist, widely used on the Internet, in particular, for short and catchy messages. It is not so expressive from a visual point of view, but the simplicity of the letter forms of sans serif makes it well readable on any device.
If a message addressed to people with dementia is issued using sans serif, it will generally be easier for them to understand it. The ability to change the font size is a very convenient function, if, of course, your budget allows you to use it.
People with dementia tend to forget names, events, dates, and other important household items. That is why you need to remember that such people may not recognize commonly used abbreviations and acronyms. Even if you separately wrote about something earlier, the person reading the new post may not remember about it, even if this information has already been found a few lines above.
Key points· Do not use abbreviations and acronyms.
· Use a large font, or give readers the ability to change the font size.
· Use the sans serif font. We use Source Sans Pro (open access font, great for different user interfaces).
· Use bold text with concise and accurate sentences, highlight important information.
· Avoid using multiple fonts at once, or using complex designs, as this can be confusing.
Their words“If you like to read books, but you have difficulties, use the Kindle so you can choose the font that is best for you. It makes reading easier. ”
- Joe Bennet
“It is important to know that people who have symptoms of dementia at a young age experience memory problems much less often than older people suffering from this disease. Instead, they may have speech disorders, problems with visual perception, behavior, problems of a personal nature. "
Tommy Dunn

An example of changing the font size, (small), on the site dementiadiaries.org. The function of changing the font size is in the upper right corner of the site. (Image taken from: The Dementia Diaries)

An example of changing the font size (large) is on the website dementiadiaries.org. The function of changing the font size is in the upper right corner of the site. (Image taken from: The Dementia Diaries)
ImagesThere is a certain contradiction here. Images increase the likelihood that such a post will share, add color to your site, tell a story. But they can also disorient and distract people with dementia. They may incorrectly regard the location of people or objects, despite the fact that objects are in front of people: such visual information may be distracting (for example, curly wallpapers), color contrast may be disturbed in it. People may also misinterpret their thoughts: they may begin to see robbers, or refuse to go to the bathroom, because their images will have these images. In some cases, people with dementia confuse images on the TV screen with real people. Many of these problems are associated with the inability to consistently recognize objects, faces, and colors.
Although these facts cast doubt on the appropriateness of using photos, visual cues can also strengthen the connection between the user and the content, so it is certainly important to include them in certain cases. The key is the simplicity and relevance of images. A good example is the use of photographs of a person in combination with an audio recording where he speaks.
Key points· Images must be current, closely related to the text.
· Try to avoid overly abstract illustrations.
· Make sure the photos contribute to the main story, rather than distract from it.

A photo of a person is displayed while his voice is heard on audio. The material is accompanied by decoding and complies with the recommendations on the availability of web content. (Image taken from: The Dementia Diaries)
Their words“We especially liked the small photographs and illustrations that clearly explain the process; so the text is much easier to understand. "
- Carol Force, wife and carer of Chris Force
Use of multimediaAs in the case of photos, it is necessary to find a balance between style and simplicity. Video and audio can attract users if used correctly, but unexpected automatic playback of audio, pop-ups or complex graphics will inevitably lead to confusion and confusion.
You probably want to keep a person’s attention and create a mood, but you should keep in mind that if the user has problems with perception, using multiple sources of multimedia at the same time will lead to disorientation. Music can stimulate feelings, but the volume of background music should be moderate, it should be easy to turn off.
Key points· Use autorun on the page where the audio or video is the only focus of attention, but not on the transition page, as this may shock or surprise the user.
· Accompanied video or audio content, if possible, with subtitles or transcript
· Include simple and familiar audio or video playback controls to make it easy for the user to understand how to play, how to pause or adjust the volume.
Sound is loaded using SoundCloud, but we also use another audio player, it is simpler. (Image taken from: The Dementia Diaries) Withtheir words“Background noise ... can make perception difficult. I have a very sharp ear, on the verge of a painful threshold. Why are we in the society “falling asleep” with loud obsessive sounds? Just thinking out loud. This does not mean that I do not like loud sounds, but they interfere when, because of them, I cannot think and cannot adjust them. I can even turn aside. The sound fills my whole brain, and I don’t know what to do. ”- Agnes Houston“Music seems to reach those parts of the damaged brain that other forms of communication do not reach.”- Tommy DunnPersonal contactPeople with dementia may feel alienated from society. There is a certain stigma that is difficult for them to get rid of, so it’s very important to let them know that you are on their side and, if possible, your employees should receive appropriate training. Also, if possible, build support functions for those who are experiencing difficulties and let them know that you are ready to offer people with dementia flexible personal support.Since our project is based on audio, we have developed a remote transcription tool that allows volunteers to transcribe audio stories presented by people with dementia. This task requires extreme concentration, and with a simple user interface, people with dementia can do it themselves. It is important to note that we provide feedback to everyone who participates in the project. We do this personally by email (it is requested when downloading the decryption). We also celebrate loyal remote volunteers and publicly thank them for supporting the project.Key points· While performing lengthy tasks, give clear feedback on the progress and completion of work.· Remember the social “stigma” and say with pride that you have done everything possible to make your website convenient for people with dementia.
An example of a sound report that was remotely decoded by one of the volunteers. Pay attention to a short “thank you” under the decoding. (The image is taken from: Diaries of Dementia) Withtheir words“I don’t say at once that I suffer from dementia; I say I'll call someone else on the phone. If I am very upset, then I say: “Sorry, I have dementia, you could not talk to me a little slower, then I will try to explain everything to you. We are not talking about rocket science. I'm not stupid. And then they answer: "Oh, I am very sorry to hear that."- Carol Owenstown“If you have the opportunity to talk in person, for example, using Skype, you should use it. People can help body language. They will see that I am still in touch, and I try to express my thoughts; they will not have to prompt all the time, as they will see me trying to answer. On the phone, I feel the need to give a quick answer, so I most likely just agree, or say something, whether it is correct or not - just give the answer and try to end the conversation as quickly as possible. ”- Chris ForceDoubt - ask linkThis is perhaps the most important thing.Spend time talking to people to understand their needs and point of view. When we developed the prototype of our website, we had no idea how difficult it would be to meet the individual needs of each. Over time, we talked to 20 people suffering from dementia, and made several necessary changes to our site. If you have the opportunity, take the time to collaborate on design and feedback.Key points· Include people with dementia in the design work.· Ask people with dementia to give their feedback when the site is in beta.· Do not make assumptions about the behavior and capabilities of the user. Try to find a more acceptable solution.Their words,“Those of us who suffer from dementia are experts in understanding our own living conditions, we have valuable information that we can share. It is important to get us involved at an early design stage to understand what is right for each of us ... There are a lot of gadgets around. If you are patient and help me, I am ready to try new things. We do not bite! „
- Ann MacdonaldfindingsPeople who suffer from dementia do not expect web designers to heal them, and many admit that it’s not always possible to make a website that people with dementia can use conveniently. But using some of these tips can improve the quality of one’s life. It is important to remember that dementia exists in many different forms, its symptoms are diverse, and many of these symptoms are common to other degenerative diseases, in particular those that interfere with the social integration of older people.By making websites available to a new growing group of users, who are so often deprived of the many advantages offered by the Internet, designers not only support people with dementia, but also other users with similar problems.