Designing for the elderly
Tags: design, uiweekly, css, ux
Published: 2021-02-18 04:48:56

Hello! I've been gone for a while. I had to take a break really, to reboot myself, and focus more on school as that becomes more and more taxing. I'll now try to manage myself a bit more efficiently and post more often :smile:

So, as we're getting people from all ages, and all sorts of different backgrounds, our web designs consistently has to stay up to date with our target population. This post gives a basic set of guidelines on how to do just that.

According to [this article](https://www.forbes.com/sites/robinseatonjefferson/2019/06/28/more-seniors-are-embracing-technology-but-can-they-use-it-ucsd-researchers-suggest-asking-them/?sh=1d955ce92323) by [Forbes](https://www.forbes.com/), it suggests than an increasing amount of seniors are adopting technology but are struggling to use it.

While designing for elderly, we need to keep in mind that they will more than likely have some vision related problems.

### Don't jump onto trends

I __strongly__ suggest staying away from trends like [Neumorphism](https://neumorphism.io) or the new [Glassmorphism](https://dev.to/harshhhdev/ui-design-trend-of-2021-4fb7), as elderly people with vision related problems will likely not be able to tell where borders end, where they start, and so on.

### Do you need animations?

Cut out things like flashy animations. They're unnecessary, overwhelming, and [every 1 in 20 people aged 65+ have epilepsy](https://www.epilepsy.com/learn/about-epilepsy-basics/epilepsy-statistics), and these things can be potentially harmful for them if they don't have a proper warning. 

### Fonts

Fonts are another important part for designing for elderly. I suggest you stay away from monspaced fonts, handwriting fonts, and use sans-serif fonts. Don't overdo caps, as they can reduce readability.

*also read: [best fonts to user for website accessibility](https://www.boia.org/blog/best-fonts-to-use-for-website-accessibility)*

### Use accessible colours

One of the biggest parts of making your website accessible is the colours. This isn't even specific to just elder audiences either. Have good contrast in your site, but maybe give some more focus to it for seniors. Avoid things like pastels, and go for dark on a light background. 

An awesome tool which you can used to learn about accessible colours, and create cool and accessible colours for your site is [buttonbuddy](https://buttonbuddy.dev/) created by [5t3ph](https://dev.to/5t3ph) 

### Start with a light mode

Now, while this might be unpopular within the developer community, don't start off with a dark mode. Feel free to add a dark mode toggle, but make sure that there is a light mode.

### Navigation

The top priority for layouts, in my opinion, should be navigation. Make it easy to get from point A to point B. 

Don't make seniors go on a quest to find your search bar. Try to avoid icons, and use text when possible. This means even hamburger menus and things should have the text "menu" instead of the icon.

### Easy to understand layout

Get to the point. Don't make seniors have to scroll all the way down to your footer to find out what you have to offer. Break everything into short and easy to read sections.

When you first land on the landing page, the text should be a clear and concise description of exactly what it is that you're offering.

Here's a good example. The website is not very appealing to most of us, but it's exactly what seniors want.

![image](https://user-images.githubusercontent.com/69592270/108306590-7e122800-717a-11eb-92e8-04272d6b4e92.png)

### Simplify the elements

Make your elements simple. If you have a button, or if you have a link, make sure that it does indeed look like something which can be clicked.

Make your elements large. Especially text and font sizes. Elderly people, as mentioned above, are far more likely to have vision problems than young people. Scrolling in and out for them can get very easily frustrating. 

### Captcha and pop-ups

If you're adding captcha, do not add a whole maze to confirm that they're not a robot. A simple checkbox should be enough.

Avoid pop-ups. They're annoying and often times agitating for them.

### Don't use millennial language

Use language which they understand. Don't use newer terms and/or technical terms which they will be unlikely to understand. 

If you're adding things with instructions, even if they're related to a field, try not to use words which only the people in those fields will understand. Make your instructions simple and to the point. Don't send them trying to find a needle in a haystack.

*Also read: [tips on how to speak/write in an understandable language](https://www.plainlanguage.gov/guidelines/words/use-simple-words-phrases/)*

### Create easy to understand forms

Keep your forms simple. Make sure to have clear placeholder text with instructions on what to put in the field, make the error messages clear and don't turn things like autocomplete off.

# Summing it up.

The single most important thought you should keep in your mind while designing for the elderly is simplicity. I've stressed this throughout the post, and I can't say it enough.

We're in a day and age where people from all ages are using the internet. I will say, that it is indeed very tempting that we design only for the younger people who are more likely to be interested, and to appreciate things like cool animations, appealing shades and colours, there is an increasing amount of elderly people whom are using the internet, and a growing amount of them are facing trouble navigating with ease.