The world’s population is growing older, with the age group of 65 and over growing the fastest. The World Population Prospects 2019 expects that by 2050, one in six people in the world will be over the age of 65. The aging process brings about some physiological and cognitive changes that are almost inevitable. These changes need to be compensated for when designing for this age group.
In this post, I’ll share four best practices around designing forms targeted at older adults to make sure they are accessible and easy to fill and submit. I’ll also pair those with some of the thinking behind them as well as some studies and research references.
Four considerations when designing web forms for older adults
1. Use a Single-Column Layout
When you are creating a new form, or changing an existing one to improve its conversion rate, the way your form fields are laid out plays a major role in determining how easy it is for older adults to fill it. The recommendation to avoid multi-column layouts in forms is quite well known. Simply stated: every form field should occupy its own row, the previous field is one row above it, and the following one should be in the row below. Why? First, this layout streamlines the eye movement from top to bottom, making it easier on the eye than the z-shaped movement required in forms with multiple columns. Second, with a multi-column layout, you risk your users not noticing the second field in the same row. If you find these reasons not convincing enough, CXL Institute have just the thing for you. They conducted a study comparing form completion time between single-column and multi-column forms, and found that participants completed single-column forms 15.4 second faster than multi-column forms on average. Faster completion means easier completion, means more conversions.
(reference: https://cxl.com/research-study/form-field-usability/)
2. Consider a Multi-Step Form with One Question in Each Step
A single page chock full of fields waiting to be filled can be a daunting sight, and your users would be grateful for being spared the trouble of having to fill them. If your form includes a lot of questions that are absolutely necessary, think about how you can present these questions with the least visual load possible. This can be achieved through multi-step forms: forms that are divided into multiple steps, showing only one step at a time. Each step could include a single form field or more. This tactic achieves two purposes: first, it reduces the amount of information the user has to process at a time, second, it gives more room in your form to increase font size and spacing and still make it look visually appealing. With the addition of intuitive navigation buttons and step indicators, you would have created a form that is easier and more pleasant to look at and fill.
3. Take Care of Field Labels and Hints
Your users need to know what each form field is about and any additional hints, descriptions, or examples of the information required in those fields. Not just that, your users need to see this information all the time, in all field states, without having to click outside the form field or delete what they just wrote. What does this mean in practice? This means clearly visible 1) fixed labels, and 2) hint text, that are placed outside the form fields and stay there no matter where the cursor is.
Some commonly used patterns you might want to avoid:
- Replacing labels with placeholder text
When you let go of labels and use placeholder text instead, what happens is that when the user starts filling a field, the placeholder text disappears, which strains the users’ short-term memory. In addition, some screen readers do not read placeholder text aloud. These two reasons should be enough to avoid using this pattern in a form designed for older adults
- Floating labels
A floating label is a label placed within the field as a placeholder text, and when the user starts filling the field, the placeholder/label moves to the top as a floating label. The problem with this design is that it is easy to mistake a placeholder text for an automatically-filled field, which makes it less noticeable and more likely to be completely neglected. According to NN Group, eye tracking studies showed that empty fields are easier and take less time to locate than filled ones.
When it comes to form field labels and hints, accessibility should be your number one priority when designing for seniors.
(reference: https://www.nngroup.com/articles/form-design-placeholders/)
4. Make Sure Your Error Messages Are User-Friendly
Users filling your form are bound to miss a field or the input requirements. This is why you need to make error messages as clear and easy to follow as possible. There are three important elements of a user-friendly form field validation: timing, location, and clarity. Error messages are best displayed as soon as the user finishes filling the field, aka inline validation; not before input is complete as it can be annoying, nor when the user submits the form as that requires more interaction time from the user to locate and navigate to the field. Displaying the error message next to the field in question minimizes working-memory load for the user, as it allows them to easily locate the error and correct it. Last but absolutely not least, craft actionable, human-readable, and precise error messages which make it clear for the user what they have to do. In addition, use color -normally red- and iconography for additional ease in scanning and locating an error.
And there you have it! Four considerations when designing web forms for older adults. That doesn't cover it all though, so I'll be back in a future post about this topic.
