Forms design: gather data and increase conversion

May 14, 2019
complete guide to form design

Most users wouldn't be able to define exactly what makes a good form. However, we all recognize bad form design when we see it.

Today, we are all used to forms – whether to login on social media, checkout of our favorite online store or to look for a cheap flight for that upcoming vacation. Precisely because online forms are so commonly found online, there is quite a bit of debate surrounding what makes good form design.

Is it how short the form is? Is it the visual elements and how they are organized? Is it how long users take to complete it?

Like “good UX design”, form design depends on many variables in terms of usability and quality. Most users wouldn’t be able to pinpoint exactly what makes a form good, with each person placing more or less importance on different elements of the design. But here’s the thing: we all know a bad form when we see one.

What is a form?

A form is considered to be a series of questions that use field entries to gather data. With that said, there is a wide variety of forms and many functions that each of them serve.

The data gathered can vary and serve different purposes within your product. Think from contact information, such as name and email addresses, all the way to data on how customers feel about a purchase.

Some forms are short and work as a simple means to an end – which is the case with login or checkout forms. Others deal in complex topics and need more questions in order to gather all the necessary data, such as customer satisfaction surveys or event registration forms.

Key concepts in form design

Since there are many different types of forms out there in the virtual wild, it’s only natural that designers will have a certain margin to create a form that is both creative and gets the job done. Form design can be rather strict when it comes to usability standards, but designers do have some wiggle room to make their form memorable.

Start prototyping web and mobile forms with Justinmind
Download Free

Regardless of wanting to create something unique, there are certain bottom lines that apply to all forms. Key concepts that play a massive part in the usability and user experience of your form, no matter what shape or style its made in.

Data Gathering

Data can be a tricky thing. When asking for data from users, it’s crucial that you have a well-defined idea of what problem or issue you are addressing – so you know exactly what kind of data you need.

If you want to know how users feel about the design of your online store, there is little sense in asking about the user’s exercise routine. Asking for unnecessary data doesn’t just give you extra work (both in the form design and data analysis) but it also means more work for users. In form design, less tends to be more.

example of data gathering in form design

Aside from the need to have a clear idea of what you need to ask, you want to make sure you ask it in the right way. And by that, we mean that depending on how a question is formulated or designed, it can be ambiguous. Ambiguous questions mean the user could answers with multiple meanings – which is a nightmare for data analysis.

This concept of making sure the data means what it actually means is called data integrity. It means that your data needs to be accurate and consistent – so no one has to second guess their own database.

The form in its purest form is a simple way to gather data that you can use for other ends - if the data integrity is compromised, the form has failed its main purpose.

Conversion

The main reason why any platform has a form is to ask for information. But the concept of data gathering has a close relationship with conversion in form design. That’s because the conversion rate will indicate how many users actually completed the form, compared to all the users who started it.

The conversion rate is a key metric in all sorts of form design, because it tells you if your design demands too much from users. In broad terms, the conversion of your form will depend on the quality and usability of the design.

A/B testing for form design conversion

A/B tests are a great way to understand your conversion rate. What exactly is it that spooks users away? At what point do they decide to throw the towel and move on to the next best thing? By making two versions of the same form with only one change, we can assess what works with users and what falls short.

There are two other key concepts that will massively affect your conversion rate: perception of complexity and interaction cost.

Perception of complexity

You know how it’s said that people make up their opinion of you in the first few seconds they look at you? Well, it turns out that they do that to forms too. That first glance users have of your form is crucial, because that is when they try to decide if they care enough to go through filling out the form.

example of perception of complexity in form design - from amazon

This concept is called perception of complexity and it refers to how intimidating your form design looks. For users, the sight of 20 field entries that are all thrown together and in no particular order is just horrifying. It looks like a lot of work and stress – which isn’t the user’s idea of a good time.

Given the chance, most users will abandon a form that seems too complex and try to find a simpler alternative. In order to minimize this effect, you want to break the form down to the absolutely necessary and decrease the cognitive effort users need to invest in the form – but we’ll get to that in the guidelines section of this guide.

Alternatively, you can check out chapter one of this guide and see in more detail what the UX design guidelines are for web form design.

Interaction Cost

We all know that forms are work – both for the designers and users. For designers, there is a considerable amount of work behind the finished form design, usually in order to improve the usability of the form. For the user, the work arises from the mental effort they need to make in order to complete the file, as well as the actual physical work involved.

Granted, physical work tends to be rather mild – but you would be surprised. People can get tired of scrolling or clicking, especially if they feel like this work doesn’t necessarily translate to progress in their task. This constant checking to see if they are approaching the end of the form adds to the mental work required from the user.

example of interaction cost within form design

Here are some of the things users regularly experience online that push the interaction cost to the skies – in a really, really bad way:

  • Having to look around for information
  • Typing and scrolling
  • Having to wait for pages or files to load
  • Having to insert information more than once due to errors/mistakes

Interaction cost is a central matter in form design, and is something you want to minimize as much as possible. You can lower the interaction cost by making sure there is no ambiguity or overly complex questions breaking up the form into screens, or adding a progress bar – improved usability usually accompanies a lower interaction cost.

Side note: You can read more about interaction cost in this article by the Norman Nielsen Group.

A rather useful thing to bear in mind when considering the interaction cost in your form design is that it will vary according to the individual user. Each element in the form contributes, in a way, to the interaction cost – but the real impact of each element will depend on the user.

A helpful example offered by the Norman Nielsen group is how typing represents a particularly high interaction cost to dyslexic users.

In general, it’s less demanding for the user to have you guide them around the form while holding their hand. It’s both less demanding and less intimidating to see questions in small groups, rather than a long list of entry fields.

Conversely, it is extremely demanding to waste time on a simple question, simply because the user isn’t too clear on what exactly the answer ought to be.

Differences between web and mobile form design

Form design for mobile and web can differ due to the difference in screen size and the way users have of filling it out. As most UX designers will know , mobile screens have little real estate for visual elements and require special planning.

example of difference for web and mobile form design

In mobile form design, every single little element needs to be thought out and tested. You have different factors to take into account as you design the form – screen size being the biggest one. The screen size in itself has an impact on the layout and choice of UI components for the form – which need to get as much done on much less space.

Dropdown menus are a handy for web form design. It’s not recommended for mobile forms due to it taking up a majority of screen space when open. A popular solution is to create a popup window in which the options are listed.

Aside from the classic issue of screen size, we have other factors that you need to account for in mobile form design which differ greatly from web form design. Here are the main ones.

Touch input

Users will use their fingers in order to interact with your form as opposed to the cursor, which represents an important detail for UX designers. Unlike its web counterpart, mobile forms need to be finger-friendly.

touch and finger friendly form design example of scale

We all have experienced mobile design that represents a challenge to users. Small action control buttons mean that users need to be highly accurate in their aim, and opens the door to accidental button-pressing.

Precisely due to the higher chance of accidental button-pressing, it is even more important that your mobile form does not have a clear or reset button. That’s the last button users would want to accidentally use!

Possibility of users filling out forms while in motion

Even though laptops have become widely popular, it is still considered unlikely that people will complete a form on their laptop while moving around. You can take the laptop with you, however, most of us might prefer to sit down at a cafe or a library before filling out anything online. There’s the need for internet connection as well as our physical need to be comfortable.

That is not the case with mobile form design. It’s a common thing now to have people using their smartphones to do just about anything on the go – that includes shopping, booking tables or tickets, sending out reviews or contacting people. And all of these activities involve forms.

example of contrast in form design for mobile devices

The main concern should be the clarity of the elements and the contrast of colors. Being on the move means people may fill in the form outside in natural light – which can be a problem with low contrast. Suddenly, users can’t see a thing on their screen, which of course renders the whole app form impossible to complete.

Guidelines for form design: web and mobile

Right. Now that we got the main aspects that set web and mobile form design apart, let’s take a look at the concepts that unify the two. The following factors regard, in general, the usability of forms and can be applied to all types of form design.

Keeping it short and to the point

The longer the form, the lower the conversion rate. With every additional question, a certain number of users will throw the towel before they reach the end. Users today don’t want to wait and don’t want to have to invest effort into the form – so your form design needs to be brief.

