Much as we try, humankind has yet to find an alternative way to gather semi-structured information from its fellows, so sticks to complicated, confusing, consequently soul-destroying forms. (
And, I guess, helps keep me in a job.)
But employed or not, they’re a bugger, pure and simple.
It struck me one balmy afternoon that unlike many other interaction staples, (e.g. navigation, search, links) that there’s still not a definitive design pattern for forms. Not that those other three are always done correctly but there’s a common agreement about what good practise is. I think we’re still getting there with forms.
One obvious reason for this is that every form should be bespoke. It needs to be thought about as its own individual case. What was right previously might not be right this time. In fact, going in thought-blind is probably watch causes at lot of the problems.
But even though individual attention is needed there are a few overarching principles and patterns that I like to include. I believe they make the form easier to complete (which in turn decreases drop-off rate yadda yadda ).
Ulitmately we’re trying to assist the user and reduce the risk of errors. So:
Structure logically according to the task.
First things first, why do we need the form? If the information can be gathered any other way, don’t subject your users to it. They’ll only hate you for it.
Oh, and pre-populate fields where you can. Nothing’s more annoying than entering information unnecessarily.
Once you’ve established that form and all its content is absolutely necessary, structure it according to what it’s trying to achieve. If it’s long, break it into sections and include progress indicators. A task with an end in sight is more managable than one than a potentially infinite one.
I’m not going to witter on about the best way to do this – it really does depend on what the form’s for. But at the form field level, I think there’s a strong argument for consistent design patterns.
Tell the user what they have to do.
Each form field or field group should have a title.
Indicate whether the field is mandatory.
Add explanatory text.
Offer further help e.g. rollover tool-tips or text blocks.
Clicking the tool top shows the text block with help information.
Hide fields the user does not need to complete.
The secondary field isn’t shown until it’s been established the user needs to complete it.
Help the user to avoid mistakes and assist them when they do.
Using pre-submit error validation.
As the user types the system verifies their input, in this case 8 characters, alphanumeric characters and spaces only.
Success, or not, is highlighted and the user can make corrections before submission.
Using post-submit validation.
If fields cannot be verified on the fly, display the number of errors at the top of the page, and mark the individual fields that need correcting.
Clearly highlight errors and give clear instructions how to fix them.
Provide explanatory text against all error fields, whether using pre or post-submit validation.
That’ll do for starters. Play nicely now.