.svg){kind=small}
Pretty much every website has a form that will ask for your personal information in exchange for a service. Yet the design of these forms is often treated as an afterthought, either being ported over from the era of paper forms or being treated as a low priority task compared to “sexier” projects like homepage or product page creation.
At Zuko Analytics, we’re fully aware of how important forms can be for your business and we’re passionate about getting them right. That's why we've created software that help you optimize conversion - our form builder lets you quickly and easily publish forms with great UX whilst our analytics platform lets you track any of your forms to see where users are struggling.
This article outlines why the design of your form matters, gives you practical advice on how to lay the groundwork for good form design and provides principles and tips that will help you when you implement the form.
Form design is the process whereby you pull together and execute all the elements of your web form or checkout. It includes deciding on what questions you will ask, how the user will submit the information plus what the layout, format and experience will be. Good form design should alway have the user experience in mind in order to maximise the number of people who successfully complete the form.
Poorly designed forms will cost your business customers and money. On average, ⅓ of all people starting forms don’t go on to complete them. If your form is not well designed the proportion of people dropping out could be substantially higher than that, meaning you are needlessly throwing away value.
The design of your form affects the overall user experience which, in turn, will determine whether you have happy customers or frustrated ones. A well designed form shows that you have thought about the experience of your website visitors and are prepared to spend time ensuring they have a good one. This makes it more likely that they will successfully convert to becoming a customer.
To maximise your chance of success, it’s important to spend some time reviewing what you need from your form and planning how to deliver it. This section looks at the phases you’ll go through to do this.
The first part of any form design project is to ask yourself; “What do we want to achieve with this form?”. This could be as simple as “we need to capture an email address to add the person to a mailing list” or as complicated as “we need to get detailed financial and personal information so we can make an accurate and fair assessment of a mortgage application”.
Once you are clear on this you can assemble a team of stakeholders - marketing, compliance, website, finance,etc. They will all no doubt have opinions on the information needed so you’ll need to involve them but be careful that too many cooks don’t make a dog’s breakfast of your form (see below for how to avoid this).
Once you’ve got the team together, start by logging all the pieces of information you believe that you’ll need from your form user. It’s useful to create a matrix such as the one for an eCommerce checkout below that explicitly defines why you need each datapoint.
After you’ve collated all the possible info you might need, it’s time to move onto the next stage.
If you’ve got a cast of thousands in your form design team you'll no doubt have a bloated list of information that various departments want to prise out of the form visitor. Now is the time to think about the experience of the customer and cut that list down to something more elegant.
To do this, we’re big fans of the Prune - Tune - Postpone - Explain framework developed by OG form optimiser Caroline Jarrett. You can read more about the framework here but, in essence, you look at each of the questions you're planning to ask in the following context.
Prune - Do you need to ask this at all? If you don’t really need it then remove it completely. From the eCommerce matrix above we could look at the title field. Why do we need it? Is there any negative effect from simply removing it?
Tune - Can you refine the way you ask the question to make it easier for the user to answer. An example from the eCommerce checkout above may be the address field. Can you just ask for postcode / zipcode and use an auto lookup?
Postpone - Do you need to ask this now? Can you delay it until after the form completion (either on your site or via email)? The customer hobby question is the obvious example from the checkout matrix. It’s not critical to the success of the order so you really should be looking at some other way to get that information (assuming it is important enough to want in the first place).
Explain - Go into more detail on why you need the information from the user and how to answer it. The phone number is the classic case in point. People hate giving out their phone number so explaining why you need it is critical in getting them to share it.
If you'd like to understand more about Prune - Tune - Postpone - Explain we’ve run a video session with Caroline which you may find useful.
Once you’re satisfied with the truncated list of information needed you can start to do some high level structuring and writing for the form itself. In this section we look at some of the broad design principles you'd apply to deliver a smooth user experience.
As outlined above, you shouldn’t be asking for more information than you need. Use Prune - Tune - Postpone - Explain to get the questions down to an absolute minimum. Every unnecessary question you ask adds extra friction and cognitive load to the form, making it more likely that the user will not complete it.
There are various different types of form field that you can use in your forms. It’s important that you apply the most user friendly one for each piece of information you are asking for. Here, we run down the most common field formats and outline when you should (or should not) be using each one.
Generally the most common format, standard text boxes are used when the customer will need to type in a short piece of information like email address, phone number or name.
Although this humble format may seem simple you still need to be careful. Make sure that they are set to the right input type so the most appropriate keyboard is shown on mobile devices.
Longer form text boxes are for when a standard text box just won’t cut it. Use them if you want the user to enter a longer form answer and still be able to see what they have written.
Nice and easy, radio buttons are used for questions where you want an answer from a limited number of possible options. Yes / No questions or “Pick from these choices” are where you should be using radios.
Bonus less for you - radio buttons are so named because they replicate the functionality of the buttons on the old radio sets - when you press one, the others reset.
Dropdowns can be problematic for a variety of reasons, not least a poor mobile user experience when trying to scroll down to find the answer you want.
Generally, for questions with 6 or less possible options we’d recommend using radio buttons instead.
If you absolutely have to use dropdowns then make sure the list has smart defaults and is searchable so your user can quickly find the answer they want.
Checkboxes are the binary “tick here” formats where they are either checked or not. They are mainly used when confirming consent but can also be useful where a user can select multiple options from a large group - “Tick all that apply”.
The denouement of a form, buttons are typically used for the final submit. If you ‘re using a multi-step form then you can also use them for the ‘Continue’ and ‘Back’ functions between stages.
.png)
One point to be wary of: When developers add buttons to a form they often don’t give them a html name or ID. This makes it difficult for any analytics package to distinguish between different buttons. Do yourself a favour and ask your developers to add unique names to each button. It will save you a lot of hassle in the future.
The biggest structural question often comes down to whether the form is single step or multi-step. The research out there seems to indicate that, unless you have a very short form (4-5 fields), a multiple-step form will almost certainly convert at a better rate. This should be your initial hypothesis (unless proven otherwise by testing).
If you are using a multi-stage format, try and follow these rules:
Once you’ve got your structure in place it’s time to execute and deliver the form. There will be more design choices at this stage than in any other so it’s best to use certain tried and tested principles to make sure you don’t do anything too outlandish that might cause unintended user drop-out.
There’s much more on this in our Big Guide to Form Optimization (and in our specialised blogs on individual topics) but we’ve summarised some of the key design points below.
This advice is now so old it has grown a beard and has started ordering its own drinks at the bar but it bears repeating.
The research shows that single column formats mean faster form fills than multi-column (they also render better on mobile devices).
The length of a text box gives a strong visual prompt to the user on how much information they should enter. If there is a mismatch between expectations and box size it may cause confusion and friction.
A user needs to know whether each field is compulsory or not so you need to tell them. Don’t rely on an asterisk (which can be misinterpreted). Generally it’s best to just highlight which fields are optional with clear text copy.
We mentioned this earlier but it is so important we thought we’d leave you with this cheat sheet to make sure you get the input type right.
Keep it simple. Add the question label to the top left of the input. University of Basel research found this cut down the time needed to parse and complete form questions.
Error messages and associated microcopy are so important to the form experience we’ve written a dedicated article on good error message practice but the key things to remember are:
Placeholders have hidden UX dangers. Although they may look nice at first (such as this example below), once the user clicks into those boxes the placeholder will disappear meaning they could potentially forget what they should be typing or may enter the wrong information in the field.
Don’t be shouty. Studies show that viewers take longer to process all capitals than lower case (appropriately capitalised of course!).
Autofill can be a powerful ally in improving conversion rates. We ran a study across the Zuko form database that showed, when implemented well, autofill was positively correlated with an improvement in form completion.
Creating a button that enables the user to clear out all their answers and start again may seem like a good idea in theory but in practice it’s likely to lead to UX pain. You can guarantee a non-negligible number of customers will click it to see what it does and quit in rage when they realise all their hard work is down the drain.
This is such a big topic that there is no way we can do it justice solely in this blog post. We’ve summarised many of the salient points in our dedicated article on improving form accessibility but we’ve repeated some of the most important ones here:
If you’ve found this short overview of form design and optimization to be useful then download our free eBook on the topic to get into it in more depth.
Zuko is the most powerful form analytics platform available on the market. Find out how to improve your form and checkout conversion by taking a product tour.
PRODUCT TOUR
