Why you should care about form design

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.

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.

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.