15 steps towards better form usability
Written January 2, 2012. 15 comments.
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
- Never place labels inside the fields
- Clearly indicate mandatory fields
- Reduce the number of mandatory fields
- Group related fields with fieldsets
- Don’t force formatting
- Limit messing with the default browser UI elements
- Use the right field for right purpose
- Give the fields room to breath
- Allow adequate field width and height
- Provide hints
- Provide visible and informative error messages
- Don’t reset the user choices after submission
- Set a tabindex on each form field
- Provide post-submission feedback
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.
Group related fields with fieldsets
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.
Start of pageWho is That Web Guy?
Michael is a veteran web designer / developer / usability evangelist, practitioner of W3C guidelines, and currently head of the web dev unit at Stormbox, a branding and creative communications agency located in Perth, Western Australia.
15 Responses to 15 steps towards better form usability
Skip the comments-
Jase says: -
Davo says: -
nightmare says: -
srihari says: -
Caroline Jarrett says: -
That Web Guy says: -
Rich says: -
-
-
Lee Kowalkowski says: -
Madeline says: -
j.r. says: -
That Web Guy says:
-
-