Quick Tips for Creating User-Friendly Web Forms

Julie Grundy, Senior UX Designer

Julie Grundy, Senior UX Designer

Forms can make or break the most crucial online interactions: checkout, registration, data input and any other task that requires the visitor to share information on your website. Forms that follow usability guidelines can improve accuracy, significantly decrease the time it takes for visitors to complete them, and ensure a smooth experience for them on your website.

Here are a few tips for creating effective web forms:

Top-align your field labels.

Labels that are top-aligned appear at the top left above the field that visitors use to enter their information. They are easier to read and help contribute to a feeling of simplicity for the visitor. Make sure your labels are close to the input fields. If is a major concern, the next best option is to right-align labels. Rest assured, the Webform default settings in the Bronto Marketing Platform will top-align labels for you.

Don’t use labels as placeholder text.

Refrain from using labels in the input field that disappear when people click into the field to enter data. It’s a bad idea for three reasons:

  1. People don’t remember what they saw in the field. Once they click inside the field, the instructions go away, which increases the opportunity for errors in completing the form.
  2. People could think the field is already filled out. Users are more likely to skip fields with placeholder text than those without text, according to a Norman Nielsen Group This is especially true with people who scan text, which is almost everybody.
  3. Empty fields draw more attention than those with text, according to the same Norman Nielsen study.

Use sequential buttons.

Humans tend to think of processes in a linear fashion, so stage the actions you want the visitor to take, with primary action buttons. These buttons prompt the visitor to move forward. Buttons such as next, submit or sign up guide your visitor through the process sequentially. Be sure to put these buttons on the right side, where visitors typically look to move forward. The secondary action button, is often the cancel option, which should be on the left.

It’s also best to create a distinction between primary and secondary action buttons. We all know how frustrating it can be to push cancel when you meant to push submit.

For a staged form, provide a progress bar.

It’s good to let people know where they are in the process by adding a progress bar. It gives people a sense of place, and it’s good for onboarding new visitors.

Use field validation.

It’s important to help visitors prevent errors. The best way to do this is to specify errors in-line, meaning as they happen, per field. For example, when you are creating a password during a sign-up process include immediate prompts that tell the subscriber if the password is strong enough. That is a better practice than presenting the visitor with error messages after they have submitted the form.

Use clear and simple language.

Any form should strive to be as simple and clear as possible, written with the website visitor in mind. Think about how you can incorporate your brand’s identity into label text. Consider it like a conversation. How would your brand ask for someone’s preferences?

Create clear calls to action.

The form header and button text should clearly explain why the visitor should fill out the form. If it’s a form to sign up for an email list, use language like Sign Up on the button text.

Request only the information you need.

This boils down to valuing a person’s time. Ask a question on a form only if you already know what you’ll do with the information. There have been instances where companies have seen an increase in revenue by the simple removal of a form field. Best practice doesn’t dictate how long or short your form should be – but rather, how relevant the questions are for the visitor and to the information you want to capture.

The bottom line: forms on your website contribute to the experiences your visitors have with your brand. When your forms follow these basic design tips, your visitors are more likely to have a good experience that will contribute to their overall customer lifetime value.