7 Common Web Form Design Mistakes to Avoid

Bad practices = terrible user experience.

Bad practices have everything to do with how the web form looks and feels to your respondents. If an online form is confusing or difficult to navigate, it’s much less likely that respondents will hit the submit button. A bad web form sends the message that user experience isn’t a priority, which is definitely not the message you want to send — or receive.

Let’s dive into different types of bad practices and how you can steer clear of them.

1. Input Validation

Input validation is essential in web form design: it catches mistakes and helps you get cleaner, more accurate data. But it can be a source of frustration if the validation rules aren’t set up properly or clearly explained.

Here’s how you can avoid creating hurdles:

• Don’t be too strict. For instance, a U.S. phone number with area code can be entered a number of different ways, with or without parentheses and hyphens. If the validation rule isn’t flexible, then you’ll block all the people who might use a format that’s just slightly different.
• Display hints. If you expect a specific format, make sure to give an example.
• Auto-format when possible. This takes out the guesswork and makes things a lot easier for your respondents.
• Report errors early. That way, the respondent won’t face a bunch of errors at the very end of the form.

2. Slicing Fields

Slicing fields means splitting one input into multiple fields. Fields are sliced, or broken up, in place of hyphens or forward slashes. This can be helpful when the format is well-defined. For example, for a date field, the Gregorian calendar is the de facto international standard, so the format is well known. And you can solve the Month/Day order confusion with a hint in the right place.

However, sliced fields are generally too rigid and require concatenation. And if the respondent isn’t familiar with the format, sliced fields could slow down the process of filling out the form.

3. Copying Conventions

An example of a convention is The Paper Mentality, where form creators get stuck in a paper mindset, and the conventions of paper carry over to online forms. We’ve all had to deal with paper forms, right? And paper forms are designed to maximize space so you use less paper. It’s economical: all the fields stretch to fill the page.

But print design shouldn’t translate into the screen. A web form doesn’t need to have the same constraints as a paper form: not all fields have to be the same length. In fact, it’s better to size fields differently, depending on the length of the expected input.

Snail Mail is an extension of the Paper Mentality. The mailing address convention is very common, where Country is listed at the very end. And when forms are intended for U.S. residents, usually it’s not an issue.

But if a web form’s audience includes people who live in other countries, then it can be frustrating when the flow isn’t linear, from the top to the bottom. Respondents may need to back-track and jump around to fill in a form.

Here’s an example solution — the Country field comes first.

• Don’t follow conventions blindly. Think about the design choices you’re making, and why.
• Use a top-down layout. Make sure the fields are in the right sequential order.
• Align labels above fields for maximum readability. This follows the top-down layout, and it’s also mobile-friendly.
• Break down the form into easy steps.
• Use branching logic to skip questions as needed. Unlike paper, you can hide irrelevant questions with a web form.

4. Auto-Complete

Look at line 2 below. Hmm, this is the Paper Mentality, right? On an envelope, you often need two lines to write the street address, and in turn, databases are designed to store 2 fields, so forms have 2 fields as well… but maybe you don’t need that anymore. Why not make it a single, multi-line field?

Well, maybe. But here’s a couple counterpoints: first, people are used to 2 lines. It’s not going to confuse or delay them too much. Second, what about the auto-complete feature in the browser? It turns those fields yellow and can auto-complete them for you. It would be silly to miss half the address because you thought you were clever.

HTML5 standards are evolving. The “autocomplete” attribute can support more than on/off, so leverage it to your advantage.

• Use common labels for fields like Name and Address, so the browser autofill can do the work for you.

5. Auto-Advancing

Auto-advancing nets you faster data entry — in theory. Once the respondent finishes a field, the cursor automatically goes into the next one, without an extra keystroke or mouse click. But in practice, most people don’t expect it, and end up fighting it.

Auto-advancing can be helpful if it’s used often and the user can learn to expect it. Since it’s not universally in use, however, you may be better off without it.

6. Hints and Labels

• Always add a label. Not including labels feels like a space saver, but it’s easy for people to forget what the label was and enter the wrong information.
• Do not use the “placeholder” attribute alone. Same problem as above: people might forget what the label is once they start typing. Plus, it’s bad for accessibility: screen readers require labels, and won’t pick up placeholder text the same way.

7. Non-Standard Components

Should you use the new shiny component that turns your input in a combo box that looks really neat and is so much easier to use? …Probably not.

It may not be compatible or compliant enough, and it may not be supported going forward.

Consider these questions for every new feature you’re thinking about implementing:

• Does it work with older browsers?
• Does it work with older devices?
• Does it work on all types of devices?
• Does it work on different locales and languages?
• Is it W3C standards / 508c compliant?
• Will it still be working next year, or the year after?

You can use HTML5 features with polyfills when needed.

8. Dark Patterns

A Dark Pattern is a user interface designed to trick users. For example, a dark pattern could con you into buying something you didn’t want, like an extended warranty.

You never want to deceive your respondents, so keep these guidelines in mind:

• Preserve user choices at all times.
• Use clear labels and calls to action.
• No opt-in by default. Don’t make decisions for your respondents. Opting in should be a deliberate choice, not automatic.

Originally featured on our blog and written by Deborah Kim