Your Product's Visual Hierarchy Is Broken. Here's How to Fix It.

Open your product. Look at any screen. Where does your eye go first?

If the answer is "everywhere" or "I'm not sure," your visual hierarchy is broken.

What Hierarchy Does

Visual hierarchy tells users what to look at and in what order. It answers: What's most important? What's secondary? What can I ignore?

Without hierarchy, users have to figure this out themselves. That takes effort. Effort creates friction. Friction kills conversion.

"Hierarchy is the silent instruction manual for every screen. Without it, users are lost."

Jakob Nielsen's research at Nielsen Norman Group showed that users scan pages in predictable patterns—but only when hierarchy guides them. Without clear hierarchy, scanning becomes random. Random scanning means users miss your most important content.

Signs Your Hierarchy Is Broken

- Multiple elements fighting for attention - Headlines and body text at similar weights - Buttons that all look the same regardless of importance - No clear focal point on page load - Users frequently miss important actions

These aren't usability problems. They're hierarchy problems.

The Three Levels

Every screen should have exactly three levels of visual importance:

Primary: One element gets the most visual weight. Largest. Boldest. Most contrast. This is what the user sees first.

Secondary: A few elements at moderate weight. These are important but not first-priority.

Tertiary: Everything else. Low contrast. Smaller size. These elements exist but don't compete for attention.

"Three levels. Not four. Not five. Three."

Stripe exemplifies this. On their homepage, the headline is unmistakably primary. The subhead is clearly secondary. Navigation and footer are tertiary.

Linear does the same. The app's content area is primary. The sidebar is secondary. Chrome elements are tertiary.

Three levels is enough. More creates confusion.

How to Establish Hierarchy

1. Size

The most important element is the largest. Scale creates dominance.

Notion's page titles are significantly larger than body text. The size differential isn't subtle—it's pronounced.

2. Weight

The most important text is the boldest.

Vercel uses weight strategically. Marketing headlines are heavy. Body copy is regular. Labels are medium. Each weight signals importance.

3. Contrast

The most important element has the most color contrast.

Primary buttons should have maximum contrast (your accent color on a contrasting background). Tertiary links should have minimal contrast (muted text color).

4. Position

The most important element is where the eye naturally goes.

For Western layouts, that's top-left for general content, center for focused tasks.

Linear places the most important content in the main viewport. Secondary content (sidebar, list) is peripheral.

5. Whitespace

The most important element has the most room around it.

Apple product pages give hero elements massive margin. Everything else is compressed by comparison.

These techniques compound. Use them together.

The Squint Test

Blur your vision or step back from the screen. Squint until you can barely see the interface.

What's still visible? That's your hierarchy.

If you can still see multiple competing elements, your hierarchy is weak.

"The squint test reveals what users perceive in their first milliseconds."

Steve Schoger recommends this in Refactoring UI. It's the fastest way to check hierarchy.

The One-Primary Rule

Every screen should have exactly one primary element. Not two. Not three. One.

If you have two CTAs that both look primary, one of them is wrong. Decide which action matters more. Make the other secondary.

If your headline and your hero image both demand attention equally, decide which one leads. Reduce the other.

Luke Wroblewski, product director at Google, wrote about this in Mobile First: "Constraints force prioritization. When you can only have one primary element, you have to decide what's actually important."

"Hierarchy is about choosing. Products that can't choose look confused."

Apply Systematically

Hierarchy decisions should be documented and applied everywhere.

Create a typography scale: - Headlines: 32-48px, bold weight - Subheads: 20-24px, medium weight - Body: 16px, regular weight - Labels: 12-14px, light weight or muted color - Captions: 12px, muted color

Create a contrast scale: - Primary: Full foreground color - Secondary: 70-80% opacity - Tertiary: 50-60% opacity - Disabled: 30-40% opacity

Apply these scales consistently. A system prevents one-off decisions that break consistency.

The Hierarchy Audit

Take any page in your product. List every element. Assign each a level: primary, secondary, or tertiary.

If you have more than one primary, you have a hierarchy problem. If your secondaries look like primaries, you have a contrast problem. If nothing feels primary, you have a focus problem.

Fix your hierarchy, and your product suddenly feels professional. Users know where to look. Actions get completed.

---

Ready to fix your hierarchy? Try the Vox Animus demo to define your visual direction systematically.