Hierarchy: One Hero per Screen
Emphasize everything and you emphasize nothing. How type size, weight, and color allocate attention — and A/B spot-the-difference to catch screens that steal the scene
THE QUESTION THIS PAGE ANSWERS
ANSWER FIRSTWhat is the key idea behind “Hierarchy: One Hero per Screen”?
Emphasize everything and you emphasize nothing. How type size, weight, and color allocate attention — and A/B spot-the-difference to catch screens that steal the scene
Turn taste into a behavior the product can repeat. The useful outcome is not a nice opinion. It is a visible rule, a small example, and a way to tell when the experience falls below the bar.
Capture one before-and-after example that shows the quality bar without extra explanation.
Polish that improves the surface while leaving the user's uncertainty untouched.
Attention is scarce, and every element on a screen is fighting for it. Bold, red, bigger—each move makes sense alone, but stacked together they cancel out: five leads on stage, and the audience remembers none. Hierarchy flips that: pick one hero first, then let the rest step down by importance. You only get three levers:
| Lever | How to use it | Common crash |
|---|---|---|
| Type size | One or two steps bigger than supporting roles is enough—spread the steps, keep the count restrained | Three elements all at the largest size, big type fighting itself |
| Weight | Body at 400, emphasis at 700—two steps rule the screen | Everything bold, so bold loses the meaning of "more important" |
| Color | Give the accent color to one action or one number only | Three things in red—readers can't tell which red is the real alarm |
About Face 4: The Essentials of Interaction Design, chapter 17 on visual hierarchy, opens by splitting a user's first reaction into two subconscious questions: "What's important here?" then "How are these things related?" Cooper's take: the interface answers both by building hierarchy and relationships. Done well, users barely notice hierarchy; done badly, chaos jumps out immediately.
Those two questions are this lesson's acceptance mantra. For every case below, ask yourself first: can you find the hero in three seconds? Which elements read as one group at a glance?
Here's a product card. All three levers are yours: title size, secondary-info color, accent-color count. Pull them and watch how the card's "hero" shifts.
Beginners build hierarchy by addition: hero not loud enough? Bigger, bolder, add a fill. Cooper's advice flips that: when two elements fight for attention, dimming the secondary beats amping the primary. Dimming clears room for the hero; amping starts an arms race—this version enlarges the title, the next enlarges the button. The book's image: when every word on screen is red bold, which word stands out?
Hierarchy rides on visual variables—and variables have two temperaments. About Face 4 follows Bertin's Semiology of Graphics: size and value (lightness) are ordered variables—the eye automatically reads "bigger" and "darker" as "more important"; hue (red, blue, green) has no natural order. Readers can't rank red vs blue, and they'll invent meanings in the colors. To carry hierarchy, prefer the two ordered levers.
There's a zero-cost check for hierarchy—graphic designers call it the squint test: squint at the screen; once detail blurs, see what still pops and what collapses into a group. About Face 4 lists it as a regular check for hierarchy and relationships. A different angle often catches layout issues you missed. Hold the button below to simulate a squint and compare the two UIs.
One hero per screen. In a glance readers ask "what's important" and "what's related." Pick the hero first; step the rest down by relationship—then both questions have answers.
One step on each of three levers is enough: size up one or two steps, two weights, accent color in one place. Prefer size and value—the ordered variables—for hierarchy; leave hue for categories.
Want emphasis? Subtract first. Dimming the supporting cast beats amping the hero; cut screen time from elements farthest from the core decision.
Squint once before you ship. If primary and secondary still separate when blurred, hierarchy holds; if not, go pull the levers again.
Source: Original to Xiaoshan Academy's Taste Engineering series; some principles adapted from About Face 4: The Essentials of Interaction Design, chapter 17 (Alan Cooper et al.).
Turn the feeling in “Emphasize everything and you emphasize nothing” into a judgment
“Attention is scarce, and every element on a screen is fighting for it.” points out that AI has lowered the bar for making something usable. The skill readers need is noticing what is wrong and turning that feeling into an actionable requirement.
Watch the user's next action, not just the surface
Turn “About Face 4: The Essentials of Interaction Design , chapter 17 on visual hierarchy, opens by splitting a user's first reaction into two subconscious questions: "What's important h…” into observable questions: does the user know what happened, what to do next, and how to recover from an empty or failed state? Does the hierarchy make the important information visible first?
Pretty is not the same as usable
Apply “Squint once before you ship.” to a second screen or flow. Record one moment of hesitation and the user action after the change; observable behavior is stronger evidence than polish alone.
From “Emphasize everything and you emphasize nothing” to “In a glance, readers ask two questions”
“Emphasize everything and you emphasize nothing” grounds the problem in “Attention is scarce, and every element on a screen is fighting for it. Bold, red, bigger—each move makes sense alone, but stacked together they cancel out: five leads on stage, and the audience remembers none…”. “In a glance, readers ask two questions” then moves it toward “About Face 4: The Essentials of Interaction Design , chapter 17 on visual hierarchy, opens by splitting a user's first reaction into two subconscious questions: "What's important here?" then "How are these thin…”. Together, they show that the lesson is not just a conclusion to remember, but a claim with conditions.
Carry the judgment into the next situation
For experience work, turn abstract impressions into user actions: did the person understand the state, find the next step, recover from an error, and want to continue?
- “Emphasize everything and you emphasize nothing”: Attention is scarce, and every element on a screen is fighting for it. Bold, red, bigger—each move makes sense alone, but stacked together they cancel out: five leads on stage, and the audience remembers none…
- “In a glance, readers ask two questions”: About Face 4: The Essentials of Interaction Design , chapter 17 on visual hierarchy, opens by splitting a user's first reaction into two subconscious questions: "What's important here?" then "How are these thin…
- “The closing point”: One hero per screen. In a glance readers ask "what's important" and "what's related." Pick the hero first; step the rest down by relationship—then both questions have answers
The final “The closing point” brings the discussion to “One hero per screen. In a glance readers ask "what's important" and "what's related." Pick the hero first; step the rest down by relationship—then both questions have answers”. The useful thing to carry forward is knowing which judgments must be revisited when input, scale, or risk changes.
I turned one judgment from this article into a small experiment I could run today. Knowing what to observe next is more useful than simply remembering the conclusion.
After reading this, I first looked for the conditions behind the idea instead of copying the method into a project. That order made the later trade-offs much clearer.
When this judgment reaches real work, which constraint should be added first? I am curious which step matters most between reading and the first practical attempt.
No discussion on this article yet.