What users look at first, second, and last — and how you control it.

Visual hierarchy is the arrangement of design elements to guide attention in a deliberate order. It determines what a user sees first, what registers as supporting context, and what recedes into the background. In a product, it determines whether users can find what they're looking for, understand what they can do, and know what the most important action is.

Strong visual hierarchy is often invisible — users just find the interface easy to read. Weak hierarchy becomes obvious when users have to work to locate things, when everything seems equally important, or when no single element draws the eye at all.

Most hierarchy decisions come down to five properties:

• Size: Larger elements get more attention. Headline type signals importance; small text signals supporting detail.
• Weight: Bold text stands out from regular weight. Varying typographic weight is the most efficient way to build hierarchy in text-dense interfaces.
• Color: High contrast draws the eye; muted tones recede. A single accent color applied to the primary action creates immediate hierarchy on a neutral page.
• Space: Whitespace is not empty — it's a signal. Elements with more surrounding space appear more important than elements packed tightly together.
• Position: Users scan in predictable patterns. Top-left and center-top carry the most visual weight by default in left-to-right reading cultures.

Hierarchy is straightforward when a screen has two or three things on it. It becomes hard when product complexity grows and every team has a feature that's "the most important thing on this page."

This is common in B2B products where multiple stakeholders own different parts of a dashboard or workflow. The result is pages where everything is bold, everything is prominent, and therefore nothing is. Cognitive Load climbs, users either slow down significantly or stop engaging with content they don't immediately recognize as relevant to them.

A quick hierarchy audit uses the squint test: blur your eyes or view the page at 20% zoom. What stands out? Is it the element that should stand out?

A more structured audit maps every element on a page and assigns it an intended priority level — primary, secondary, tertiary, background. Then check whether the visual treatment matches the intention. Mismatches — a secondary element that visually dominates, a primary action that's easy to overlook — are the specific places to fix.

For products that have grown organically and never had a systematic hierarchy review, a UX Audit will typically surface these issues as part of the heuristic evaluation.