15 steps towards better form usability

In our never-ending battle to make our web sites as usable as possible, bringing a good user experience to a web form remains among the holy grails of usability.

It shouldn’t be that difficult to achieve, but we keep seeing web sites that present forms in a exceedingly complex or outright unusable state. So in this article I’ll attempt to offer some best practices by demonstrating poor vs good examples of form design.

For starters, here’s a list of 15 things to keep in mind for good form design.

Use top aligned labels

There’s a good reason  for this, and you don’t need to perform your own eye tracking study to understand it.

In the example above demonstrating top aligned labels, there are four visual fixations and only one visual direction (down). In the other example demonstrating left aligned labels, the number of visual fixations and directions is doubled (8, and left – right, left – right, left –  right, left –  right), making it more difficult to visually consume and comprehend.

Never place labels inside the fields

You see my cursor in the second field below? Do you have any idea what that field is for? Neither do I.

This scenario typically involves the label visible inside the field which disappears on focus (when a user tabs or click into it). If the user forgets what the field is (and there are many reasons why this might happen) then the only way to reveal it is to click or tab outside the field, read the label, and click or tab back into it again. Insane. But what’s more insane is designers still force this unusable habit on unsuspecting users, which appears to be designed to solve an aesthetic ‘problem’ at the expense of usability.

Clearly indicate mandatory fields

If a field is required, then come right out and say it. Anyone who has filled out web forms over the years might understand the meaning of the asterisk next to a label, but what about less experienced users?

To cite an example, my Mother, once new to the horrors of the internet and web forms, called me in frustration because she couldn’t complete an order on a web site. The problem was she didn’t comprehend the meaning of the asterisk, because it’s context wasn’t explained anywhere in plain sight. It was way at the bottom of the page with “all fields with an * must be filled in”. The simplified example on the right below shows what I mean:

Given the benefit of the doubt, let’s pretend that a user does understand the meaning of an asterisk in the context of a web form. Who is to say they may even notice it? Someone with a slight visual disability – say a mild dyslexia – might not notice something so small.

With this in mind, it’s just a lot simpler to explain in the label: (required).

Note: To be fair, the WCAG 2.0 spec suggests both methods (required or the astrisk), but the latter is conditional on the meaning of the asterisk being explained at the start of the form. But to avoid any confusion and to minimise the risk of users missing the explanation (after all people don’t read, they skim – especially on web forms), I recommend the first technique.

Reduce the number of mandatory fields

This is a no-brainer. It can already be difficult to convince users to fill in a form, especially given the amount of time it can require. While I know you’ll have the guy in marketing insisting you capture every piece of information right down to the brand of toilet paper they use, it’s also your job to tell him that more mandatory fields means less conversions.

It’s not uncommon now to see sign-up forms ask for nothing more than an email address, and perhaps even a name. But if you have a larger complex form, have a good think about what benefit you’re really going to get from some of those mandatory fields, and either make them non-mandatory or drop them entirely.

Dividing up sections of the form will make for much better comprehension and presentation. It also in some cases gives the impression of being easier to fill in, because the user will see a few small sections as opposed to a singular intimidating mess.

Don’t force formatting

While this might be technically harder to achieve, it does have positive usability benefits. Take a phone number field as an example. A web site might specify something like:

Despite this message, which some people might not even notice, there are many ways to enter your phone number. Some examples:

+61 08 9444 0000
61 8 94440000
61 894440000
61894440000 
61 89444 0000

The user should be allowed to enter their phone number in the format they are familiar with. As web developers, it’s our job to take this information and format it during the submission, removing unwanted characters, spaces etc.

Limit messing with the default browser UI elements

I’ve had a few discussions about this one, but I always say it makes more sense to keep the browsers UI elements as close as possible to their original presentation.

The popular uniform.js script for jQuery allows designers to have form elements look consistent across all browsers. But this is concerned with aesthetics rather than usability (though it could be debated).

The things to keep in mind is that users are already familiar with the look and feel of the form elements in their preferred browser, and it’s hard for us designers to imagine that changing these could cause any confusion. But it can.

Anecdotal evidence: Only a few months ago I used uniform.js on a web site that within one day of launching the client had a complaint from a user who couldn’t upload his CV. This was the culprit:

When I spoke to him it turned out the problem was the he didn’t notice what this was, and he was in fact looking for a ‘browse’ button (he was using Internet Explorer). It doesn’t look like a traditional file upload button, and in fact in this particular case the button is barely recognisable as being one anyway.

