NEWS | 10.17.17

Online Forms Do’s and Don’ts

The input form is an essential element of almost any website or application.

Norm Tribe

Position | Digital Creative Director

The input form is an essential element of almost any website or application. Input is a core method of interaction, and in many cases it represents the hard conversion point between success and failure. With the time and effort we spend on bringing users to our sign-up and contact forms, it’s surprising that we often devote so little time on the forms themselves.

Keep it simple

Shorten your forms use to as few “mandatory” fields as possible. Ask yourself the following questions about each form element:

• Is this piece of information important to us?

• Is this piece of information so valuable, that it’s worth denying users access over?

Don’t waste users’ time by asking them for useless information. The second test – “should we require this field? – is a bit more subjective. One example is the user’s telephone number. There are many instances in which a telephone number would be nice to have. However, it’s usually not required to continue the transaction. Put the choice back into the users’ hands, otherwise you may suffer low conversion rates.

Do not invent new types of input fields. This was a common practice with Flash websites, and it seems to be making a comeback. Simple is often the most useful. Keep input fields as close to their unaltered HTML rendering as possible.

You should never have to explain to users how to fill out a form. If it does not look like a form or it’s too complicated to fill out, it needs to be redesigned. Accompanying text should be used only where needed, such as to explain why credit card data is being requested or how a birth date will be used, or to link to the “Terms and Conditions.” Such text tends to be ignored, so make it succinct and easy to read.

Make it visible

Form placement on the page and location within the navigation are crucial. If the user does not see the form none of these tips will help. Forms should be easily found and easily filled out. The size of the form fields must also be easily legible and empty space around the form is essential to keep it inviting for the user to fill out. People get distracted by background noise. Remove clutter such as banners and unnecessary navigation that might distract users from filling out the form.

Usability

Usability could be a topic for a whole other post. Jakob Nielsen provides a concise set of guidelines for use of checkboxes versus radio buttons:

• Radio buttons are used when there is a list of two or more options that are mutually exclusive and the user must select exactly one choice. In other words, clicking a non-selected radio button will deselect whatever other button was previously selected in the list.

• Checkboxes are used when there are lists of options and the user may select any number of choices, including zero, one, or several. In other words, each checkbox is independent of all other checkboxes in the list, so checking one box doesn’t uncheck the others.

• A stand-alone checkbox is used for a single option that the user can turn on or off. Short answer, keep it simple. If you have a long form let the user know what to expect and feed them the information in a digestible and organized fashion.

Clear Labels

Interactions must be as non-threatening as possible. After all, you are asking for personal information of the user. They are under no obligation to provide it. The first step to avoiding frustration and confusion is to use plain and simple language. Make it to the point and avoid flowery language.

Multiple Choice Vs. Fill-In-The-Blank

Selecting items from a list is much easier than filling in a blank. A blank sometimes raises more questions than it answers, especially if the labeling is not clear or there are too many empty fields. The user may be confused by the format, the type of information being requested or how exactly to answer a question. In general, a choice is better than a blank, especially with information that may be confusing – this is why most order forms do not require you to fill out every piece of information.

Desired Action

An effective Web form should get the user to cross the finish line. It might be a “submit” button, an order confirmation button or a sign-up button. At the end of the day, you want the user to hit that conversion point and be reasonably happy with their decision. Make sure that the form submittal method is bold and specific. Where possible, use language like “send email” or “finish signing up,” so that the user clearly understands exactly what the button will do.

Testing

Testing your form fields can make a huge difference in your ongoing results. When in doubt, rely on the numbers. Testing form field nomenclature, CTAs and the naming of the content should be tested and optimized towards agreed upon KPIs. People often have a hunch as to what the results will be and may want to simply go with that guess, but in the end, it is difficult to argue with hard data.

Conclusion

This overview covers a few simple best practices that you can apply to Web forms. Many of these approaches are often overlooked, yet are easy to implement and will lead to much higher conversion rates. So don’t spend all your time getting people to the door – be sure to also make the door itself as inviting and useful as the path there.

OTHER NEWS