F6.06.1empty-state illustrationdesign

Illustration fits empty states and mood

Aliases: mood illustration · empty-state art

What it is

An empty inbox, zero search hits, a first open with nothing in it — the page has no business object to scan, only a blank. Illustration's job here is to say that the blank is a state, and to give it a little temperature: not yet, you can start, something will live here. It is not teaching the next tap, and it is not turning every row in a populated list into a scene. "Fits" means those no-object moments. Once there are objects to scan, illustration becomes a second content stream competing for attention.

Why it happens

The cognitive task of emptiness is light: confirm "not broken, actually empty", and be willing to stay. A large blank reads as a failed load or an unfinished page. A scene makes emptiness intentional. Mood rides along: a light scene lowers "did I do this wrong"; a quieter one fits "there used to be something, now there isn't". Once cards, numbers, and rows are on the page, the scan path is already booked by business objects. Illustration has no cognitive vacancy and only inserts a parallel story. So fitness tracks object density: near zero, it covers; density up, it should leave.

Where it stops holding

  • Error, denied permission, and offline are faults, not emptiness. Warm illustration on those moments says nothing is wrong.
  • In specialist, high-frequency tools, even empty often needs only a line of type. Mood becomes noise after the third visit.
  • A brand welcome can be bolder than an empty state. That is a first meeting. Do not copy welcome specs onto every zero-result.
  • Illustration being tapped as a control, or a file so heavy it stalls the empty page, are separate failures. They do not evict illustration from the empty page.

Applying it

  • Put a scene only on pages whose job is "confirm empty, add a little warmth": first-run with no content, a filter that returned none, a cleared list. Populated pages lose the drawing.
  • The empty state's main sentence still belongs to words (why it is empty). Illustration only makes the blank look intended.
  • How to check: drop the drawing and leave the one-line explanation. If the page immediately looks broken or unfinished, the illustration was doing its job. If nothing informational is lost and the page is merely "less pretty", this page does not need it.

Related

  • Same group: F6.06.2 Illustration must not carry the action · F6.06.3 Illustration's load cost is out of proportion to its information density
  • Nearby: E6.06 Empty states · F2.07 Information density
  • Search terms: empty-state illustration · mood illustration · empty state

Cards in the same group

Quick Actions

Share

Share this page

ios_share

https://hci.top/en/handbook/F6.06.1