Better web forms.

Forms are an essential part of every website and app. They’re also a pretty dull task for users so it’s important that they’re not overly long, daunting or just plan confusing. Users on the web can lose interest very quickly – distractions are difficult to avoid. In this article we give a few examples of improvements you can make that will result in better web forms, will improve user experience and get more conversions.

Clarity and simplicity results in better web forms. Obvious really. There’s a few ways you can help keep things clear when designing forms.

Labels

Labels help accessibility and create flow in forms. Over the past couple of years I’ve seen a lot of websites rely on placeholder text to do the job of a label. This is mixing up the purposes of these elements. Labels above fields describe the information a user should enter and placeholder text can give users an example of a valid entry.

For example:

  • A label ’email address’ and a placeholder of ‘yourname@email.com’ is good
  • No label and a placeholder of ’email address’ is bad

Choices

Avoid using select dropdown elements for options with a small number of choices. A way to create a better web form is to display all choices as radio buttons because then the user can see how many options they have and all choices available to them without having to click.

If the field is required, always offer a default selection to make this clear to a user.

Let it flow

Fields that are related to each other should be grouped together. For example, the various fields that make up a postal address.

Forms should be split up into manageable and logical sections. For example, if a form collects a set of contact details from a user these should be grouped together.

Split longer forms into multiple pages. It helps to give users an indication of how far they are through the form via a progress bar or a percentage value.

There’s no way to guaranteed how much time your user has but you don’t want to run the risk of them leaving your website never to return. On longer forms giver users the option to save their progress and return to it later via a personal link.

Give feedback

When users are completing a form they should receive feedback as they move through the form.

You can highlight active fields with CSS to differentiate them from other fields. CSS properties such as border or a background colour are commonly used. Buttons should have clear hover states.

You can improve the usability of your select fields, if necessary, with a jQuery plugin such as Chosen. For example, showing a user that they’ve made four out of a possible five choices.

Validate inline

It’s annoying to get to the end of a form and submit it only to have multiple errors to correct.

Better web forms give errors to users inline so that as soon as they complete a field they know if their entry is valid.

One final point of validation – don’t use * to indicate a required field. It might be common but from a user-experience point of view an asterix doesn’t mean anything.

Be descriptive

Your should give your form fields descriptive titles and use helper text where appropriate. The user should not only be clear on the information you want but also the format you want it in. A common example of this is a password field where helper text gives the length and makeup of a password. You can and should apply this to other types of field too.

The size of fields can also help indicate how long the information you want from a user should be. A postcode field that is 100% of the page width is counterintuitive.

Buttons should have clear, descriptive text. ‘Signup’ or ‘Register’ is far more useful than ‘Submit’.

Never use images for buttons – I think that goes without saying.

Keep it brief

There’s a relationship between how long a form is and how many people will complete it. A guaranteed way of sickening your users is to ask them to fill in a load of unnecessary information.

It’s important to keep it brief.

A good example of this is an email signup. In the first instance do you really need anything other than a user’s email address? There will be opportunities to collect further information from them in the future if they sign up.

If you have lots of non-required fields on your forms then ask yourself if you actually need that information. If you do, why is someone able to submit the form without it?

Want to know more about better web forms?

If you enjoyed this article and would like to find out how improving the usability of your website can improve its results, why not get in touch with us?

Read more about what we do...

More blog posts like this...