10 Rules of Good Web Form Design

Putting together your own website is hard enough without worrying about the forms. However, forms are often a necessary evil.

Avoiding some common mistakes that people make when putting together web form designs can help ensure that people actually use them. These are some tips for good web form design.

Eliminate Unnecessary Fields

Remove unneeded fields from all of your forms. Consider carefully whether a certain field is needed and remove it if possible. Having too many fields cluttering up your web form design can cause people to decide that filling it out is too much work.

Show Formatting Examples

Use simple formats whenever possible so that formatting is not necessary. If formatting is necessary, for instance a phone number with dashes in it, provide an example. In most cases, the best web form design is one that does not require users to format their information, however.

Make Your Error Messages Clear

If your form has required fields, showing an error message when users try to submit it without this information is common. However, an error message that is unclear, such as one admonishing users to complete the form, is less useful than one that specifies what exactly needs to be done. Good web form designs will use error messages that say something like “please enter an email address” for an error.

KISS (Keep It Simple, Silly)

Your web form design might look bland to you, but it looks functional and non-distracting to users. Avoid adding elements that do not improve functionality, and abide by the KISS principle.

Toss the Captchas

Captchas are intended to avoid spam but they also wind up deterring a lot of real users. Some experts say that captchas don’t even work that well. Your best bet is probably to live with some spam and ditch the captchas.

Minimize Total Pages and Scrolling

Unfortunately, if you have a long form there is a balancing act required between minimizing the number of pages and minimizing the amount of scrolling needed on one page. There is no one set way that is better than the others. However, if you can make the form shorter that is always beneficial.

Use a Clear Confirmation Page

Web form design always includes a very clear confirmation page telling the user that the information was successfully submitted. Skipping this step will result in frustration for your users which can reflect poorly on your website. A confirmation page doesn’t need to be complex, it just needs to deliver the message that everything went well.

Make Your Buttons Work for You

A button saying “submit” is functional but doesn’t work for you. Good web form design involves using the buttons on the form as a call to action. Depending on what your form is designed to do, several different verbs or short phrases might be appropriate.

Provide Different-Sized Buttons on Multiple-Button Forms

If your form has several different action buttons, for instance an “edit” button and a “submit” button, make sure that the latter of the two is larger and more prominently located. This will help ensure that users do not get frustrated looking for the right button. It also helps avoid accidental clicks on anything but the “submit” button.

Provide External Field Labels

When the form is empty, having the field label in the field looks sleek and clean. However, once users start to type they may forget what the field was for. Quality web design emphasizes clarity, which definitely applies to field labels.

You must be pretty smart because you're here. We like your style. You can have all of our latest tools, tactics and growth strategies FREE, in your inbox, every month or so. 

You're one step closer to greatness! Confirm your email so we can start sending you awesome stuff.

Analytics & AdWords certified growth engineer with over a decade experience in making businesses successful. I own and operate AXZM and often speak at top national industry conferences on the topics of strategy, design and marketing technology. Work with me or learn more about me here. Follow me @nawlready

No Comments

Leave Comment

 

You must be pretty smart because you're here. We like your style. You can have all of our latest tools, tactics and growth strategies FREE, in your inbox, every month or so. 

You're one step closer to greatness! Confirm your email so we can start sending you awesome stuff.