5 Tips For Designing Slippery Web Forms

by 3 12/15/2011

Web forms are a basic building block of the web.

They allow website visitors to input information, often during the sales or lead generation process.

Some forms are barriers.  Others are a slippery slide that propels a site visitor effortlessly through the process.

The difference lies in the usability of your form design.

Here are five ways to make your web forms more usable.

1. Highlight Required Fields

Get into the habit of explicitly stating that an input field is required or is optional to avoid the user missing input fields.  Notifying site visitors that a field was required after they hit the submit the form is a great way to increase abandonment and frustration.  Clearly mark required fields for a slippery experience.

Required form fields are highlighted in a non-intrusive manner on the website for Steinway. Don’t rely on the (*) asterisk hint in every scenario.  It’s not explicit enough.  Further contrast through the use of a different color helps the user understand its purpose more readily.

Mint.com clearly marks which fields are required of users to fill out. You’ll also notice they’re a different color than the rest of the form to enhance visibility.

Kissmetrics alerts users right away through Javascript validation of errors. If you accidentally skip a field you are immediately alerted.

Inline form validation is another method of ensuring your users fill in forms correctly. With an inline form validator, your users are less susceptible to errors while completing forms faster overall. This jQuery plugin allows you to provide inline form validation to an individual form.

2. Show Progress

If your web form is long or requires multiple pages to successfully complete, it’s a good idea to show the user where they are in the process. This let’s them know how much more time is necessary in the web form completion process and reduces confusion. This can be portrayed through graphics or through numerals such as ‘3 out of 5.’

The process tracker on Game clearly guides the user through the steps of their checkout.

 

Amazon shows you where you are in the checkout process – a helpful tool that allows the customer to know where they are in the transaction process and how far they have to go.

3. Display Hints

There are times when a user won’t understand what a form element means. Solve this problem by adding help text.  Display hints when a user clicks on a particular field of your form. This will help explain commands that are difficult to explain in the field label.

Visual Republic’s form design utilizes a nice technique of including a solid background with an arrow pointing to the input field. The input field itself contains hints explaining the kind of information they’re looking for.

Money Supermarket Web Form

The quote form for MoneySupermarket.com shows how hints can be used to guide the user along the form completion process. The text provided is short and clear. If a user needs more information it’s best to link to a FAQ section than overload the form section with more text.

jQuery Input Floating Hint Box is a simple plugin that displays a fully-customizable floating hint when a field gets focus.

DHTML Goodies Form Field Tooltip is another variation of the form field helper text that displays the helper text based on what is entered in the form field’s title attribute.

4. Use Ample Field Sizes

Make sure you give your users plenty of space to fill out each input field by providing an adequate-sized field length. Provide at least 20 characters for each of the first and last name fields. Ensure that input boxes give the user sufficient room to enter and read their text.

Users are given ample space on the input message box for Pinchzoom. The field is long enough that users are able to see the entirety of their messages. The form lengths for the remaining input fields above are also long enough to fit an adequate size of information.

Mailchimp’s contact form is simple and intuitive. The message field also gives you the option of expanding the form through clicking and holding the bottom right corner.  The input field length is also a good fit for long entries.

5. Use Plug-ins for Checkboxes, Radio Buttons, and Select Elements

You’re limited to what these buttons and elements can achieve in many browsers, but plug-ins are available from the Javascript library that allow you to include enhanced form elements that degrade nicely across browsers.

Here are some examples:

jQuery Checkbox
jQuery Image Combobox

You do it.  I do it.

We abandon web forms that are difficult to complete or cause confusion.  We want a seamless, intuitive and slippery web form experience.

How well designed are your web forms?

About 

Stephanie Hamilton is the Owner/Creative Director of Atticus Pet Design Studio and a freelance Web/UI Designer. Holding a BFA in Graphic Design, she has several years experience helping businesses reach their full potential through strategic branding and good design. Follow her on facebook and twitter.

Get our Daily Newsletter

Get conversion optimization, design and copywriting articles delivered to your inbox FREE

3 COMMENTS

Fabio

Cracking blog post! really enjoyed it. Have you also considered closing the form? We did this for a client and increased conversion by over 10%.

December 15, 2011 Reply


Leave comment

Some HTML allowed

Get conversion optimization & A/B testing articles FREE >>>