Input Validation

Recommended reading:

• https://uxdesign.cc/forms-need-validation-2ecbccbacea1
• https://uxdesign.cc/design-better-forms-96fadca0f49c
• https://uxdesign.cc/alternatives-to-placeholder-text-13f430abc56f

Principles

Movement is distracting. As much as possible, we'd like to avoid moving elements on the page.

Users aren't stupid. We should try to avoid overreacting to invalid inputs if they're probably on the way to a valid input.

Interrupting flow is annoying. We should try to give users validation information when it's relevant to what they are thinking about, not what they were thinking about.

Whenever moving elements on the page or changing the user's focused element, we should use animations to avoid losing context.

We should consider automatically stripping trailing whitespace, maybe on focus loss?

Position Options

Below the input

Pro:

• Hard to miss
• Doesn't require any user interaction

Con:

• Moves content below input down, then up when dismissed
  • Mitigation - always leave room below input for error to appear
    • Presumes max of 1 error at a time

Tooltip

Pro:

• Doesn't move content
• Can be made visible when input has focus and hidden when not relevant

Con:

• Without mousing over, only visible when input focused
  • Partial mitigation - show all outstanding tooltips on submit attempt

Timing Options

Modifiers for any option:

• ... but show only the status icon/color, and hide the message until ...
• ... but only after x seconds of inactivity
• ... but only after it was valid once

Continuous

• Can be very aggressive without any modifiers

On focus lost

• Disrupts the user's flow, since validation occurs only after the user has indicated they are done with the field.
  • Unless the user knows about the shift-tab shortcut
• Focus is also lost when the window loses focus, such as when a user switches to Slack to answer a direct message.

On submit

• Also focus the first invalid input, which might be useful when hitting return whether this option is picked or not

Marking Options

• Mark invalid only
  • Current pattern
  • No indication that validation was performed when everything is correct
• Mark invalid and valid
  • Can be very visually busy/distracting
• Mark valid only
  • No indication that inputs are invalid if they all are

Chosen Strategy

Timing

We will validate input while the user types after some time delay in an attempt to wait until the user has paused typing. We will also validate the input immediately when the input loses focus.

Marking

We will show an error message below the input in a space reserved for this purpose. We will ensure the error message does not cause the elements below to move down.