A Guide to UI/UX Design for Older Adults
Designing for Cognition, Physical Movement, Motivation, and Visual Perception Challenges
UI/UX Design for Older Adults
UI and UX design are essential for all ages. But UI/UX design for older adults is especially important. As people get older, there are a lot of physiological and cognitive changes that make it is easy for them to become digitally excluded. Designers need to understand these changes to master interface design for older adults, as they may not be able to remember things as well, or their reactions might be slower.
While many adults over the age of 60 have had an abundance of experience with technology in the workplace, there are some who are less comfortable or familiar with technology in general and, more specifically, mobile devices. To ensure the desired engagement level, they may require incentives. It is also essential to recognize that older adults may have significantly different app usage patterns compared to their younger counterparts.
As a result, UI and UX designers need to focus on designing interfaces that are:
- Intuitive and straightforward – the interface should be easy to navigate and understand
- Friendly and helpful – the interface should include features that make people feel comfortable
- Colorful – the interface should consist of colors that people who may be visually impaired can see
- Adaptive – designs need to change based on what device they are being used on (desktop vs. mobile)
- Functional – designs need to provide necessary tools for older adults, such as enlarged buttons or “call” buttons
Addressing Issues with Cognition
While not every older adult has cognition issues, deterioration of cognitive functions such as memory and concentration can be expected with age. As people mature and age, their brain slows down, and they can no longer process information as quickly as they could when they were younger. This does not affect their ability to complete the same tasks; it just may take them a little more time than it once would have.
Due to these cognitive changes, older adults are more likely to need more time to process the information they are presented with, making them less able to manage complex tasks that require quick intake and information processing for decision-making.
Different types of memory are impacted with age, including learning and recalling new information. At the same time, other types are preserved, such as the ability to remember events from long ago (remote memory), the ability to perform familiar tasks (procedural memory), and the ability to recall general knowledge (semantic recall). Technology may be used to help address the declines, while the preserved types can be leveraged in the design. For example, app notifications can help older users remember to do things in the future, data storage with easy access for phone numbers and appointments can support their challenges with retaining and recalling information for a short period of time, and the UI can be designed using standards from other apps popular among older adults to take advantage of preserved memory types.
In addition, there are several strategies UX and UI designers can use to address these limitations to ensure that these shortfalls are compensated for when designing for seniors.
- Progressive disclosure prevents cognitive overload from slower mental processing speeds in older adults by gradually introducing product characteristics instead of delivering them all at once.
- Minimalist design ensures that older people’s attention is focused on the most important tasks or parts of a screen rather than being pulled in multiple directions, which creates confusion.
- Providing consistent and clear feedback on task progress and reminders of the end goal helps address short-term memory issues. Keeping tasks that require memory of previous actions on a single screen is also helpful. Including reminders and tooltips for even common steps makes them more user-friendly for older users.
Improving Physical Interactions for Older Adults
Interaction is fundamental to the user experience. Every part of an interaction needs to be easy to understand and complete. This is especially true as the target demographic’s age increases since motor skills tend to decline, making complex gestures more challenging. Besides standard UI design best practices, designers should pay special attention to a few other areas to improve physical interactions for older adults.
Research indicates that older adults prefer buttons that are 16.51 mm and 19.05 mm square. However, Apple’s Human Interface Guidelines recommend a button size of 9.6mm when measured diagonally (44 x 44 pixels). Designers should generally view “recommended” sizes or distances as the absolute minimum to be used in an interface targeting older people as they are typically designed for the average user. Increasing recommended sizes 20-100% for apps and websites commonly used by older people improves usability.
Gesture control is a feature on many smartphones and tablets that can be used as a way for people to easily interact with their device without the need for a physical button. Implementing this feature can sometimes be difficult for seniors who are new to touchscreen technology, as they may have trouble adapting to a new way of interacting with their device. Seniors may have several unique interaction patterns compared to younger generations. For example, people over the age of 65 may use only one hand or even a single finger to type text on their devices. Similarly, they are becoming more accepting of gestural interactions with their mobile devices.
When creating apps for an older audience, the design should be simple and easy to navigate to ensure a better experience. To appeal to a wide range of people, avoid gestures that require more than two fingers because they can be difficult for anyone – regardless of age. It is natural for a person to be able to move their fingers in a horizontal, vertical, or diagonal direction. This type of movement is easily accomplished and doesn’t require a lot of effort or coordination. One important thing to remember is that it’s not advisable to incorporate gestures with quick movements, challenging positioning, or multiple gestures that require using both hands or more than two fingers. These may frustrate even the most tech-savvy older users as their motor function declines.
Designing Visual Elements for Users with Impaired Senses
There are nearly 20 million Americans with vision loss or blindness that is considered to be permanent. Vision loss is statistically the most common disability that adults in the United States experience by far, particularly older adults. Given today’s aging population, it is essential that web developers and designers take this into account when creating websites and apps. As most adults age, they typically experience a decrease in the ability to read small text. Those with this problem can either use reading glasses or opt for a larger font size for reading when available. Shades of blue are also less prominent to the aging eye, leading to reduced contrast perception when various shades of blue elements are used in a design. In general, contrast should be increased to make the text more readable for older adults.
Designers should keep text and button sizes to a minimum of 16px. The best solution is to make it easy for users to increase or decrease font sizes at will. Older adults typically prefer sans serif typefaces for on-screen readability. Before any website or web app is made public, it should also be tested for usability with a screen reader.
Icons are another area of particular concern for older adults. They should be labeled with text whenever possible to make the purpose of the icons crystal clear for everyone. Making sure that all icons and text are easily interpreted is also essential. Users who don’t need the supplemental text are not likely to be offended by it, but those who do need it might get lost in the interface if it’s not included.
Other Design and Development Considerations
Older adults with lower technology experience are often more inclined to use the app’s help functions and tutorials. Therefore, designers should ensure these features are easy for users to find, especially in areas where users may run into issues understanding what to do.
Younger users will generally want to skip onboarding screens and move right to the main content of a site or application. In comparison, older users will likely pay more attention to the instructions before dismissing them. Developers need to include contextual tips throughout an app that will be automatically displayed the first time a feature is accessed and available again when the user requests them to meet older users’ needs.
When designing apps specifically for older adults, one thing to keep in mind is to use clear language that is easy to understand and includes objective and educational content without sounding condescending. More often than not, an older user of technology will feel insecure while using it, particularly if it delivers critical services or during the learning phase. This can be compounded by a condescending message that makes matters worse and may even turn them off to the app altogether.
Increasing Usage Motivation
Younger generations are often very quick to integrate new technology into their lives, as they’ve grown up using it, and it’s a natural extension of their day-to-day activities. On the other hand, older adults have a slightly different outlook on technology and may use it quite differently.
Applications that aren’t useful, require connecting with large groups of people, or cause security and privacy concerns are generally neglected by seniors. Suppose an older adult doesn’t feel a mobile app is safe and valuable. In that case, they’re likely to ignore it, even if it sends out regular usage prompts and notifications, for long periods of time or even uninstall it. However, if they consistently experience benefits from using the app or website, they’ll intrinsically be motivated to engage with it routinely and respond to alerts, prompts, and notifications.
While gamification and similar strategies effectively boost app engagement with younger adults, they often fail to achieve results with seniors. Instead, making sure an app is valuable and easy to use is the best way to ensure that they use it consistently.
When creating app interfaces for older adults, it is also vital that designers incorporate easy-to-navigate privacy and security settings to allow them to feel safe and comfortable using digital tools designed for them. They should be transparent in how information is used and proactive and honest about any data breaches that impact the app and users to maintain trust among older users. In addition, they should keep in mind that aging is a complex issue, with many challenges evolving over the app’s usage lifespan.
It’s also worth noting that older adults tend to prefer tablets to smartphones. When considering the differences in screen sizes and ease of use, it is easy to understand why they prefer them. According to some research, the senior population is the primary demographic of tablet users. Unlike younger people, they adopted these devices much earlier and use them for various activities, including reading stories, communicating with family members, playing games, listening to music, or watching their favorite television show.
Conclusion
As the number of older adults grows every year, the development of mobile apps targeted towards this demographic is becoming increasingly important. Mobile apps can provide people with incentives to engage in new experiences. This makes focusing on UI/UX design for older adults all the more important.
Older adults require lower levels of compensation to feel comfortable using an application compared to their younger counterparts. Making mobile apps and websites accessible to all users, regardless of age or any physical or cognitive impairments (age-related or otherwise), can be accomplished by employing best practices and usability guidelines throughout development.
When designing applications geared toward older adults, designers increase font sizes, employ highly intuitive and common interface elements, use precise wording for all UI elements and other content, and provide concise, helpful tips for using the app’s functionality.
UI/UX Design for Older Adults Checklist
General Tips
- Make the interface intuitively understandable
- Personalize screens based on predominant use, condition, etc.
- Everything should display well under a wide variety of screen resolutions and brightness settings
- Remove time limits – give people plenty of time to complete their tasks (unless regulations prohibit this)
- Make your texts understandable for people—even the ones with medical information
- Support native visual and motor accessibility features in your apps
- Support accessibility options in notifications and complications (on Apple Watch)
- Support motion accessibility options to minimize animations, etc.
- Include Voice-over, speech-to-text, captioning, etc.
- Provide haptic feedback
- Adjust tappable UI elements based on their age
- Provide optimization options for left or right-hand preference
- Provide contextual help tips throughout the UI and add an option to turn that off
- Consider a voice-based interface
- Test against device-specific Accessibility setting combinations
- Support common typos in search
- Provide next step guidance on empty state pages
- Consider whether or not there will be a problem with glare from nearby windows or screens during normal use
- Simplify unnecessary steps, simplify different functions, and reduce the number of choices available to the user
Color Use
- Max 3 colors – and the right colors (cold-toned blue, green, and neutrals – keep backgrounds predominately white)
- Use high contrast colors and avoid problematic color pairs
- Check for color blindness accessibility
- Use color or images to reinforce meaning versus convey it
- Include a dark theme
Font Selection
- One font with varying sizes and characteristics
- Let users change the size of the text
UI Controls
- Controls have to be recognizable, visible, prevent touch errors, and be solidified by text or a visual clue
- Indicate if the element is clickable/interactive with visual cues – both when it is active and inactive
- Indicate the current location of the user within the interface. For additional Accessibility, make sure it’s easy to navigate your app/resource via voice control.
Images & Icon Use
- Design for Accessibility – minimize animations and don’t use flashing graphics
- Images and icons should always evoke only positive, pleasant emotions and create a feeling of safety
Video and Audio Use
- Videos can be helpful but must include a clear command and controls
- Never autoplay videos or music
- Include closed captions
Navigation Design
- Max of 3 clicks to any function
- Horizontal nav, tab bar, top bar, UI cards, or nav drawers over hamburger menus
- Place the main 20% of functions that matter on the home screen (record and receive information functions)
- Limit bottom navigation tabs to 5
Login/Out Forms
- Consider social login to minimize username and password issues if possible
- Explain password requirements explicitly
Use Profile Design
- Put all security options on a single screen
- Enable the app to blur out confidential info by flipping the phone up and down
- Show users who has access to their data with options
- Make sure all critical notifications shown in the app are accessible in a separate window/screen
Forms Design
- Make sure the form is truly needed
- Ask only what is essential and keep it to 5-7 fields per screen
- Use multi-step forms and conditional logic
- Use passive inputs and autocomplete
- Dynamically validate fields inline
- Use color coding but provide it with textual addition – for example, turn a fields’ border to red and include a detailed error message
- Leave space between the various form elements to make them easier to navigate
- Place the labels close to the fields – watch your spacing
- Provide clear field names and descriptive error messages
- Avoid displaying details in very small unreadable fonts
- Mark a field where a cursor is located with a highlight or other styling
- Save the data as it is entered
- Avoid any Reset or Clear options
- Use a Cancel button to help users that want to abandon a form, but make sure the Confirm button is large and more highlighted than the Cancel button
- Pay attention to privacy – Tell users in plain language about your plans to use their data
- Provide an adaptive keyboard based on the requested input type
- Make sure your input fields are super tolerant of errors and typos
- Support the use of hyphens in telephone and credit card numbers
- Accept alternative inputs for date and time entry, not just selectors
Other Features
- Provide an instructive onboarding using progressive disclosure – one tip at a time in small bits
- Make sure it’s easy to contact support to help users figure out how to use your solutions – bright buttons are good for that
- Don’t assume digital literacy; common issues for seniors include struggling with virtual visits, having old technology, or having limited or no access to a computer or the internet
- Enable users to create a shortcut to their favorite feature to help them stay in control and have the ability to do what they want when they want it
- Implement uplifting motivational messages, funny pictures, bright-colored accents, or other elements at different stages of a user’s journey through an app
- Implement usage checks with alternative prompts (SMS, email) to measure when the app is not used actively for a certain period
- In case of an emergency, provide easy access to such data as the doctor’s phone number and information about previous hospitalizations, allergies, and so on
- Enable data back up to the cloud in case of a lost or stolen phone
Standard Guidelines
Accessibility Testing Tools
- Android Accessibility Suite – https://play.google.com/store/apps/details?id=com.google.android.marvin.talkback&hl=en_US&gl=US
- Apple Vision – https://www.apple.com/accessibility/vision/
- Accessibility Developer Tools – https://chrome.google.com/webstore/detail/accessibility-developer-t/fpkknkljclfencbdbgkenhalefipecmb?hl=en
- WAVE Browser Extensions – https://wave.webaim.org/extension/
- Chrome Screen Reader – https://chrome.google.com/webstore/detail/screen-reader/kgejglhpjiefppelpmljglcjbhoiplfn
- Colour Contrast Analyser (CCA) – https://www.tpgi.com/color-contrast-checker/
- Contrast Ratio – https://contrast-ratio.com/
- WCAG Contrast checker – https://addons.mozilla.org/en-US/firefox/addon/wcag-contrast-checker/
- tanaguru contrast finder – https://contrast-finder.tanaguru.com/
- Accessibility Color Wheel – https://www.giacomo.page/en/colorwheel/wheel.php
- Color Blindness Simulator – https://www.color-blindness.com/coblis-color-blindness-simulator/
- Zoom Page WE – https://addons.mozilla.org/en-US/firefox/addon/zoom-page-we/
- Photosensitive Epilepsy Analysis Tool (PEAT) – https://trace.umd.edu/peat/
- ARC Toolkit – https://www.tpgi.com/free-accessibility-testing-tools/#toolkit
- Accessibility tools – Inspect – https://docs.microsoft.com/en-us/windows/win32/winauto/inspect-objects
- Web Accessibility Evaluation Tools List – https://www.w3.org/WAI/ER/tools/
- Functional Accessibility Evaluator 2.2 – https://fae.disability.illinois.edu/anonymous/?Anonymous%20Report=/