Stick to what is absolutely necessary and let go of the rest. In some forms, such as “Sign in” or “Subscribe to a newsletter” forms, the length tends to not be a problem – these types of forms are short by default. Keeping the form below 2 or 3 entry fields, however, isn’t always an option.

That is because from the POV of the user, losing the work they put into it would ruin the entire experience you carefully planned. If internet connection is lost, at least the users hard work won’t be! This is particularly important with mobile forms, as smartphones can lose internet connection more easily than a computer.

examples of form design guidelines

Break it up and offer a progress bar

Again, making forms that are truly short can be impossible depending on the situation. Breaking up the form is a practical way of decreasing the perception of complexity. By separating the from across screens, you avoid overwhelming the user at a first glance.

As an added bonus, users experience a feeling of accomplishment with each screen – bonus points if you incorporate a progress bar to go with passing screens. Separately, it givers users a reference as to how much work they still need to put in – a light at the end of the tunnel, per say.

Ask questions in logical order

Smart designers try to mimic actual face-to-face conversations in their form design – and it would be strange if, upon meeting a person, they asked you for your grandmother’s first experience drinking wine. People would expect you ask the name, the occupation and perhaps some background before getting to something so specific from your family history.

example of noom form design - rational order of questions

Ask questions that will be easiest for the user first, such as their name. Then, work your way up to the questions that can take a few moments to answer, such as asking the user to rate a service based on a scale, or asking for suggestions for improvement.

You can also group questions together based on their topic, so even the questions around can offer some context as to what the form asks from the user. That way, users can deduce that which they don’t fully understand.

Make your entry fields speak to users

In a regular conversation, people can simply ask for more context when faced with something they don’t understand. With your form, users don’t have a way of asking for help or for more information – it’s up to you to account for that in your design.

example of form design elements for context

People can be easily confused, and your form design should take every opportunity to get the message across to the user. In form design, you can (and should) use the following elements to add much-needed clarity to any form:

  • Labels: this needs to be a concise text of one or two words, which illustrate what the user needs to write/specify. Ideally, labels ought to be descriptive and paint the picture of what the actual question is.
In mobile form design, the use of floating labels is a handy way to keep labels out of the way (but in sight), making the most out of precious space.
  • Placeholders: Also called inline labels, these can offer additional information, such as a helpful example of a viable answer to the question. Extra usability points for placeholders that remain visible once typing starts.
  • Masks: Particularly handy for fields that require specific format – such as dates or credit card numbers. They work as a base so users don’t have to guess how to present the information.

Validation is a must

Few things are as annoying as filling out an entire form only to get a cryptic error message at the very last moment. Inline validation is the best way to assure users they got the question right, or let them know when something isn’t right.

example of inline validation in form design

Inline validation is a powerful tool to apply to your form – it motivates users by assuring that everything is going well so far. It also saves users the initial frustration of being told they can’t advance in the form due to a mistake.

Each platform has its own brand identity, just as designers have their own personal style. Inline validation can be achieved and designed in many ways – using a check icon, changing colors of the field or an actual written message or error.

L. Wroblewski found in his study that inline validation led a 22% increase in the success rate. How’s that for a helping hand?

The important thing is that there be communication between form and users that is both consistent and constant – usability is the name of the game here.

Use the right input controls

Input controls are the users’ way to move around and to make their decisions known to the form – you want these elements to be as clear as possible. The real danger here is less to do with getting users confused and more about preserving the integrity of the data you gather.

Some UI components can lead to ambiguous data, which can deliver a serious blow to your database. That is the main debate surrounding the use of checkboxes in forms.

example of different action control inputs for form design

Here is the thing: checkboxes don’t work if they come pre-checked. Be it for establishing consent, for determining a preference or decision by the user – if they are pre-checked, there is no knowing if the user even saw the box or is aware of what it meant.

This has consequences in your data, since it leaves doubt over what users want or what they need. Even more daunting is the practice of pre-checked boxes in order to establish consent of use of private data. This is illegal in the EU, and can impact your business even if it resides outside of the economic block.

It goes to show that some controls can have a bigger impact on your product than the simple look and feel of the action control unit.

