Posted in Forms, Mobile, Usability

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