[draft in progress] How form states and sudoku are similar and how that should drive your form's state-based user messages.

error-first-form-states.md

[Draft started 3 August 2021]

Error-first Form States

Create good user messages based on form states using error-first design.

Error-first design?

This tweet went out in 2018 and almost nobody picked up on it.

Build your app in its error state, then fix that, TDD or not. Make #ErrorFirstDesign a first-class citizen.

There follows a link to another tweet that has since been deleted, illustraiting the point that applications can enter unwanted or unsafe states without any intentions.

Loaded states

A loaded form on the web can be in one of four states initially:

1. Empty: No values or selections are provided.
2. Invalid: Some values or selections are invalid and should be corrected.
3. Incomplete: Some but not all values or selection are provided and valid.
4. Complete: All required values or selections are provided and valid.

That is the same set of possible states for an address change form or a sudoku puzzle.

Asynchronous states

An asynchronous form be can in one of four states:

1. Loading: form initialization in progress.
2. Submitting: request in progress.
3. Errored: data not accepted.
4. Failed: request not accepted.
5. Success: request and data accepted.

Once a form is complete, it may be submitted. Of course, you need not validate in the client, but leave all that to the server, if you wish.

[more to come...]