Give Good Feedback

Better UX keeps your users engaged and increases the value of your product. Happy users are happy customers!

As humans, the sooner we observe the results of our choices, the faster we learn.

The Problem

Ever filled out a long form online and clicked submit only the have nothing happen? It can be infuriating!

Is the form broken? You scroll around a little; maybe there's an error? Which field is wrong?

Oh! There's the error message, all the way at the top of the page.

This is a terrible experience. Yet even though it's so easy to avoid, it is all too common online.

We definitely want an enjoyable, calm experience when new users sign up, existing users log back in, and anyone tries to pay us!

The Solution

There are multiple problems typically at play when it comes to bad form UX.

The good news is that they can be independently identified and resolved!

Let's break it down.

Co-locate Feedback with Input

Layout your forms such the validation feedback is located directly beside or under the related input.

Give Feedback As Soon As Possible

As often as possible, give feedback as the user is typing.

If that doesn't make sense, then give feedback when the input loses focus.

The only time feedback should be delayed until the user submits the form is when validation simply must be done server-side.

Make Invalid Inputs Visually Distinct

Invalid input fields should be visually distinct. This is almost always accomplished by adding a red border to the input.

It's also common to make the associated input label and validation feedback the same red color.

To improve accessibility, including error iconography is also a good practice.

Never rely solely on color. This is a great rule for accessible user interfaces in general. Always pair color with iconography or some other distinct visual indicator.

Ensure that Errors are Visible

If validation absolutely must wait until the form is submitted, then when validation errors occur, automatically scroll the user to the first one.

Take Action Now

1. Identify all the forms in your software. Start with high-value forms first. These three are critical:

• Sign up
• Log in
• Payment

1. Ensure input feedback is next to the associated input field.
2. Run validation on each keystroke or on input focus loss.
3. Scroll to the first error when form submission fails validation.

Congratulations

Your users are going to make mistakes, now they'll find out sooner and won't have to hunt for their mistake. They'll be less frustrated.

We definitely want an enjoyable, calm experience when new users sign up, existing users log back in, and anyone tries to pay us!