Web Forms: 5 Keys to Success

March 1, 2011

It’s 2011. We all understand that successful web-based interactions depend on good user experience by now, right? Well, not so fast…

Here at Crux Collaborative, we spend tons of time researching, facilitating usability tests, and trend-monitoring. One thing is clear: poorly designed user experiences are still commonplace on the web. And nowhere is this more apparent than in the design of web forms.

Let’s take a closer look at why so many web forms are so bad – and what you can do to make your web forms shine.

Backend programming is needed to save the data entered into web forms and so, historically, the technical team created them – usually in a vacuum. The overall goal for forms was purely technical: save the data.

But, just collecting data is no reason to celebrate. Web forms are a vital part of the overall user experience – in fact, a form is the part in which the user is “talking” to you. And just like in everyday interactions, being a good listener pays huge dividends.

So, how do you become a good listener? We’ve compiled a list of 5 things to ensure success. Once you have your form designed, the best way to know if it’s working is to build a prototype – and see how it performs in a usability test.

1. Appropriate Length

Ask yourself what is the purpose of your form? A signup form, for instance, should be shorter and easier to complete than an e-commerce checkout form. If you must capture lots of information, consider making it a multiple step process – users are overwhelmed by long forms and often abandon them. Lastly, be sure to display users’ progress, people are less likely to give up if they can clearly see how much work is left to complete the form.

Example 1: Appropriate Length

2. Clear Organization

Grouping related questions can make your form easier to scan and complete, but try not to go overboard. Too many headings can be distracting.

Example 2: Clear Organization

Example 2: Clear Organization

3. Intuitive Design

Proper label alignment, spacing, colors, and icon usage are all essential elements of good form design. Forms run the risk of creating visual noise and overwhelming the user. Be consistent, and try to create a straight line toward the submit button. Be very careful about using cancel or reset buttons; at the very least, be sure to de-emphasize them compared with the submit button. Depending on your priorities, you may want to align field labels right, left, or place them above the fields – check out this presentation by Luke Wroblewski for lots more on form design best practices.

Example 3: Intuitive Design

4. User-Focused Rules + Hints

Ultimately, a primary goal of your form is to collect accurate information. “Hints”, used sparingly and thoughtfully, can help improve the accuracy of users’ responses and enhance their experience. We recommend validating as data is entered (“inline” or “client-side” validation), rather than after the submit button is clicked. Minimize “optional” or “required” field indicators to reduce visual noise (i.e., indicate whichever has fewer fields). Learn more about best practices in validation.

Example 4: User-Focused Rules + Hints

5. Consistent Voice

From the user’s perspective, your form is simply part of the overall experience of your site. Too often, we see forms that abandon the personality of the rest of the site. Remember, the user is talking and you are listening – respond back like a good listener. After all, would you say something like “Form submission complete” in everyday conversation?

Example 5: Consistent Voice

By Tony Johnson
Senior Front-end Developer

Tony has spent well over a decade building interactive applications. He collaborates in the full life cycle of projects – bringing a unique blend of technical savvy, creativity and strategic thinking to our user experience consulting services.

View Tony's Bio

Leave a Reply


Let us know your name and email address and we’ll send you our newsletter.

First Name

Last Name

Email Address



Thank you!