Whatâs the first thing that comes to mind when you think of exciting design?
- Delightful microinteractions?
- Slick transitions?
- Beautiful illustrations?
Chances are you didnât immediately think âgreat forms,â did you?
Form UX isnât many peopleâs idea of excitement, but when we take into account the impact it has on your overall product UX, we think it should probably deserve a higher billing.
Form UX matters
Forms are an integral part of almost every onboarding flow and the foundation of many user interactions. Sadly, forms are often overlooked and donât get the attention they deserve.
Have you ever found yourself doing a tax return or an insurance claim and having to start all over again on a form because of some unknown error? Aaaaaargh.
From online transactions to product subscriptions, complex onboarding flows and event registrations, forms are just always there. For many modern businesses, forms are often the only point of contact between you and your user.
Yet despite being something users inevitably encounter when they use a digital product, forms are almost never the thing users are actually looking for.
As the bible of form design Simple but Crucial User Interfaces in the World Wide Web puts it:
Users mostly visit a website with an intention that is related to the content of that site (e.g. purchasing an article, gathering information)…they do not visit a website with the intention or goal of filling in a web form.
Thatâs why a seamless, clear, and well-structured form is crucial to the success of these processes, and ultimately the success of your product. 81% of users surveyed by The Manifest say they have abandoned a form and well over half (59%) have done so in the last month.
Ultimately, no one wants the lasting impression of their brand to be one of frustration and wasted time.
The actual visual design of a form is less challenging today. This is mainly due to the extensive research that has been done through the years on good form design and outlining best practices.
Form UX Elements
So what are these best practices that you need to pay attention to when designing forms?
All the small things
Micro-level design decisions such as segment alignment, input field format, spacing and correct labeling are really important.
Visually, something as simple as getting everything to line up is super important. Making it clear what the flow of the elements on the page is will help people move from one task to another easily.
From a technical point of view defining input types and being clear about what type of data is inputting needs to be thought about. If youâre asking someone to enter an email, use an email input (<input type=âemailâ>) so that mobile users get quick access to that @ symbol directly on their keyboard.
These small details can easily be overlooked, and get in the way of a seamless form submission experience that users donât think twice about. And thatâs the point- they should never have to realise the hard work that goes into making a form submission easy.
Our job as designers is to help the user achieve their goal, and avoid leading them to despair when theyâre filling in their data.
Our job as designers is to help the user achieve their goal, and avoid leading them to despair when theyâre filling in their data.
Colour code
Colour should never be used on its own in form UX, but rather in tandem with code and instructions, ie: green with a tick if itâs correct, red and an accompanying message if itâs wrong.
You need forms to be usable by everyone who encounters your product. Mistakes with colour mean that people with partial sight, colour blindness or colour vision deficiency, and those who use monochrome, text only, or limited colour displays will seriously struggle.
Access all areas - Designing experiences for everyone
We discuss the importance of accessible design in a ton more detail.
Messaging matters
While we may take the messaging aspect for granted, itâs something that gets lost and blocks the smooth flow of the userâs interaction with your website/form.
Validation and success messages are key, particularly when thinking about making your forms accessible to everyone.The messaging surrounding the form elements at each step of the process is crucial to allow people to easily understand what they have to do to move quickly through the flow. If something is wrong then the error message needs to make it clear and not just flag up that thereâs an error.
Responsive form UX
Another crucial aspect to take into consideration when designing forms is responsiveness.
Web usage is transferring exponentially to mobile devices, so the forms your product uses simply have to translate well onto peopleâs phones.
With a smaller amount of space available you might need to be smarter about what you do (or donât) show on mobile screens.
The experience and interaction can and should be very different for multiple instances, and itâs important to take advantage of whatâs unique to each context.
For example, you must always make sure youâre leveraging the best input methods for any device. Providing a good alternative method for picking dates on a desktop browser is advised (the native ones are less than brilliant) but using the tried and tested native options on mobile is often the better choice (theyâre well-used and much better).
Often this means a progress bar will look different on desktop and mobile, but weâd argue this is a sacrifice worth making to retain the same quality of functionality.
The golden rules for mobile UX design
People depend on their mobile devices every day for so much more than communication. Here are our top design considerations đ±
Localisation
Localisation is needed when a company operates in a global market, covering countries on different continents that use a spectrum of languages and alphabets. Itâs something that needs to be taken into account right from the start of the design process to avoid headaches later down the line when introducing new countries.
Even if extensive testing is done with a form written in English, there is no guarantee that the same form would work equally well in German or Japanese.
Conclusion
If youâre still not convinced that we shouldâve spent so long banging on about form UX, perhaps a cautionary tale from Citibank will tip the balance?
The TL:DR version is that poor form design meant instead of sending $7.8 million in interest payments, a hapless subcontractor transferred $900M to creditors đ± – $500M of which is still missing in action.

Would you be able to make the right selections in this Flexcube form?
Optimizing forms might just save you millions!
Forms that are simple to use, accessible and impede minimally on the task people actually want to get on with are the way to ensure happy users, high conversion rates and a profitable product. Pretty exciting after all, weâd say.
Product Makeover
Is your product being held back by its form design? Let us work our makeover magic âš