E6.07.3stale skeletondesignresearch

A long skeleton confuses more than a spinner

Aliases: endless skeleton · fake loaded · skeleton timeout

What it is

A skeleton’s force comes from “this is about to arrive.” Past that short expectation, grey blocks still shimmering, people start to wonder whether this is an already-loaded but damaged page: structure without type, maybe this is the product. A long skeleton confuses more than a spinner of the same duration, because a spinner keeps saying “not yet,” while a skeleton looks like a UI. This leaf is about the lifetime of skeleton as a loading language—not about whether the structure is accurate, and not about determinate progress.

Why it happens

A skeleton borrows the shape of content, so it has a built-in deadline: that shape should be replaced by the real thing. Past the deadline the same shape is reclassified—from placeholder to incomplete real interface. The moving highlight is meant to say “alive,” but over a long wait it can also be read as decorative motion. A spinner has no content shape, so classification does not slide toward “this is the page”; its failure is not telling you what is coming, not letting you think it already came. People also tap skeleton blocks that sit on real button coordinates. No response upgrades confusion into “broken” or “disabled.” On short waits the skeleton wins on orientation; on long waits it loses on identity.

Studying it

Stretch the wait to several seconds and compare skeleton, spinner, and skeleton that yields to a spinner after a timeout.

Independent variables: wait duration, whether the skeleton keeps shimmering, whether the language changes after timeout. Dependent variables: attempts to tap the blocks, reports that “the page already appeared,” time to abandon, and how people later describe what was happening.

Separate “felt slow” from “thought it was done.” The second is the skeleton-specific failure. Do not cue “this is loading” in the prompt, or participants will not make the misclassification a product actually sees.

Where it stops holding

A wait known to be long and measurable (a large file, an export) should not be carried by a skeleton; that is a progress bar’s job, and a timed-out skeleton should yield. On a weak network both skeleton and spinner can last, but the skeleton must at some point become an explicit “still loading / failed, retry,” not an infinite shimmer. On a page that has partially arrived (shell first, type later), skeleton blocks left unfilled for a long time cast doubt on the real content that already appeared. Branded or playful skeletons that look finished raise the timeout risk further.

Applying it

  • Put a time limit on the skeleton; past it, switch to a spinner, progress, or failure. Do not let grey blocks shimmer forever.
  • Do not make skeleton blocks tappable; real buttons should appear only with their content, so a placeholder is not read as a disabled control.
  • When part of the page is known empty, switch that region to an empty state instead of leaving a skeleton that pretends more is coming.
  • Verify by stalling the load for ten seconds. Ask whether the page is done and what they tried to tap. “Looks done but no type,” or taps on grey, means the skeleton outlived its language.

Related

  • Within the group: E6.07.1 A skeleton screen expresses the structure of content about to arrive · E6.07.2 A mismatch with real content causes a jump
  • Adjacent: E6.08 Loading indicators · E6.09 Determinate and indeterminate progress · E6.10 Error and fallback pages
  • Search terms: stale skeleton · perceived completion · loading language

Cards in the same group

Quick Actions

Share

Share this page

ios_share

https://hci.top/en/handbook/E6.07.3