Form UI design: do’s and don’ts
Form UI design in a nutshell: we gathered 5 principles to boost conversion, along with 5 traps to avoid. Check them out!
Form UI design. It’s the typical side of UX design that gives off the impression of being easy and simple. You just throw a few entry fields along with what you want to know, and hand it to users — right? Unfortunately, that is very far removed from the truth.
Start prototyping web and mobile forms with Justinmind. Download free.
As it happens, form UI design does have quite a bit of theory and practical guidelines that you want to reflect in your design. Logically, there’s a lot of information out there on what you could do in order to make a truly usable form — but what about the common pitfalls? Where do most designers go wrong?
Don’t worry. We put together a list of the key Do’s that will make your form talk to users in a way that guides them towards completion. We also included some Don’ts that can have a disastrous impact on the conversion rate of the form. Let’s dive right in.
DO’s of form UI design: getting things right
01. Make it short and sweet
This might sound obvious, but it’s so important that it needs to be said. It doesn’t matter what the form is about — users aren’t happy to spend time filling out forms. People want to get it out of the way, and are all too willing to abandon the page when their patience runs out.
You absolutely have to leave out everything that isn’t necessary. The shorter your form, the better conversion it will have for the simple fact that people won’t have time to abandon it halfway. This is particularly true for mobile app forms, since typing data is even more work than a regular computer.
When it comes to form UI design, it’s never about quantity. You want to invest some real time into analysing each question in your form UI: is there a way around this question? Is there any way we can make do without it?
02. Give plenty of context
Having a form UI design that works is more than just getting people to the finish line — it’s about making sure users get there in the quickest and easiest way possible. It’s about making it a better experience and making sure you don’t leave confused users wondering what kind of data is being asked of them.
It’s fairly easy to get confused when filling out a form — it’s not like you can ask the screen what it meant with that question. And so, it’s up to you to make sure the form UI itself gives as much context as possible.
Offering context is key. By making sure that your questions are presented in a logical order and gathering similar questions into sections, you make sure the user has that context. Yes, there are many ways to include context in a form UI design — but the starting point should be the order of the questions and the way they are presented.
The main idea is that if users will work their way around the form, going from quick and easy questions (e.g. their first name) to gradually more complex questions (e.g. their rating of a service). If users don’t fully understand the question at hand, they can deduce the meaning from the other questions around it.
Placeholders for added clarity
Placeholders are a very handy tool for your form UI design. By showing a dummy text, you give users a clear example of what a valid answer to that question would be. People always do better when they have a starting point, a reference that points to the right direction. When it comes to designing the placeholders for your form UI, do watch out for the style.
The placeholder itself needs to be different to the font of the answers, so users can immediately tell that the text in front of them is simply an example and not automatically filled in. By making sure the two font styles are distinguishable, you don’t risk having users skip that question by mistake.
03. Validation is non-negotiable
No matter what type of form you’re designing — the form UI must have some form of validation. You need to tell users as quickly as possible when the data they inserted can’t be accepted — ideally, you want to tell them the reason why the data is wrong too.
This is because nobody likes thinking they are done with a task only to find at the last minute that they need to turn back. That rude awakening causes frustration, and can prompt the user to throw the towel. Instead, offer people reassurance that everything is going well — and when they get things wrong, explain how to fix it.
Inline validation can be done in many ways, although you do want to watch out for a few details:
- Colors alone shouldn’t be used for validation as that can be confusing for visually impaired users. You should always include a symbol that can be easily identifiable, like the classic check and cross icons.
- Make sure validation doesn’t happen until users are done typing, as incomplete fields are likely to be considered invalid — which can be confusing to some users.
Watch out for mobile screen validation
Mobile screens make challenges that UX designers face even more noticeable. One of the key issues when it comes to validation, is that you need to have enough proximity between the validation component and the entry field — just so users can see the connection between the two.
For mobile screens, this can be a real challenge, as we already have so little space to play with. Many designers now prefer to account for the validation elements within the very field entry, so there is no question as to the connection between the two — and no additional space in the screen lost.
04. The copy needs to add value
The way you organise your form UI is, in itself, a powerful way to make sure users can understand and complete the form. The copy, however, can impact your form even more. By copy, we mean everything from the actual questions and place holders, to buttons and error messages.
You questions should be clear, leaving no room for debate on what the user needs to do. Try to consider the small things, such as adding a bit of information to make sure the meaning is clear. It’s true that in the moment, these tiny things can seem a bit silly — but for the confused user who just wants to get past this form, it makes all the difference.
Quick example: Consider a checkout form for an online retailer. Instead of simply asking for “name”, go for “Full name as on card”.
The copy for placeholder is relatively easy, as it just needs to provide a clear example. This example is meant to help users understand the meaning of the question — but it’s also meant to show format. When it comes to data entry, format can have some ambiguity depending on what the user is used to.
Consider, for example, a simple field entry for a birth date. Does the day go before or after the month? Should the year have four numbers or only two? This kind of detail will impact the data you gather, and how much you can trust that data to be accurate.
One of the most important parts of writing the copy for a form UI design is the error messages. These little messages are absolutely crucial, because they don’t just let the user know something is wrong. Ideally, they should tell the user exactly what went wrong and how the user can fix it.
Quick example: When you write an error message in an email field entry, try something along the lines of “Please insert a full email address, complete with @”.
05. Prototype and validate your design
This guideline isn’t necessarily about the way you can design your form UI — but rather how you should build on that design. As most UX designers will know, any design out there needs to be prototyped and tested with real users before release. It’s the only way you and your team will be able to tell which way is up.
In general, UX is all about usability. It is true, however, that forms depend on good usability even more than other aspects of digital products. Users who don’t fully understand the questions or the functions behind each button will either abandon the form entirely or give the wrong piece of information.
In general: As the designer behind the form, you want to understand what users consider easy, what pieces immediately click — and of course, what areas make users doubt or pause.
No matter how hard you try to see things through the point of view of your users, there are things you’ll miss. It’s nearly impossible to truly understand what users want or need without some form of testing.
And so, you want to create a high-fidelity prototype that faithfully represents your design in all its details. Include the interactions, animations, visuals and the actual content you plan on using in the form. In order to obtain truly high-fidelity prototypes, you’ll need an advanced prototyping tool at hand — so you can develop the prototype as much as possible for testing.
You’ll want to study up on the best ways to carry out the user testing and identify the main areas for improvement.
It’s worth mentioning that you don’t have to, and indeed shouldn’t, wait until the very end to start testing. Logically, you want to test the finished design because you want to validate those key design choices that shape the form.
With that said, it’s always smart to test the prototype as early as possible. The testing doesn’t have to focus on the way the questions are worded — but perhaps a quick test of how the layout is organised, or how users react to the choice of buttons might be possible. These may seem like basic things, but you’ll want to validate them nonetheless.
DON’Ts of form UI design: getting things terribly wrong
01. Set the form up to fail
We know that the layout is crucial — but many don’t see one of the main reasons why you should separate the form into sections. On the one hand, we have the question of usability and the goal of not confusing users by asking questions in packs based on the topic.
The form, however, will depend on the first and perhaps most important test within a second after the user opens it.
That first impression will determine if users are actually willing to invest the time and effort into completing the form at all. If the form UI seems long, complex and generally like too much work, you can expect users to throw the towel before they even start.
This is because of a concept called Perception of Complexity, which is a basic way users try to predict how hard the form will be to fill in. As the designer, you want to organize your form UI design in a way that brings down the Perception of Complexity, and gives users the feeling that they can finish the form before they start to feel aggravated. Here are a couple ways you can achieve that in your form UI:
- Break the form up into sections, based on topics. This will help with the original impression as well as general usability of the form.
- Break the form up into several screens or pages. This is helpful for long forms, so that users don’t feel like they have more than they can handle at once.
- Save data as often as possible in long forms, in case anything goes wrong, the user won’t need to start over.
02. Make data entry difficult
This big DON’T of form UI design also touches on the point above. You want to make things as easy as possible for users, which means you also want to think about each question you include: what is the easiest way to ask this? Is there a way to break this question up into parts?
When it comes to questions that may have more than one factor in the answer, elaborating and typing these answers requires a lot of effort. A silly example is the simple question of the user’s birthdate:
The entry field could be a simple empty slot, perhaps with a placeholder to show format. Alternatively, however, you can also have 3 small dropdowns that show day, month and year. This is a subtle change, but it involves users thinking of each part separately instead of the whole — this requires less energy from the user’s brain.
Applying this to the whole form should result in a form that may not be shorter, but will be easier for the user, and that’s a huge part of what makes a good form UI. The added bonus? By separating answers into different entry fields, you leave less room for confusion and errors.
03. Have two columns in the form
Two columns are a general no-go when it comes to form UI design. The main reasons are about usability concerns and responsiveness.
The fact is that by having two columns, we allow the possibility that users won’t have a clear route to follow in the form. Which side comes first? Should the user complete one column entirely and then move on to the next? Why not just make that second column another screen?
In general: Having two columns is prone to misinterpretation. You can read why that is with this helpful article on the poor usability of two column forms.
Secondly come the issues of responsiveness. Having two columns is simply not mobile friendly, which means your form will be a real problem for all users with a smartphone. The more time passes, the more important it is to account for mobile devices in UX design.
Today, your form absolutely needs to be responsive — and you need to choose a layout that works with as opposed to against what you’re trying to accomplish.
04. Not minding the little details
Like all aspects of UX design, form design includes big things and small details. So, what are the details in your typical form UI design? Details include small things such as making sure you have field focus, offering a success screen or even having changing button states in the form.
Here’s the thing about details: each and every one of them is an opportunity for your form UI to say something to the user. The more the form says, the less confusion there will be. It can be tempting to assume such small things won’t make much of a difference, but users will appreciate the difference.
Here are a few details that you should never overlook or ignore when designing your form UI:
- Field focus: helps users stay focused on the question at hand, avoiding mixups.
- Disappearing labels: don’t offer help only to take it back when users start typing. People may need to refer back to the label mid-answer.
- All microcopy: things like buttons, placeholders need to be well-thought out.
05. Not telling users what is happening
Users and form need to communicate — and communication is a two-way street. Just like we want the user to share their information by entering some data into fields, users want answers too.
It’s a known usability issue when users feel they are in the dark when it comes to the working of the product. Nielsen included it in his legendary Usability Heuristics for UI Design, in the form of Visibility of System Status — and for good reason.
Always bear in mind: People like to know what is happening. That can be tough when dealing with a machine or with a mass of code — it’s not like you can poke it and ask if everything is OK.
It can be easy for users to second guess themselves and rewrite things needlessly, leading to inaccurate data. It’s just as easy for users to press the same button repeatedly while under the impression the form hasn’t picked up on their command.
Notice Airbnb’s navigation.
A similar factor is the navigation — just as you want to tell users what is happening, do try to tell them where they are within the form. Breadcrumbs and other creative alternatives like progress bars help by giving the user a sense of how much there is left, as well as offering users a certain feeling of accomplishment as they venture closer to the finish line.
In your form UI, aim towards always having a way to tell users that there is some action happening behind the screen, even if it’s just a simple loading animation. Try to include breadcrumb-style navigation for added clarity.
The wrap up
Designing a form UI can seem easy, but it does come with several factors that influence our concept of good form design. By making sure you do your homework on the theory behind it and by getting close to real users, you’re likely to reach an interface that gets the job done while also showcasing some great design skills.
Hopefully, with this brief list of Dos and Don’ts of form UI design, you’re ready to get the basics done — and to build on it. Remember: in the form design game, confusion and ambiguity are your sworn enemies.
Originally published at https://www.justinmind.com on August 12, 2019.
