Hierarchy alignment checks should run on real data, not ideal mockups

What it is

On the artboard a task card is titled “Design review,” two attachments, owner “Mina,” status “In progress.” In production the same component swallows a 40-character title, a missing image, a four-digit id, three stacked badges. The mockup’s “title first, status second” becomes “the long title eats everything, the badges are the most saturated objects.” Alignment is checked on pixels people will see, not on ideal strings on the board. A hierarchy that passed on placeholder copy often flips under the real distribution. Fake data is not a neutral sample. It systematically under-competes: short text, complete images.

Why it happens

Placeholders press several weight-changing variables to their kindest values at once: short titles shrink area, tidy avatars avoid holes, empty badges avoid saturation peaks, short English keeps line count tame. The real distribution is long-tailed on those axes. A Chinese title wraps and the type block suddenly becomes the heaviest object on stage; a missing image exposes a slab of ground or a broken-image icon, a new isolated peak; badges multiply and fill the saturation channel. Rankings made on the board were made with competition switched off. Restore the conditions and the ranking is not that ranking. The mess is not “data got dirty after launch.” The check ran on the wrong sample.

Where it stops holding

A brand-new product with no production store can fake percentiles from a predecessor: titles at the 90th percentile length, image-miss rate estimated from reality, not the designer’s name. A campaign whose pipeline really is all retouched short lines may be checked on retouched comps, if that pipeline cannot ingest long user text. Extreme-value tests (too long, all empty) are layout overflow defence, not hierarchy alignment; alignment wants typical-hard real samples, not only the single longest scare row.

Applying it

• Review packs include at least one production screenshot or a preview filled from the production API. An artboard alone cannot pass hierarchy.
• When filling, keep long titles, missing images, stacked badges and empty rows mixed in. Do not wash the set into “ten pretty ones” first.
• Component-library examples should be real percentiles, not “John / three words / perfect photo,” or the next file grows from the same kind sample.
• Check: artboard and production of the same component, side by side, five-second writing on each. If first place differs, retune weight against production (often a max line count on long titles and lower badge saturation), then fill another real sample to confirm a different tail does not flip it again. Aligned on the board and misaligned in production is not a pass.

Related

• Same group: F3.07.4 Alignment of visual hierarchy with content priority can be tested with eye tracking or first-look tests · F3.07.1 Visual hierarchy must match content priority
• Nearby: F2.16.1 Layout needs testing with extreme-length content, not typical samples · F4.10 Truncation and ellipsis
• Search terms: real data · placeholder · visual hierarchy · production screenshot