Cognitive Load and Error Recovery UX

A checkout form showed all validation errors in a red summary box at the top of the page on submit. The box listed: "Email is invalid. Phone number is required. Card number is incorrect format. Billing address required." The user who submitted the form had just filled in 12 fields. Their working memory was empty — everything they'd typed was now "saved" in the form.

Reading the error box meant re-loading 4 new facts into working memory, then scrolling down to find each of the 4 fields, then reinterpreting what they'd entered, then fixing each one. Support called it "form rage." Switching to inline errors — red text appearing immediately below the offending field — cut form-related support tickets by 60%.

The pattern: validate on blur (when the user leaves a field), not on submit and not on every keystroke. Validating on submit is too late — the user has lost context. Validating on keystroke is too aggressive — it marks fields invalid before the user has had a chance to finish typing.

function EmailField() {
  const [error, setError] = useState('');

  const validate = (value) => {
    if (!value) return 'Email is required';
    if (!value.includes('@')) return 'Enter a valid email like name@example.com';
    return '';
  };

  return (
    <div>
      <label htmlFor="email">Email</label>
      <input
        id="email"
        type="email"
        onBlur={e => setError(validate(e.target.value))}
        aria-invalid={!!error}
        aria-describedby={error ? 'email-error' : undefined}
      />
      {error && (
        <p id="email-error" role="alert" className="field-error">
          {error}
        </p>
      )}
    </div>
  );
}

The aria-invalid and aria-describedby attributes link the error to the field for screen readers — visual proximity isn't enough for non-visual users.

Priya spent ten minutes filling out a checkout form — name, address, card number, everything. She hit "Place Order." The page reloaded and a red box at the top read: Error 422. That's all. No field highlighted. No explanation. No suggestion for what to do next.

She scrolled up and down looking for something wrong. Nothing looked wrong to her. She tried submitting again. Same message. She closed the tab and bought from a competitor. The session recording showed 23 other users doing exactly the same thing that week.

After the redesign, the same card failure scenario showed a message directly below the card number field: "Your card was declined. Try a different card or contact your bank." Below the message, a button: "Try a different card." The field was highlighted with a red border and an error icon — not just color alone.

Priya's scenario now resolved in under 30 seconds. She saw the message, understood what happened, switched to her other card, and completed the purchase. Support tickets for checkout errors dropped 60% in the first month.

Fill out both forms incompletely and hit submit. The "Summary" mode shows all errors at the top in a red box. The "Inline" mode shows errors directly below the offending field. Notice how much easier it is to find and fix errors in the inline version.

The minimal pattern: a field wrapper that shows an error message below the input on blur, with the error text linked to the input via ARIA.

function Field({ id, label, validate }) {
  const [error, setError] = React.useState('');

  return (
    <div className="field">
      <label htmlFor={id}>{label}</label>
      <input
        id={id}
        aria-invalid={!!error}
        aria-describedby={error ? `${id}-error` : undefined}
        onBlur={e => setError(validate(e.target.value))}
      />
      {error && (
        <p id={`${id}-error`} role="alert" className="field-error">
          {error}
        </p>
      )}
    </div>
  );
}

Key pitfall: omitting role="alert" means screen readers won't announce the error when it appears. Without it, the error text exists in the DOM but is silent to assistive technology.