Help users reach the end faster: autofill

We all appreciate it when the form itself does some of the work for us. By retrieving information that is saved in user’s navigators already, you effectively provide them with a shortcut.

While this practice does bring some safety concerns into place, it is widely used and accepted by people from everywhere. When done correctly, it will result in users being quicker to complete your form and a better conversion rate – everybody wins.

Check out Google’s post on how to set up autofill.

Error messages should add value

Nobody likes seeing error messages – they mean either the user did something wrong or that something is keeping the system from working correctly. Neither of those options is an ideal outcome for the user, and they just lead to a loss of time and effort.

example of descriptive error message in form design

In your form design, aim to have error messages that help the user understand the issue as opposed to simply letting them know something’s up. By telling the user exactly what is going wrong and how they can fix it (if it’s not a system issue) – we create a message that users won’t entirely hate.

Don't just tell them something wrong. Tell what is wrong and how they can fix it. That is what makes an error message that adds value to users who need guidance.

Separately, you also want to use different visual indicators of error that don’t rely exclusively on color. While a red line around the entry field would be generally perceived as an error message, it could be rather cryptic for visually impaired users. In order to try to speak to all users, go for actual icons that indicate the error so there is no doubt.

Button design deserves attention

The button can be a good addition to the user experience of the form. Logically, the button in your form ought to follow the same general guidelines for button design – but with a twist.

Forms tend to have primary and secondary buttons. The primary button is the one you want in the spotlight, and tends to relate to advancing to the next screen or completing the entire form and submitting the data. The secondary button can offer some help, such as the classic “Forgot your password?” button in login forms.

example of change of button state in form design by slack

Here are a few factors to consider when designing the button:

  • Be clear about hierarchy of buttons. You want there to be no chance of users accidentally pressing the secondary button when they wanted the primary one.
  • Don’t have a clear or reset button. This will avoid giving users an aneurysm if they accidentally reset the whole form, losing all their work.
  • Use microanimations to let users know the system understood their signal once the button is pressed, so they don’t have to wonder if the form works, or press the button several times.

You may also want to consider enabling the primary button only once all the required fields have been properly filled out. It’s quite handy if you make the button change its look once enabled – say, with a more intense color – so it attracts the eye of the user to that area of the screen.

The copy within a form: make or break the experience

Do we mean the microcopy in the buttons? Do we mean the labels and placeholders? Error messages? The answer is yes to all of the above. The copy in your form is absolutely crucial in order to communicate with the user, and applies to every single written element in the design.

Rule of thumb: You want the copy to be descriptive, clear and concise. Always.

Microcopy is often overlooked. Instead of general and broad copy in buttons such as “submit”, aim for something that illustrates the goal of the user. This will help users stay clear on what their goal is, the very reason they started the form to begin with – and acts as a kind reminder of the ultimate outcome.

example of descriptive copy in form design

Take care that your labels are descriptive too. The right work can decrease the number of tries users need to get it right. Consider the difference between two labels in a checkout form that read:

  1. “Name”
  2. “Name as on card”

While that additional copy may seem silly or unnecessary, people will appreciate the extra clarity.

On the role of UI components in form design

Consistency in UX design is a must. It helps users learn how to use your product, and plays a key part in how easily they can use it again afterwards. Consistent UI components have the potential to become a pseudo language between product and user – and that is what smart designers aim for.

Consider classic icons such as the burger menu. We all know what it means, and would expect to find a menu in the icon even if using a completely new product with which we aren’t familiar.

Confusion is your number one enemy when it comes to form design – you want to have an UI component kit to implement in all the forms of a certain product/platform. Choose a style, and make sure its consistently applied so that users can become familiar with the UI components.

example of UI component kit for form design: wireframing

Luckly, Justinmind has plenty of carefully designed UI kits that can attend to your every need in form design. We created a helpful list for you in chapter 3, including both Justinmind UI kits and other kits from the internet.

On prototyping and testing forms

Before we get to the theory behind the prototyping and testing of your form design, let’s take a moment to go over the main reasons why skipping these two steps isn’t an option.

