5 Mistakes To Avoid With Form Design

I’ll admit it: I hate filling out forms. Especially on my phone. That’s probably because there are so many bad ones. But it doesn’t have to be that way — this is one of the reasons I find the topic of form design so fascinating. Recently, I wrote about the keys to great form design in mobile apps, and you gave me some positive feedback. So, today I’m following up by sharing these five common mistakes, along with some tips on how to avoid them.

1. Using Modal Alert Dialogs for Form Validation Errors

A modal dialog is a new frame that pops up within your app or browser window; it’s often used on full websites to show close-up views of illustrations or pictures (e.g. when you click on an image of a product on Amazon, you might see this). Within an app, there may be a few good reasons to use a modal dialog — such as when a user requests more information, or there is an error on a screen that doesn’t involve a form. But using a modal dialog is a horrible approach for communicating errors within a form. Here’s why:

• Users can’t actually do anything to correct the error from within the modal dialog — it covers the original screen until they close out of the error window.

• By making users take that additional step — a click to close the window — they are more likely to abandon the form and bounce from the site. And as you probably know, a few percentage points difference in abandonment rates can make a huge difference to your bottom line.

• When a user closes the modal dialog, any details about the error that were in it will be gone. So if there were multiple errors, you’d better hope the user has a good memory.

I’d strongly suggest avoiding modal dialogs in forms entirely. Instead, show inline error text within the form that’s adjacent to each error — a much more intuitive experience.

Examples:

Form Design – One Error

Form Design – Multiple Errors: When the alert is dismissed, the user will have no indication of which field had the error. The app does not tell the user anything helpful when there are multiple errors.

Here is an app that effectively uses an error color (dark pink), an icon, and error text to describe the problems.

This app uses color as well as the word “Required” to clearly denote an error.

This app makes the error easy to spot with a red icon, as well as the text “Required.”

 2. Too Many Redundant, Verbose Error Messages

No one likes to be told they made a mistake. Using minimal and direct language to communicate errors is a must. Anything more may be annoying to the user — and may come off as condescending. A few common mistakes:

• If a required form field is missed, and the user hits submit, they might get an overly wordy error message like: “You need to enter a valid zip code. It’s a required field.” But all that’s really needed is a simple “Required” with a visual cue, such as red text.

• If the same user accidentally hits submit and multiple fields are still empty, they might see a series of repetitive errors at the top of the page (see example below). This pushes the form down and makes it hard to spot the individual errors.

A better way to approach it: Have a short, clear message at the top of the page, such as, “Looks like you didn’t fill out some required fields.” Mark the specific fields that need information as simply “Required.” And even better: Use auto-scrolling to take the user to the location of the first error and launch the virtual keyboard. When that error is addressed, take them down the form to each subsequent error. Two other tips that can also help pre-empt errors:

• Disable the “Submit” button until all required fields have been filled in.

• Be clear about the rules of the specific field. For example, if the password field requires at least eight characters, let users know ahead of time by displaying a hint either below the field, in the field using placeholder text, or have a small information button that the user can tap to display a dialog window with more descriptive information; don’t wait for them to make a mistake.

Example:

This form uses repetitive errors positioned at the top. The user would need to scroll down to fix them, causing the messages to be out of view. The light red background makes it obvious that those fields have an error without the lengthy message.

3. Bad Spacing

It’s not uncommon for hasty developers to take a web form and drop it into their mobile app without much thought. And like a lot of desktop experiences, a form designed for mouse and keyboard on a big screen just won’t translate well to a mobile app. The biggest problem is that some forms don’t offer a large enough touch target — so the user may try to touch one form field but miss, and activate an adjacent field by mistake. This can be aggravating, especially if repeated. Best practice by Apple suggests at least 44 by 44 point touch targets; Google suggests at least 48 by 48dp for all UI elements in Android apps — forms included. This gives users a large enough target and margin of error to ensure success. Oftentimes, forms are designed without noticing that the text copy gets truncated, overlaps, or touches other design elements. Be sure to give enough space for the text, and solve for the case that your text becomes longer.

Examples:

This form’s input fields are only 30px tall, compared to 44px suggested height.

In this form, the “Confirm P…” is cut off, which does not look refined. Also, the placeholder text is redundant. Not every field needs placeholder text.

4. Repeating Password or Email Entry

The only thing that might be more annoying to a user than asking for too much information on a form is asking for the same information more than once. If people sign up through your app, don’t make them log in again right after they sign up. They should automatically be signed in. Also, make sure your app remembers the user’s credentials after that first login. Lastly, don’t make a user type in their password twice to create it and validate it. Instead, provide a “show/hide” password option that allows the user to see as they type, and ensure it’s the password they wanted.

5. Just Plain Ugly

With the importance of beautiful imagery and intuitive navigation inside of an app, it’s easy for form design to be an afterthought. Don’t let that happen. The form is often the first impression you’ll make on a user, and if it’s a bad one, it could be the last. Make sure that you are delivering an experience consistent with the rest of your app — functionally and visually. Your brand deserves it.

You choose: When comparing sites to buy an airline ticket from, which form would you choose and why? Comment below.

Option A:

Option B:

Option C:

Option D: