Zuko Blog

Form Design: Tips and advice to optimize conversions

Improve your user experience with these best practice form design processes

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.

What is Form Design?

Why is Form Design Important?

The Planning Phase

Design Principles

Executional Tips

What is Form Design?

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.

Why is Form Design Important?

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.

The Planning Phase

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.

(i) Why do you need a form?

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).

(ii) What information do we need to ask for?

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.

Information Why it is needed
Title So we know the customer’s preferred title
Name So we know who the person is who is buying from us (and to address it correctly)
Email Address To confirm successful order completion and send updates
Payment details To process the payment of the transaction
Phone number To update on the order by text and in case there is a problem with delivery
Physical Address To deliver the ordered item
Customer’s hobbies To allow us to cross sell to them in the future

After you’ve collated all the possible info you might need, it’s time to move onto the next stage.

(iii) Audit and revise the information

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.

Design Principles

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.

(i) Minimise the information you ask for

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.

(ii) Use the optimal format

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.

Text Boxes

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.

Simple text box inputs. Source: Brand Alley

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.

Long Form Text Boxes

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.

Standard text boxes don’t always work

That’s when you need the extended versions

Radio Buttons

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.

A simple radio button format for an ecommerce payment option

Selects / Dropdowns

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.

This doesn’t translate well to the mobile experience

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

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”.

Opt in checkboxes from Moneysupermarket.com

Buttons

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.

A simple button execution

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.

(iii) Set an appropriate structure

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:

Executional Tips

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.

(i) Use single column layouts

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).

Source: CXL institute

(ii) Size text fields according to input

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.

(iii) Identify optional fields

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.

(iv) Set the correct HTML field type

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.

​​

(v) Label to the top right of the question

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.

An example of simple labelling done well

(vi) Make your error messages simple and helpful

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:

(vii) Don’t rely on placeholders

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. 

(viii) Don’t use all CAPS for labels

Don’t be shouty. Studies show that viewers take longer to process all capitals than lower case (appropriately capitalised of course!).

(ix) Enable autofill

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.

Simple autofill from Google

(x) No nuclear buttons

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.

A classic “Empty Basket” button from UK supermarket Tesco

(xi) Review your form for accessibility

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.

Looking to improve your form conversion?

Submit your form to get a free health check showing you:
  • Likely friction points leading to abandonment
  • Form elements contributing positively
  • Other areas for UX improvement
Zuko's Big Guide to Form Optimization and Analytics Cover Shot

We wrote the book on form optimization!

"The best book on form design ever written - 80 pages of PURE GOLD"
Craig Sullivan, CEO, Optimise or Die
DOWNLOAD THE EBOOK
(No email needed)

More from our blog:

Video Workshop: eCommerce Checkout Teardown
We review an eCommerce checkout, looking at the good, the bad and the ugly
Video Workshop: Fixing your forms
Check your form for these common UX issues that are causing abandonment

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
zuko full colour logo
Formisimo Ltd, Colony, 5 Piccadilly Place, Manchester, M1 3BR
VAT Number: GB181252425
Registered in England as company number 08859680
New Business: sales@zuko.io
Support: support@zuko.io