Prototyping forms works for everyone involved on more than one level. Aside from the classic factor of communicating design concepts to non-design stakeholders, we have the crucial issue of getting your ideas down into something tangible. It forces you to confront every little detail of your creation, such as the behavior of each element.

The single most important reason to prototype forms, however, is user testing.

Seeing things through the eyes of the user isn’t easy. In fact, it can be a real challenge. After working on a design, it can be difficult to try to look at it from a different perspective. Suddenly, you can’t truly estimate how users will feel or what they might consider to be great or terrible. This shift in perspective, however, is crucial for a good product – be that a form or anything else.

If you find the idea of designing forms from scratch daunting, why not try out our Forms and Surveys UI kit? It has all the elements and components you need to get you prototyping great forms in no time.

The user testing phase is the opportunity to validate all aspects of your design. Sometimes, ugly works better than pretty with users because of sheer personal preference – as painful as that may be to the designer.

On prototyping forms: making it tangible

Before you start to truly prototype, the best strategy is to create a wireframe of the basic structure of the form design. This is the time for you to focus on the number of questions you want to include, how you want to organize them and where the key elements are going to go.

Remember: The wireframe of your form is meant to work on the layout and navigation of your design - not the color palette or brand identity.

After you get the wireframe out of the way, you want to use your wireframe as a base upon which you can build your form prototype. You want to consider the following factors when building your form design prototype.

Behavior and road signs

These are two different things that require time and careful implementation. As with planning where everything goes in your form, you also want to establish how everything behaves. That includes most of the guidelines in this post such as button states, field focus or a simple popup window with some helpful information.

example of form design for prototyping

Take the time to define everything, always bearing in mind that for the user each little clue counts. When you’re confused about a question, a little bit of extra information can go a long way. Account for basic issues such as system visibility status – you’re going to validate everything when the time comes.

But for that to be possible, your form prototype needs to be as high-fidelity and comprehensive as possible. Your prototypes needs to include everything the real form will in the future, including inline validation, any mask or placeholders, the real copy – the whole works. Anything that gets left out won’t be tested and validated, which means nothing should be left out.

We recommend designers consider the making of a success statement or screen. Users appreciate a confirmation that their goal has been achieved - and designers are encouraged to consider this screen or statement a part of the prototyping process.

On testing form prototypes: making it valid

Once your form design has been applied into a high-fidelity prototype, comes the moment of truth: user testing. It goes without saying that all the classic rules of user testing apply to your form – such as taking care to never teach users about the product, but to watch their honest reactions.

testing of form design prototypes: theory

Aside from those general guidelines of user testing, we do have two areas within the testing phase that we wanted to explore a bit more: key metrics and basic standards.

Key metrics work as an indicator of how close or how far you are from your goal. These can vary depending on what part of the design you’re testing, but will serve the same overall question. How can we tell if the form is good enough to be released? How can we classify people’s reaction to the elements and behavior?

You want to take notice of what represents a good user experience for you and your team. Time to completion tends to be a common metric for form design, for example.

Once you have the metric you want to keep a close eye on, it is time to define your standards. The standards of your testing will represent the goal you want to reach – the bare usability minimum needed for the form to be considered a success.

Going back to our example of using time to completion as a key metric: how long should users ideally take? What’s the maximum time they can spend on each question before you decide the question needs work? Do different types of questions warrant different completion times?

These are all questions you need to answer in the process of validating your design. Don’t fret if your design doesn’t reach the bar you set with the standards – identifying room for improvement is one of the main functions of user testing.

Every time you have to go back and reiterate on the design, you comb out small imperfections or mistakes that would have hurt the usability.

The wrap up

Creating formulaires can be tricky. Even though they can give off an illusion of simplicity, that is hardly ever the case. Like so many other products within UX design, forms have quite a bit of theory behind their designing – and many different factors that need to be taken into account.

Hopefully, this guide will have shined a light on all the different sides of creating a form. Feel free to check out a list of great form design to get you inspired on chapter 5 of this guide!

PROTOTYPE · COMMUNICATE · VALIDATE
ALL-IN-ONE PROTOTYPING TOOL FOR WEB AND MOBILE FORMS
Rebeca Costa
In-house writer, usability enthusiast and patron of all sleep-deprived designers