The internet is composed of input fields. Whether it’s signing up for a social media platform, conducting ecommerce credit card transactions, or applying for a financial product within an online banking system, filing a form is the first and/or final step of nearly every action you perform on the internet. Working in a Product Design team brings many possibilities to design (and redesign) application forms. Our recent application form redesign process for Newable is just one example. Depending on the industry, the range of data your form calls for is different. Regardless, I would risk the assumption that most of them, especially for fintech, are strongly rooted in an offline environment. These forms usually originated in financial institutions and require dozens of specific data types. But translating the form directly to a digital format is not enough. The process can still remain just as long and complex as it was offline. Given that the form is the last hurdle for the user before they accomplish their goal, you should work on improving the user experience of the form until it’s quick, seamless, and efficient. However, a great experience doesn’t emerge from a vacuum. Thinking about the form design process, you immediately notice some aspects in dire need of improving. You should help the user stay focused and mindful by reducing cognitive load while also accelerating the user’s progress through the form. In this article, I’ll present some general guidelines and best practices for application form design. Use them well, and you will cover all the aforementioned issues.
Reducing cognitive load through application form design
1. “One thing per page” approach
In the case of long and complex application forms, like the ones prevalent in fintech (e.g. insurance or loan application forms), dividing them into multiple smaller pieces is a common way of reducing the user’s cognitive load.
Presenting smaller, semantically aligned sections helps the user maintain focus on one specific task, and on the chunk of information that they are asked to provide.
Presenting the form as a multi-step process allows us to keep the user constantly informed about their location within the application flow. If they need to, they can also easily switch between steps.
The “one thing per page” approach also makes fixing errors much simpler compared to accordion panels, for example. Accordion panels have their place, but they often become more distracting when you start scrolling through them looking for an error.
2. Labels connected with titles and description
Grouping input fields visually with appropriate labels reduces the risk of user confusion. It also improves the readability of the form by clarifying its structure and visual hierarchy.
3. Minimizing dropdowns
A general rule says that you should use dropdowns as a UI element if you’re dealing with more than 5 elements to choose at some point in the form.
Otherwise, you can comfortably replace dropdowns with radio buttons or segmented controls.
Presenting the user with all the possible options without hiding them in a dropdown comes with scannability boosts, which in turn has a huge impact on user performance and efficiency.
4. Validation (confirmation icons)
Inline validation providing instant feedback prevents the majority of mistakes that users can make in filling out the form.
However, that might not be enough when you take into account the users’ color vision deficiency, for example. In that case, additional confirmation about the button state through icons will cover the issue.
Accelerators in form design
1. Helper text
When it comes to supporting the user in filling out the form inputs, there is no better help than keeping them fully informed about the required data.
Pairing the input field with an appropriate title is one thing, but another important aspect from the designer’s perspective is giving the user a clear indication which data format the input field calls for. For example: should the phone number include the area code or not?
Adding an example of the data format just below the input field or in a tooltip on the side reduces the number of errors the user can make due to data format misconceptions. Detailed tooltips are especially useful when the data type you’re asking for calls for some additional explanation, such as the reason you’re requesting it or what it will be used for.
2. Autocomplete
Although autocomplete as a form feature may appear slightly more complicated when it comes to technical implementation, it is definitely worth considering if you want to accelerate the form filling process. For instance, you can implement prefilling address detail input fields based on the postal code or geolocalization.
3. Progressive data collection
Nothing is more annoying than not being able to interact with a platform without facing a wall of text and inputs first.
Progressive data collection is an approach in which you first ask the user only for a limited number of data types, necessary to start interacting with the system. Only then do you ask for additional data based on the actions that the user is about to perform.
For example, for a user that’s about to search through a range of products at an online store, requesting their email address and name will be more than enough for marketing purposes, such as sending them newsletters or recommended product offers. Other necessary data, like address details or the payment method, can be requested just before the user starts shopping.
4. Good copywriting
Last but definitely not least: good copywriting. Clear, self-explanatory fields or section descriptions and simple tooltips are key to keeping the user informed and in charge of their actions.
Final thoughts: the benefits of great application form design
What is the greatest benefit of supporting user performance and covering all the potential issues as they fill out a form? Increased efficiency.
But that’s not the only win you get from solid application form design.
A seamless user experience will also increase the conversion rates of your forms, boosting your progress toward achieving your business goals.
Additionally, if your form calls for sensitive data or involves money transactions, it is hugely important to keep the user comfortable during the entire process. A negative experience could harm your organization’s brand and credibility.
And finally, on a more human level, a well-designed application form is simply a breath of fresh air. It makes everyone’s daily digital lives easier.
After all, isn’t that what good product design is all about?
Thanks for reading my debut article on the STX Next blog!
If you want to see more cool stuff by our Product Design team, follow us on Behance.
And if you're nterested in more UX articles on our blog, how about you give this a read: Software Product Design: What Is the ROI of Good UX?
