News & Notes

How many more leads and sales could you be generating from your website if your forms were designed properly? When forms annoy people, or things aren’t where they expect them or don’t work properly, they’ll just leave.  I don’t know about you, but I end up filling out quite a few forms on websites – when I’m researching products, looking for information for clients, signing up for services, and purchasing products or services.  It annoys me to no end when web forms aren’t designed properly, especially since it’s not that difficult.  Good usability and design principles for web forms have really been around for longer than the Internet, even if they’ve been updated somewhat.

Here are some ways to improve the forms on your website:

• Next or Submit buttons on the right – think about turning a page in a book.
• Clear or Cancel buttons on the left.
• Fields with enough space – Make sure people can give you all the information you need and see it without having to scroll the field.
• Be flexible – If you want a phone number, let people enter it however they want.  Use background processing to format it the way you want for your database or CRM.  For example, 2485556758 can easily be turned into 248-555-6758 or 248.555.6758 or however you want to see it.
• Be clear – If you absolutely need something in a certain format, make sure it’s clear and obvious right next to the field.  The same goes for any maximum field lengths.
• Keep it simple – Only collect the minimum amount of information you need.  While it’s nice to collect information for statistics and marketing purposes, you risk not gathering any information.
• Required fields clearly marked – Need particular fields filled out no matter what?  Fine, just make sure it’s obvious which fields those are.  Making them a different color will help them stand out.
• Quick feedback – If a field was missed or wasn’t filled out properly, try to let people know before they click the submit or next button.  This is pretty easy to do with javascript.
• Clear feedback – However you give feedback, make sure its obvious what field you’re specifically talking about and what needs to be fixed.  Putting messages at the top of the page and marking the field in question are best.
• Do the heavy lifting – Need information in more than one place?  Pre-fill it in if the person has already typed it once.  Need some calculations made?  Do them with backend processing and present them to the person to be confirmed.
• Allow people to edit – People make mistakes.  Let them go back to change what they’ve entered.  This means your forms need to be able to handle the back button on the browser and still have all the information that was already entered available.
• Test in multiple browsers – It may be hard to believe, but not everyone has a PC running Windows with Internet Explorer.  Make sure your form works for the major platforms, operating systems and web browsers.  If you accept file uploads, make sure they work across platforms.  Soon you’ll also need to worry about mobile platforms.
• Confirmation – Let people know you’ve properly received their information.  On your website is best.  Following up with an email if they’ve provided an address is also nice.
• Thank them! – People are busy.  Thank them for the information they’ve provided or the purchase they’ve made.

What did I miss?

One of the easiest ways to design forms properly is to try to use them yourself.  Then ask a few friends to try them and give you feedback.

(photo by kaatjevervoort)

Technorati tags: customer experience, customer-centric, experience centric, business, usability, design

Liked this post? Consider subscribing to our RSS feed or our weekly newsletter.