Forms that get results

Does the form below inspire action or dread? 

Can you tell what school this may be for? Does the design scream “Fine Arts”? Can you tell what the purpose of the form is? If you answered “no” to any of the above, you probably wouldn’t be thrilled to have to fill it out. When it comes to online user experience, standards have come a long way in just a few years – and so have expectations. People simply don’t want to deal with awkward and cluttered forms anymore. If you want to get people actually using your forms and save yourself a ton of admin time, you need to start thinking differently about how to build them.

A well designed form…

Plan first, design second

At a glance, your forms will either invite users to complete them or make them cringe and abandon them. Even the slightest moment of user hesitation when completing a form can significantly hurt the response rate. Before you begin building your form, spend some time planning how to request and collect  information.

Do you really need it? 

One of the biggest reasons people abandon forms is that sensitive or too much information is being requested. A form to buy football tickets doesn’t need 12 questions and a form to sign up for a newsletter doesnʼt need a date of birth. People are already resistant to give up their information online, so donʼt give them a reason to walk away.

By eliminating unnecessary form fields, you can significantly increase your response rate. In a study by Unbounce, an 11-field contact form was replaced with a 4-field version, resulting in a 160% increase in the number of forms submitted while the quality of submissions stayed the same. Editing back on the information you collect can be difficult, but as you plan your questions, ask yourself if you really need it, or just want it.

Take advantage of display conditions to keep your form clutter-free

Web forms have a big advantage over paper and PDF forms with dynamic fields which can adjust to the user’s responses. If, for example, a user selects “Yes” to having something mailed to them, a new field will be automatically added to the form for the address.

By only showing showing fields to people who have a need for them, you can keep your form short and sweet.

 Form style matters

A first impression is important. When respondents see your form for the first time you want them to have a positive reaction and not get scared away. Forms are, by definition, asking something of users so if you want them to provide information they need to feel comfortable and secure doing so.

Make sure your brand is well represented

Sounds pretty obvious, but there are plenty of forms out there that have no visual link to the organization that created it. In an age where online phishing and fraud is increasingly common, your logo, colors and styles help inspire confidence in the user. You donʼt need to be a Photoshop master, even a simple banner at the top with your logo goes a long way towards making it yours.

Clearly state the purpose of the form

The first thing anyone will read on your form is the title. It should be succinct yet specific, and the purpose of the form should be immediately clear. Generic phrases such as  “Registration” or “Sign Up” arenʼt terribly helpful – registration for what? Where possible, try to use active language that invites users to get started.

Use fonts types and sizes that are easy to read

Thereʼs a time and place for fancy fonts but your form isnʼt one of them. Users will be completing their forms on desktops, tablets and phones so using a clean, common font will make it easy to read. Fonts that display well on all screens include Arial, Tahoma, Trebuchet and Verdana. 

Your fonts also have to be big enough to be legible across all devices. 14 pixels or 16 pixels is typical but when in doubt, bigger is always better if space allows.

Vertical, not horizontal

Forms with a simple vertical layout are always better than multi-column layouts. This is a little more difficult with paper and PDF forms where space is at a premium, but in general users complete forms from top to bottom. Web forms have a clear advantage here, but the following guidelines can be applied to any medium.

Avoid multi-column layouts

One of the problems with form fields in multiple columns is that your users are likely to interpret the fields inconsistently. Multiple columns introduces the possibility of different interpretations in regards to where to start and what to complete.

A usability study by the Baymard Institute found there were 5 different ways to interpret how the fields relate in just a two-column layout, all pathways to user confusion:

• Are the fields related?
• Should they only fill out one column? Or both?
• Is there a certain sequence to the fields?
• Peopleʼs eyes want to look down to the next box, not to the next column.

Single fields versus split fields

Split fields are the bane of the web user. These are the fields that break up information, such as a phone number which gets divided into three fields (area code, central office code, and subscriber number).

While the intention is good, these fields are difficult to both understand and interact with and many users will get it wrong on their first attempt. Even simple zip or postal code fields are often completed incorrectly as users will only glance at the first field and make an assumption.

A recent study found that when a form uses a split field, it tends to be where the eyes focus first because itʼs seen by the brain as an unexpected element. Split fields also cause extra frustration on mobile, as users will likely tap each field separately to complete the form.

Using a single field for the name, phone number and postal or zip codes reduces interaction issues and allows the users to move seamlessly on to the next field.

Create Sections

Grouping your form content in a structured way provides users a way to easily scan information required at a high level, and can provide a sense of how information within a form is related.

Create a visual hierarchy with snack-sized segments

People will scan through a form in seconds, so creating clearly defined sections will help create a visual hierarchy thatʼs easy to understand and follow.

In general, humans like to find patterns and group the things they see. Even when looking at two identical circles, our eyes will scan for any possible differences. This is our innate desire to “classify” objects.

Form design works in the same way, especially if you need to ask for a lot of information. Creating sections by grouping related information together and applying color shading, extra white space or a subtitle makes completing the form much more palatable. Instead of a 15-field form, the user now sees a 3-part form with only 4-6 fields.

Tell users what happens next

People like to be in control. Submitting the form without knowing what exactly is going to happen creates uncertainty. Uncertainty causes friction. The user has taken the time to complete your form and a simple “Submit” button doesnʼt give them a lot of confidence in the steps after submission, it only raises the question “what now”.

Create a helpful call-to-action

A call-to-action (CTA) is marketing lingo for the phrase you use to provoke the user to complete an objective, or for our purposes, to complete and send a form. It can reinforce the purpose of the form itself, give direction or even provide a way to measure the success of your form by testing different CTAs and seeing what gets the best response. If you have trouble deciding on your CTA, take a look at other forms on the web. CTAs are that important that many larger companies have put considerable thought and research into finding ones that get clicked.

Confirm receipt of information

Youʼve filled out a form with all of your private information, clicked the button and your details go out into the ether. But what if they donʼt arrive at their intended destination? Did you forget to include something? Can you prove you even sent the form? If youʼre not sure, youʼre likely to email again or pick up a phone to verify the form was received. Not the best use of anyoneʼs time.

An emailed confirmation puts the user at ease and can greatly reduce the number of questions to the organization. They also provide the user with a sense of completion, along with a way to reference the details they submitted.

The Bottom Line…

You can add all the content you like on a form, but if it’s not presented appropriately, you may end up loosing a few users. Using the tips above, you can build effective web forms, and get the results you want!