To us industry folk this just sounds absolutely absurd. How could he not recognise this as being a file upload facility? Isn’t it obvious? It clearly says ‘choose file’. The client made an excellent point which I will paraphrase: “Why did we change something that users are already familiar with?”. It’s a valid question, and good enough that I recommended we remove uniform.js from the site.

The fact remains that users are an unpredictable lot and they’ll sometimes use our sites in ways we never imagined, so we shouldn’t always assume things that are obvious to us will also be for them.

Use the right field for right purpose

I once saw this:

…which would have been more usable as:

The latter format not only presents all the available options to the user, but also doesn’t require any interaction aside from clicking on the actual choice. Additionally the user doesn’t have to go back into a selection box to see what his/her other available choices are. Less clicks, more usable.

Give the fields room to breath

One of my biggest gripes is cramped form design. In the example below, it’s obvious which one is easier to use.

The biggest problem (aesthetics aside) with the form on the right is it’s unclear if the label is associated with the field above it or below it. Though it may be reasonable to expect the label should be at the top, not all users know this, and some designers even place labels below the field. I know of at least one WordPress e-commerce plugin which does exactly that out of the box, and resulted in many confused clients and customers, not to mention likely lost sales.

Not only should you provide adequate space around the fields, but also inside them as shown in the left sample. The right sample, which aside from the obvious aesthetic deficiency could also make it difficult (or impossible) for users who suffer from dyslexia to comprehend.

Allow adequate field width and height

Small input fields are annoying because they are by default, unusable. How many times have you suffered through a situation like this?

Too many times, am I right? Always make sure your fields are long enough to accommodate the information they need to capture, which might include long email addresses and or lengthy comments.

Provide hints

There will almost certainly be times where your form asks for information that isn’t quite clear at first, or it could be interpreted in more than one way. One way to provide hints is by using ‘help’ icons next to the fields that reveal information when your mouse passes over them. For example:

This of course isn’t much help for people who don’t use a mouse to navigate the web, so the more usable solution is to simply have the explanation in plain sight near the field. For example:

Provide visible and informative error messages

Form validation is only useful if you explain to the user what went wrong preferably in human digestible language. Not only should error messages be in plain sight so the user doesn’t have to scroll up or down to find the error message, but the message needs to be concise and offer a visual clue as which areas need to be corrected.

Don’t reset the user choices after submission

I’d be surprised if you haven’t experienced this more than once. You submit the form and are then advised that you left out some mandatory fields. While you go about the business of correcting this problem, you notice that some of the choices you made earlier have been reset back to their default state.

This is usually something like a checkbox to receive email spam that you had already unchecked, or more often than not a password field. If I’ve already made my choice or filled in that information, why should I need to do it again?

Getting someone to fill in a form is already a difficult task, asking them to repeat the process is like asking them to give up and try somewhere else. On a side note: Aside from being an incredibly effective way to annoy the user, tricking them into accidentally subscribing to a mailing list is sneaky and underhanded. Credibility instantly compromised.

Set a tabindex on each form field

The tabindex attribute often doesn’t get the attention it deserves. But it ensures the user who tabs through fields is doing so in the intended order.

Using tabindex will also make your form accessible for users who can’t rely on a mouse for navigating web sites.

Provide post-submission feedback

Once a form has been submitted, it’s nice to be presented with on-screen confirmation of the fact offering information about what will happen next.

For example: “Thank you for taking the time to fill in the form. We have received your message and someone will be in touch with you within the next 24 hours.”

If possible, a copy of the form can be automatically emailed to the user which further emphasises to the user that everything worked as expected.

Who is That Web Guy?

Michael is a veteran web designer / developer / usability evangelist, practitioner of W3C guidelines, occasional judge for the Australian Web Awards (2011, 2012, 2013) and creator of Task Rocket.

