Section 10 · Time, Motion & Interaction

Interface States

Definition

The distinct visual conditions an element occupies — default, hover, focus, active, disabled, loading, error, empty, success.

Why it matters

An interface designed only in its ideal state is unfinished. Loading, empty, and error states are where users actually spend their difficult moments.

Example

A submit control rendered in default, hover, pressed, loading, and confirmed states.

Note

It’s easy to design only the happy path. Asking what the screen looks like with no data, or on a failure, is often the single most productive question you can ask about your own work.