dai11y 11/10/2022

Your daily frequent11y newsletter, brought to you by @ChrisBAshton:

Designing Better Inline Validation UX

Vitaly Friedman writes a lengthy analysis of the different approaches to inline validation.

There are places where it is useful and non-controversial, e.g. a password strength indicator, where a live feedback mechanism lets you know whether or not your password is strong or weak as you fill in the field.

Other places are full of nuance. It is difficult to know whether a user has deliberately or accidentally skipped a field, and whether or not they intend to go back to it. At what point do you intervene?

You could validate on page load, which is a poor experience for users: all error messages by default, until they fill in the form. This is more distracting than helpful.

Or you could validate on form submit, which is a clear message of intent from the user: “I think I’m finished”. But then the resulting errors can be overwhelming, especially if there are several things the user has to go back and fix.

Vitaly gives many snippets of general guidance to follow, such as:

  1. Never disabling copy and paste
  2. Validating early when the format is predictable (e.g. if an input must begin with a particular sequence of characters, like a country code at the beginning of an IBAN)
  3. Use the ‘reward early, punish late’ mechanism (don’t show errors by default, but do show an error when leaving the field, if the input is wrong. When the user goes back to fix it, remove the error as soon as the input looks good – NOT waiting until the user leaves the field again).

Definitely worth a skim!


Prefer longer newsletters? You can subscribe to week11y, fortnight11y or even month11y updates! Every newsletter gets the same content; it is your choice to have short, regular emails or longer, less frequent ones. Curated with ♥ by developer @ChrisBAshton.

Loading...