Interface Lab
Login
Back to knowledge
Resource Licensing

Friendly Asset Governance for Empty States

Illustrations, emoji, and Lottie can make empty states friendlier, but they must first serve reason, next action, license record, alt text, and reduced-motion.

illustrationempty-statelottieaccessibility

Design Principle

Friendly assets are not the main actor in an empty state. They reinforce tone, reduce anxiety, or aid understanding; the real interface value is clear reason, next action, and legally reusable asset metadata.

Large Theory

Empty states, success states, no-search-results screens, and configuration gaps often use illustration, emoji, or Lottie to feel warmer. But the friendlier the asset, the easier it is to hide the actual task gap: users still need to know what happened, why there is no content, whether recovery is possible, and what to click next. The asset and knowledge libraries should bind visual tone to action path, license, accessibility, and performance instead of treating illustration as pretty filler.

Small Points

  1. Classify the state first: first use, no data, no search results, permission/configuration gap, error recovery, or completion celebration. Each needs a different tone and action.
  2. Illustration depends on space and task: full-page onboarding can use a larger image; table, card, or repeated-widget empty states often need a small icon or text only.
  3. Every empty state needs at least a short title, reason/expected content, and one primary action; add a learning link or reset-filter path when useful.
  4. If the image conveys information, write a specific alt. If it is decorative, use empty alt or aria-hidden. Lottie and emoji cannot be the only state feedback.
  5. Lottie and looping motion need a static poster, text status, and prefers-reduced-motion branch; loading, success, and error must not rely only on animation.
  6. Licensing lands on the specific asset: Open Doodles, Open Peeps, and Humaaans are CC0; unDraw uses a custom license with collection and AI-training restrictions; LottieFiles public animations use the Lottie Simple License; Twemoji graphics are CC BY 4.0 and require attribution.

Design Judgment

If users can still understand the empty state and take the next step after the illustration is removed, the asset is helpful. If removing the asset leaves only No data or no recovery path, the illustration is covering for a missing task design.

Implementation Notes

Create an intake record for each friendly asset: stateType, assetName, sourceHref, license, commercialUse, attribution, format, altBehavior, motionBehavior, primaryAction, secondaryAction, fallback, and ragKeywords. In frontend implementation, fix container size and image aspect-ratio so illustration loading does not shift layout. Inline or self-host SVGs, render Lottie through a player with a static fallback, and prefer text-only empty states when many empty widgets repeat on one page.

Counterexamples/Risks

No-search-results showing only a large illustration with no reset action, every dashboard widget repeating the same people image, emoji replacing error copy, popular unDraw/Open Peeps assets making the brand feel templated, Twemoji used without attribution, and Lottie success animation shipping without reduced-motion or text confirmation.

Case Study

Shopify Polaris' Empty state composition frames blank screens as opportunities to guide merchants toward their first action, and its example combines image, title, explanation, primary/secondary actions, and alt text. Carbon's Empty states pattern treats image as optional, notes that limited spaces can use text only, and recommends replacing the original element so screen readers do not read an entire empty table before the message. Atlassian defines empty state as a no-data moment that explains what users can do next. The reusable lesson is that illustration is an optional anatomy layer; action path and semantic explanation are the core.

Source Links

Shopify Polaris Empty state: https://shopify.dev/docs/api/app-home/patterns/compositions/empty-state Carbon Empty states: https://carbondesignsystem.com/patterns/empty-states-pattern/ Atlassian Empty state: https://atlassian.design/components/empty-state W3C Non-text Content: https://www.w3.org/WAI/WCAG22/Understanding/non-text-content.html Open Doodles About: https://www.opendoodles.com/about Open Peeps: https://www.openpeeps.com/ unDraw License: https://undraw.co/license LottieFiles License: https://lottiefiles.com/page/license Twemoji: https://github.com/twitter/twemoji

Agent Directive

Before recommending friendly assets, output stateType, next action, asset license, alt/decorative decision, and motion fallback; do not let illustration, emoji, or Lottie replace explanation and action entry.