UX Study: Designing for older people
In the near future we will have more and more elderly people interacting with digital technology. As we can already see nowadays, the older generation have difficulties keeping up with new hardware and software. Quite some already give up before trying, others try and struggle, less succeed.
As product designers, it’s our job to advocate for the end user. Every time we are trying to solve a problem or design something new, we must check our biases at the door, forget our preconceptions and focus on the people using the product. We must always consider accessible design. This means standing up for differently abled individuals and if required, educating stakeholders about the real value of inclusive design.
While working on providing healthcare access to everyone through their mobile phone, I carried out research on how older people use mobile applications and services. After multiple user testing sessions with the study prototype, I came up with some interesting discoveries.
I’ve put together a list of UI/UX recommendations focused on older users. I hope these will help to make accessible design a part of designers’ best practice so that in future, everyone can have a better experience with mobile applications.
1. Make everything easy to read
Probably the most obvious of all. Our vision gets worse by age. At the age of 20 I already had to call myself a full-time lenses/glasses user. The elderly might recognise written fonts, but for them it is no different. Sans-serif font choices on screens are the most readable for older people.
Font size choices on phones should be no smaller than 12 pt., 36 pt. on tablets and around 24 pt. on computer screens. Clickable links should be underlined unless displayed differently. If possible, give the option to manually adjust interface size, especially text. You will be surprised how many older people will find this feature useful if not necessary.
2. Use the right amount of contrast and colours
Another section based on vision. Older users need stronger colour contrast than the average mobile device user. There needs to be a clear differentiation between warm and cool colours.
Outlines of objects are more difficult to recognise, and shades of blue seem to fade or be desaturated.
Contrast is an obvious one but worth mentioning. It describes the difference between text colour and background colour. It’s recommended to keep a contrast ratio of at least 4.5:1, although it would be best to stay over 7.0:1.
You can find plenty of contrast checkers online to confirm you hit those numbers. You can use Apple’s Human Interface Guidelines and Google’s Material Design Guidelines as a base to start using them in your designs.
Colour coding
Colours are often used to communicate information such as errors, interactivity, etc. When designing, supplement colour coding with textual explanations so colour blindness is not an issue.
Here are some recommendations:
- Don’t rely on colour to convey a message (older users tend to prefer text over symbols and colours as a medium for information)
- Red and green are the hardest colours to differentiate for colour blindness
- High contrast is best, especially within colour value (navy & light blue)
- Avoid blue for important interface elements (they appear faded to older users, potentially reducing contrast)
- Check your designs by using online visual impairment simulators to make sure they are still legible
3. Use clear descriptions and interactions
Icons that many people may think of as “common knowledge”, such as the menu icon or the share button, might not be as understandable to inexperienced users. In the past, interfaces used to show icons that had vivid details like shadows and textures to simulate the related objects in the real world as a metaphor, known as skeuomorphism.
Since metaphors refer back to known objects and functions, they help users who are just starting out with new technology, as a bridge to connect existing and new products. Skeuomorphism emphasises the association to the real physical world, while flat design focuses on the visual re-organisation and simplification of the interfaces.
Over time, regular users have become familiar with certain interactions and technology. Menu buttons have been replaced with a three-line symbol. Swiping is synonymous with learning more. People are so familiar with common functions that we have been able to create cleaner, flatter, minimalistic design.
But assuming that everyone has the same knowledge of technology could mean you take decisions lightly, without understanding the disruption you may be causing in their app experience.
Additionally, in order to indicate interactivity for users who are still learning, add visual cues to tappable elements, both in active and static states.
Nowadays, cards have become a design staple across mobile app UIs, with good reason. However, older may not recognise newly introduced design patterns, and as a result be unsure if cards are tappable or not. Having a clear call to action on elements always helps the users to identify interactivity.
Having text alongside icons may make the experience easier. Given the fact that outlines of objects are more difficult to see and contrast is needed, adding a stroke border makes buttons easier to recognise.
Key findings
- Icons and buttons should be placed with a minimum spacing of 44 pixels to allow for touching intended buttons and not placed in corners to avoid accidental actions.
- Reduce the distance between interface elements that are likely to be used in sequence (such as form fields), having at least 2mm apart.
- Buttons on touch interfaces should be at least 9.6mm diagonally (for example, 44 × 44 pixels on an iPad) for ages up to 70, and larger for older people.
4. Pick the Right Vocabulary.
Sign in.. or Sign up… Certain words might be obvious for one, but unfamiliar to another. Similar to icons, not all words that younger generations know might be understood by inexperienced users. Users are confused by difficult words and may get stuck. By simply rephrasing the commonly used “Sign Up” to something more descriptive as “Create an account” can make things clearer for older users.
Another good example is feedback messages. It’s important to show exactly what’s happening after an action is completed. This avoids the user feeling confused and unsure how to continue, or worse, wondering if he or she has gone wrong.
Don’t require extra cognitive effort from your users. Avoid abbreviations, since they are hard for our brains to process and thus more difficult for older people to understand.
Language is fluid. It changes constantly, so new words appear all the time. Keep that in mind and test your UX writing frequently.
5. Choose the right tool for the job (aka prototyping)
When it comes to prototyping, there are so many tools and methods out there that choosing one is no easy task. But choosing the right tool is the key to describing your thoughts and collaborating with your users.
You should have a clear idea of what you need to prototype and why. You may have questions to answer, hypotheses to test or a learning objective to fulfil.
The prototyping tool you choose will also depend on the fidelity you’re aiming for. Low fidelity is best for testing an idea (choose a tool that gives you the ability to navigate from one screen to another). Medium fidelity works when you’re focusing on layout and interaction design. And you need High fidelity when the most important things are visual design and micro-interactions (choose the tool that is capable of adding transitions).
Prototypes are powerful but can sometimes confuse older users. It’s important to clearly explain that a prototype isn’t the same as the end product, so some things will not work as expected. Older users tend to assume that every problem they face while using a prototype is their fault, because of their lack of knowledge on mobile apps.
6. Do user testing. Don’t rely on assumptions.
User interface/user experience design cannot be done without contact with potential end users. All design choices should be tested, including vocabulary, icon choices and other aspects.
You need to plan how you’re going to test. Are you testing your prototype with real users? Are there technical constraints with how you are going to test? And what will you do with the prototype after the test? Will you iterate on it for further testing, step up the fidelity of the prototype in a different tool?
Sometimes, the test plan may confirm that your insights from prototyping worked, but this could be based on the fidelity of your prototype. Older users may prefer to see the end result of your working prototype, and in this way you can validate whether the buttons they’re tapping and the actions they’re taking have the expected result.
The only way forward is to “test early and often.”
Older, inexperienced users offer unique challenges when designing the newest trends/technologies, but there are ways to make it easier for them to engage, as long as we take their needs into consideration.
P.S. A massive shoutout to the team @undraw for providing all these amazing open source SVG illustrations.
