Watch
UI state 1:07
A 67-second explainer of UI state, narrated over the same demo you can try yourself.
Try the interactive UI state demo
What this video covers
UI state is the particular condition a screen or component is in at a given moment - empty, loading, partial, error, or full of ideal content - and each one looks and behaves differently. Designing a product means designing all of its states, not just the polished "everything's perfect" one, because users will hit the empty, slow and broken states constantly.
Designers love the ideal state - full of perfect content - but users spend real time in the others: the empty screen on day one, the spinner on a slow connection, the error when something breaks. Cycle through them and notice how a blank "empty" feels broken while a guided one welcomes you, and a vague error frustrates while a clear one helps. Every state is a design decision - the question is whether you made it on purpose.
