Binary Vision blog
Making web forms sexy(ish): My do’s and don’ts
Posted 09 Oct 2011 by Niamh W
We all want users who begin to fill out our forms to get to the end of them successfully with as little trouble as possible. And, as there are so many not so great forms, foregrounding the absence of pain and stress in your form really can make them sexy; even socially important in a sexy way.[1]
I’ve worked on making forms here at BV and I’ve read all the books I can lay my hands on about general form do's and don’ts.
The two winners for me are Luke Wroblewski’s very good Web Form Design, and Forms that Work by C. Jarrett and G. Gaffney.
Gleaned from these and our experience here at BV comes my list of what I think are the most useful general do’s and don’ts.
DO:
- Establish trust: to reduce drop out rates as users move through the form. Think about how you are going to do this, and maintain this. Are you relying on branding for this? Can the brand be enhanced through the form design?
- Set clear expectations: What will a user have to do and what are they going to get out of this process.
- Explain the benefits: Are there seemingly odd questions in there? If there are, tell the user why they should want to answer them.
- Create moments of user reward in longer forms: Does it all start to flag in the middle? Motivate your user. Give them an incentive. You could even call this gamification if you want to. This could mean, ‘nearly there’ prompting graphics, ‘percentage done’ indicators, completeness bars filling up...whatever works. Keep it simple and make sure it accurately reflects the stage the user is at in the form.
- We’re really secure and very very careful: Obviously you should be and if you think you’re users will appreciate it, go ahead and show off how securely kept the data collected is.
- Use simplest design you can and visual indicators to highlight things like errors: Something of an easier to say than do this one. Enabling users to realise and correct simply and without negativity is a friendlier way of thinking about it. And let’s leave ‘error tolerance’ to making sure the date field can cope with multiple formats. But yes, do do that too.
- & make it accessible!
- Create a logical set of questions and organize them logically: To help you decide what types of form fields you will use, what order they will sit in, how to label them and if anything else is needed.
- Consider organizing by user behaviour: Sounds complex but really means chunking information into different user tasks as well as different user groups. I believe this way of putting it and thinking about it originated from Simple and Usable by Giles Colborne.
- Place any optional marketing type questions at the end of the form: It’s less off putting and will get you more opt-ins. And yes please do let people opt in if you can.
- Use a colon. Put the labels in sentence case: It’s a norm. Unless there’s a good reason not to, why not.
- Top align labels unless you have a good reason not to, such as wanting a user to ponder the label or question just a little bit longer.
- Having said that, do use mixed label types if it really does help and the context is right.
- Place inline help symbols by the label if you can.
- Allow a slight delay on roll over help: It doesn’t have to be much though, 500ms has been mentioned by Luke Wrobleski as a guide.
- Use a default value if almost all your users will need to input that value: In general, users quite often skip over default filled fields.
DON’T:
- Use a default value unless almost all of your users will need to input that exact value: In general users quite often skip over default filled fields.
- Include external links if you can possibly help it. Your user may not come back.
- Make your user feel bad by pointing out they’ve done something wrong in a harsh or alarming way, or making them feel that they will be at a disadvantage if they answer in a certain way.
- Create ‘jumpy’ form pages: Expand to the right or another space if you can. If you have to, then give it some proper time and thought space and make it expand as elegantly as possible.
- Bombard users with options they don’t need: Make a form where user action creates more options…
- Shove in questions that are not needed: They’re the digital equivalent of people who drag their nails down a blackboard. Negative attention seekers who should be removed from the room.
I hope these pointers come in handy and help you out when you are trying to think how to make a form better.
If you’re struggling to convince someone else, I’d recommend haveing a look at Luke Wroblewski’s Web Form Design. In among the mostly very good advice is quite a lot of useful and persuasive data.
If you’ve got any that you think should be added to the list, please let me know. All contributions are very welcome!
[1]Picture this:
A woman goes out to get a coffee happy with the form service she has just received. She thought it would take all morning but it was much simpler than she’d expected. Feeling just a tiny little more satisfied with the world around her she smiles at her neighbour who, in the past, she’s always ignored. The neighbour feels renewed by the connectedness of people in general and asks the woman out for a drink. She accepts. They go out. They drink beer. They get on rather well…
…Eventually, they move in together (but are not so keen on buying until the legalistic forms they’ve seen become less impenetrable). At some time in the future, when they’re both good and ready, they make a baby.
Their baby grows up and becomes a research scientist who invents a universal cure for Cancer!