PRO TIP: HOW TO DESIGN FORMS

We’ve assembled a set of rules that’ll help you in designing the perfect form. Keep in mind, rules are made to be broken.

Let’s start off with the basics:

Just one column

This goes against the conventional wisdom of “putting things above the fold” (as almost all best practice does), but multiple columns disrupt the vertical flow of form filling. There’s also a problem of legibility. Forms with multiple columns force users to use a combination of vertical as well as horizontal stochastic eye movements which isn’t optimal for readability.

Top align form labels

To the point of limiting unnecessary eye movements, it pays to top-align the labels to the form field. Users complete forms with top aligned labelled forms at a faster rate than left aligned labels. Top-aligned labels also translate well to mobile sizes.

However, there’s an exception to this rule. Floating labels that animate to the top position when the user interacts with it. This is quite an effective method that reduces clutter & looks modern (if you can be bothered with the extra time in development).

Adequate spacing between fields

Make it clear which label is for what label. Don’t be afraid to maximise the spacing between labels so there’s no confusion.

Avoid dropdown menus where you can

The human brain is only capable of retaining 5-6 items at a single glance. That is to say, at a glance if the number of items is less than 7 we don’t have to commit anything to memory. Instead of making the user click through a cumbersome drop-down menu, why not show all the options?

For long lists, make drop-downs type-able

Users have become accustomed to typing the first letter of what they’re looking for once they’re opened a drop-down menu. Why not help them even more by making the field type-able. This requires a little more dev work but it’ll make the form-filling process infinitely easier for users.

Name your buttons properly

With anything online you want to be as concrete as possible & stay away from wispy or ambiguous terminology especially when you’re dealing with something sensitive like credit card transactions. Avoid giving your buttons nondescript names like “ok”, or “submit”. Let the name suggest what the form is going to do or where the user will end up next.

Make descriptors clear

There’s no shame in explaining more about what’s required for a particular form field. Try to avoid placing description text within tooltips that require a mouseover. Generally, they have a very low interaction rate & it’s very common for users to fill out entire forms without the use of a mouse (we’re getting better at using the tab and arrow keys).

Use field lengths to hint length of the input

The length of the field suggests the length of the answer. It’s helpful for fields that have a limited character count like phone numbers, zip codes, to be made purposefully shorter.

Ditch the * and label fields as “optional”

Most people don’t know what the little asterisks means. It’s a learned behaviour and isn’t necessary. Simply stating a field is optional is more clear.

Use input masks

This is a technique that shows to users exactly what kind of input is required. A masking effect appears when a user clicks into a field and formats the text automatically as the field is billing filled. A wonderful technique that assists in filling out phone numbers, credit cards, currencies and more.

Distinguish the primary call to action

As much as possible, users appreciate a guided experience and preferably one where it’s obvious where to go next.

Don’t overdo date choosers

This one is contentious. Unfortunately, most users struggle with the unconventional ones as they’ve been trained by decades of standardisation. What’s the best way to select dates? During our tests, we’ve found the best way is to provide three separate type-able dropdown fields. Most users have become accustomed to typing out their D.O.B while using the tab key to switch between the fields.

Mobile only keyboard

Phone users appreciate apps & websites that provide the appropriate keyboard for the text being requested.

Use autocompletion

Anything that can help the user to type less is a good thing. This is particularly helpful for mobile users. For things like address fields, use autocomplete to suggest the entire address.

Make things interactive

Don’t shy away from ditching default form elements in favour of a custom design. As long as they’re designed tastefully, users will know what to do. Apple does a great job of this with their purchase pages.

Maybe ditch the radio buttons

There’s no reason why you can’t jazz forms up a little with the use of interactive buttons instead of default form fields.

Use preloaders as distractions

Why are there mirrors inside elevators? To distract people from long waiting times. A cute, cleverly written preloader has precisely the same effect.
Don’t forget, not every user in the world has a fibre connection so sometimes there’ll be a load time. Something as simple as a witty message can turn a dull wait time (humans have particular contempt for this) into something that elicits surprise & delight. Don’t underestimate the effect of this.

USE LIVE VALIDATION

Live validation is particularly fantastic because it gives feedback & encouragement. A lot of users aren’t very advanced (like your grandma) and there’s nothing worse than thinking you’ve gotten to the end of a form only to be told you’ve got it all wrong & have to go backwards & fix all your errors. Letting the user know they haven’t gotten it quite right as they’re progressing this issue.

It’s also a good chance to inject some personality & tone. Try not to make the error’s accusatory. Errors like “email not valid” sounds robotic, and humans don’t like dealing with robots. Try “this email address doesn’t look quite right”.

Speaking of which, live validation doesn’t just end at showing errors. For fields users fill out correctly, you can also offer words of praise and encouragement.

Don’t make users Re-Enter their password

The common practice is to make users fill out their password twice, the second time for confirmation. A much easier solution is to allow the user to see what they’ve typed – usually in the form of a “show” icon at the side of the field.

Use categories or sections

We’ve become big fans of performing mind-frame analysis on each page and what we’ve found is that users think in logical buckets, and long forms can feel overwhelming. By grouping fields into logical categories, it’ll make more sense for the user & even feel faster.

Don’t ask for too much!

Forms are like greetings. Don’t ask for their life story on the first meeting!
Sometimes it’s hard communicating this to the client. Often times the number of form fields is the result of mandatories provided by several business units within an organisation. The truth is, companies should require very little info of users up front, and should later ask for more information later on once a relationship has been established.

Imagine meeting someone for the first time & them asking for every single detail about yourself on first meeting. If you wouldn’t do it in person, you shouldn’t do it online. Not only that, most users hate having to fill out pages of form fields just to subscribe for a membership. Chances are they’ll give up.

In the case of account creation, users shouldn’t be expected to provide anything more than a valid email address, name & password. Everything else (like shipping address, phone number & more personal details) can and should come later.

Step by step

A lot of times our clients require a lot of details from users, especially for something like purchasing air travel. For instances like this, it’s a good idea to use a progress stepper, if nothing else to show the user just how many steps are required until completion.

No surprise fields

It’s become a common technique to surprise users with more and more form fields depending on their selection. Designers and clients alike think this is a valid way of making forms appear shorter, but from a psychological perspective, it makes users perceive the form as a lie.

Imagine climbing Mt Everest and approaching what you think to be the summit, only to look over a ledge to find you’ve got another 3 miles to go. Not a good feeling, is it? That’s exactly what your users feel when they click a radio button that spawns 20 additional fields to fill out.

Moral of the story? Don’t hide form fields. When users begin filling out a form, it’s a good idea to show them the form in its entirety or to include a progress stepper (more detail on that next) so they know exactly how much they’re required to fill. Think of this as mental preparation, and it’s a key component to how users come away perceiving the experience.

In summary

Cover the basics, be conversational, be funny, be engaging and do the unexpected. It’s the designer’s job not only to build something that’s usable but to design something that elicits an emotional reaction. Transforming a form from boring to wow doesn’t take too much work, and if done correctly, it won’t only increase completion rates, users will come away with a good experience, and that’s good for business.

Happy Designing.

The Eightfour team