17 Responses to 15 steps towards better form usability

  1. Jase says:

    Fantastic stuff. Bookmarked.

  2. Davo says:

    Superb roundup and you’ve forced me to rethink my form layouts. The visual direction example is particularly interesting.

  3. nightmare says:

    great article …thanks for this usability help …!

  4. srihari says:

    good research done

  5. Michael,

    Very nice collection of tips.

    I’ve got a couple of issues with them:
    1. Use top-aligned labels:

    This is OK advice but after doing rather a lot of testing and hunting around for the research, I’ve come to the conclusion that any arrangement of labels that closely and unambiguously associates the correct label with the correct field will work perfectly OK. Top-aligned labels are fine, but not the only workable option.

    2. Error messages:
    Good advice, but I’m not a big fan of the error message you have written there. ‘You forgot to …’ implies that it was the user’s fault for not completing the fields; it may very well be (and often is) the organization’s fault for not explaining why sensitive personal information is required.

    I would also like to include an extra tip:
    “Have one major action button, and align it with the left-hand edge of the fields”.

    Thanks
    Caroline

  6. That Web Guy says:

    @Caroline Jarrett

    Thanks Caroline. I’m usually aware of the consequences of such a negative error message but totally neglected to mention it for this article :-( No excuse really.

    I see you’re considering releasing a second edition of your book “Forms that work: Designing web forms for usability”. I urge you to do so while adding chapters on mobile/app form usability. Keep me in the loop!

    Mike (That Web Guy).

  7. Rich says:

    What is your take on the following areas:

    Two column forms

    Placing some fields side by side e.g. “Email”, “Confirm Email”

    Importance of the form being above the fold without scrolling

    Any conversion data you may have?

  8. Good stuff. I do consider tabindex to be redundant when the form fields are all presented in ‘source order’. It can also detriment the tabbing order of links, so I find it better to leave the tabbing order to the browser.

  9. Madeline says:

    I totally wished the companies I freelanced for would adhere to these guidelines. As a programmer, it’s often hard to make the UX and design team create layouts more accessible due to “visual aesthetics”. Blarg!

  10. j.r. says:

    Quick note regarding the form labels:
    Depending on your audience, you must take into account usability issues for individuals with assistive devices . Screen readers are significantly more effective when reading left-aligned labels. Just my two cents!

    The rest of it is good stuff, however.

  11. That Web Guy says:

    Hi j.r.

    Could you elaborate on “Screen readers are significantly more effective when reading left-aligned labels.”

    Given the label position is purely controlled in the presentation layer (CSS) how would it be any different to a screen reader? Unless I misunderstood.

    Thanks.

  12. Gino Lardon says:

    Hello Michael

    I would like to refer to the post of @Formulate about required vs. optional fields: http://formulate.com.au/articles/mandatory-versus-optional-fields/

    In my opinion, in some cases it is better to indicate the optional fields instead of the required fields.

    Kind regards
    Gino

  13. andrew boag says:

    I like the 15 points.

    Post-submission feedback is an excellent way of reassuring the user that their effort in filling out the form hasn’t been in vain. Any further info you can supply about what happens next adds to this and sets their expectations.

    On the issue of 2-column forms (Rich’s question, above) it’s my view that this is best reserved for side-by-side completion exclusively (e.g. the mortgage or investment applications that require two-person’s info to be submitted). (No research to back this up though.)

    Under the heading of ‘Don’t force formatting’ I agree that it’s our job to take information and format it during the submission, removing unwanted characters, spaces etc. – but be very careful! Interactive forms can only be as powerful and robust as the software that sits behind them. A recent(ish) article in The Guardian (UK newspaper) highlighted how a customer accidentally entered one incorrect digit in their 8-digit account number when setting up a regular transfer. Even though the account name and number didn’t match, the building society approved the payment – and some ‘lucky’ recipient has received over £26,000!

    http://www.guardian.co.uk/money/2013/feb/09/26000-banking-error
    see also
    http://www.boagmccann.com/the-blog

  14. That Web Guy says:

    Hi Gino,

    That’s interesting. Though I’d like to see some actual usability study results on such a reversal on the current expected paradigm. Right now everyone is so used to already knowing the that an asterisk or any other indicator next to a field means it’s mandatory, and won’t bother seeking out any text that might explain it’s meaning.

    I’d argue that indicating optional fields – regardless of how they are presented – could add an element of confusion and compromise usability.

    As always, I’d like to be proven wrong and if there are proven benefits I’d love to see them.

  15. Karen says:

    What are your thoughts on scrolling for form submission? What alternatives would you recommend?

  16. That Web Guy says:

    Hi Karen,

    I’m not sure what you mean. Scrolling for form submission?

  17. Adele says:

    Excellent post. Ι certainly lovе this site.
    Thanks!

    My web рage: earticles.gr (Adele)

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>


5 + six =

BTT