Instant (real-time) validation

One of the things customers love about frevvo forms is the built-in real-time validation. It’s a key usability feature.

Everyone’s filled out a form where you enter your data, click Submit, wait a while and get some errors. The errors are displayed at the top and fields in error are not highlighted. Often, some fields (e.g. passwords) get reset.

Real-time validation makes life a lot easier for the user. But, is it better to show a positive validation (e.g. a green tick) to indicate success or negative validation (e.g. a red background) when there’s a failure? We find the tick marks very distracting. On small screens, they also take up valuable screen real-estate as the image at left shows.

iPhone form with ticks

The ticks take up space and distract the user

iPhone form with errors

The user is alerted only if there’s a problem that needs attention. The error is prominent (we don’t like it when it fades away) . A context-specific error message is displayed near the problem control.

frevvo’s approach is to be minimize intrusions:

  • Don’t bother the user unless there’s something that requires attention.
  • Mark errors clearly and prominently and don’t let the visual indicator fade away and disappear.
  • Provide a clear and concise error message.
  • Show the error message next to the problem control.
  • Provide the feedback in real-time and not after submitting.
  • Don’t reset passwords or make the user enter data again.

It’s hard enough to get users to complete forms; why annoy them even more? Try it. You’ll find that users make fewer errors, complete forms faster, successfully submit them more often and are generally more satisfied.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: