The Golden Rules of Designing Good Forms

You should feel honoured every time a user fills out a form on your website.

Whether they are ordering a product, subscribing to a newsletter, or just filling out a survey, you as a website owner are always getting something out of it. For this reason, you should be bending over backwards to make your forms as simple, quick and painless as possible. By doing this, you will get more survey responses, sales and newsletter subscriptions, and your users will be more happy and have a better impression of your website.

Here are the golden rules that you should stick to when designing forms.

Only Request Essential Information

If somebody is subscribing to an email newsletter, do you really need their postal address? Probably not. Generally all you should need is their email address and possibly a name for personalisation reasons. If you do need their postal address, make it very clear to them why you need this information and what you will do with it.

Add Some Accessiblility Tweaks

There are a lot of ways to make forms more accessible using javascript and CSS. Here are some of the best ones to use.

• Automatic focus. Use javascript to set the cursor in the first field of the form automatically – just like Google do.
• Use the <fieldset> tag The <fieldset> fieldset tag is used to group related sections of a form, such as address details.
• Use the <label> tag. This tag links a form field label to the appropriate form field. User can click the label to focus on the correct field – especially useful for those tiny radio buttons. It also lets screen readers know the appropriate labels for each form element.

Never Make Me Format My Data

One very important rule to always remember is to never require data entered in a certain format. If a user wishes to put a space between every block of four digits when they enter their credit card number, they should never be penalised for it. If your payment processor requires data in a specific format, simply take the input data and convert it to that format.

The same goes for telephone numbers. Never require a space between the dialing code and the telephone number. Likewise, if a user wishes to put brackets around the dialing code, you form should be flexible enough to cope with this.

This rule applies to all sorts of formatted data: Social Security (USA) and National Insurance (UK) numbers, etc (add more examples). Dates are another area where you need to be careful. Using a javscript date picker is always preferable to manually entering dates as you don’t need to worry about some users entering a DD/MM/YY format and others using a MM/DD/YY format.

Here is an example from an excellent online research company called It’s Your View.

If you can’t read the screenshot it tells you to enter your date of birth in a very specific way. It wants the data in the format dd-mmm-yy and you have to use the three letter abbreviation of the month. This is much too restrictive.

In the same survey you are also presented with this screen to enter your postal code.

This screenshot shows the error message that the survey showed when I entered my postal code in the “wrong” format. Again, it wants the data entered in a very specific format. It wants all the letters entered in upper case and a space in the appropriate place. This is making your users work too hard to fill in a few questions. Surely if the system can detect that the letters are in lowercase, it can convert them to uppercase?

Validate The Form on The Client Side

It is always imperative that form data is validated and cleaned up on the server side. In fact it is so essential, that it shouldn’t even need mentioning.

From a useability point of view, it is also good practice to validate the form on the client side too. This generally involves using javascript to check that all the fields are complete and data is in the correct format. While that last bit might sound like a contradiction of the previous rule, remember that some data should always take a particular format. Email addresses are the classic example.

It is always better for the user to know immediately if he has made any mistakes entering data rather than waiting for the form to be submitted, checked and then returned to him with some error messages. Last.fm will check your username and email format as you type, so if they are incorrect you know before you submit the form. See the screenshot on the right

Give Good Error Message

Simply highlighting a field in red is not a satisfactory way of highlighting an error.

Error messages should be clear and concise and tell the user not only what they have done wrong, but how they should go about fixing it.

Please Don’t Repeat Yourself, Please

Constructing complicated, dynamic surveys where the path of the questions depends on the answers that you gave previously are very complicated to code. For that reason there are companies that specialise in building these types of surveys.

When you are designing a long survey, it is important to make sure that the information you are requesting in really necessary. This brings us to one specific example: repeating yourself.

As an example, here is a screenshot from another It’s Your View survey. Compare the two questions in the screenshot below.

While they are not exactly the same question, think how easily these two questions could be combined together.

Summary

While <form> might be a simple html tag, there is a lot to think about when you are building one. Hopefully this article has given you an insight on how to build the best forms for you, and for your users.

Related Articles

• Where To Start With Multiple Browser Testing?
• Creating Accessible Websites

Tags: Accessibility, html