Visual Hierarchy
Visual hierarchy is the size, weight, and color system that decides what your visitor sees first. Get it wrong and the primary CTA loses to a stock photo.
Visual Hierarchy
The deliberate use of size, weight, color, and spacing to rank elements on a page so attention lands on what converts.
Visual hierarchy is the visual ranking system on a page — the size, weight, contrast, color, and whitespace choices that tell a visitor which element to look at first, second, and third. On a product page the top of that ranking is the price and the primary CTA. On a landing page it is the headline, sub-head, and primary CTA. Everything else is supporting cast.
When hierarchy is wrong, attention leaks: a hero image dominates the fold, a secondary 'Learn more' link competes with 'Add to cart', and the price hides in 14px gray text. Fixing hierarchy is usually cheaper than fixing copy and faster than fixing speed — and it is one of the highest-leverage moves in UX optimization.
The test for whether hierarchy is working is brutally simple: squint at the page, or blur it to 10% in any image tool. If you cannot still identify the headline, the price, and the primary CTA in under two seconds, your hierarchy is broken — no matter how clean the design looks at full clarity.
Most underperforming pages share the same failure mode: every element is shouting. Three banners, two badge ribbons, a sticky promo bar, and a 'chat with us' bubble all compete with the primary CTA. The fix is rarely adding something — it is removing visual weight from everything that is not the conversion path.
Scan Score = (Size_rank + Contrast_rank + Position_rank) / 3
Size_rank
Size rank
Rank of the element by visual area (1 = largest on the fold, 10 = smallest).
Contrast_rank
Contrast rank
Rank by color/weight contrast against the page background (1 = highest contrast).
Position_rank
Position rank
Rank by F-pattern position (1 = top-left fold, 10 = below the fold and right-aligned).
A Shopify apparel PDP where you want 'Add to bag' to be the primary CTA.
Size rank of Add to bag button: 3
Contrast rank of Add to bag button: 2
Position rank of Add to bag button: 4
→ 3.0
A scan score of 3.0 means the CTA averages third-most prominent on the fold. For a primary CTA you want a scan score at or below 2.5 — usually achieved by increasing button size, switching to a higher-contrast fill, and lifting it above the size guide link.
Treat scan score as a back-of-envelope diagnostic, not gospel. It surfaces the obvious wins — a 12px price next to a 64px lifestyle photo — without needing a heatmap. Pair it with session recordings or a click map for evidence of what visitors actually do next.
Typical visual weight allocation across high-converting page types
| Element | Shopify PDP | Landing page | Cart / checkout |
|---|---|---|---|
| Headline / product name | 20% | 35% | 10% |
| Hero image / media | 30% | 15% | 5% |
| Price / value prop | 15% | 10% | 25% |
| Primary CTA | 20% | 25% | 40% |
| Trust signals (reviews, badges) | 10% | 10% | 15% |
| Secondary nav / links | 5% | 5% | 5% |
These weights are rules of thumb, not laws — a beauty SKU sold on aspiration leans heavier on hero media than a replacement electronics part. The point is that primary CTA plus price should command roughly a third of fold attention on a PDP and closer to two-thirds on checkout. If a stock photo is winning, the page is decorative, not conversion-optimized.
Visual hierarchy FAQ
It is the ordering of page elements by visual prominence using size, color, weight, contrast, and position. The goal is to make the most important element — usually the primary CTA — the first thing the eye lands on.
Pages with a clear hierarchy convert higher because visitors find the action faster and waste less working memory on competing elements. A/B tests that simply increase CTA contrast and size routinely lift conversion 5-15% on PDPs.
Size (bigger = more important), contrast (more contrast = more attention), position (top-left and center-fold dominate), color (warm and saturated pull the eye), whitespace (isolation amplifies importance), and repetition (consistency teaches the reader your system).
Visual hierarchy is one lever inside attention optimization. Attention optimization also covers motion, copy, interaction design, and load order. Hierarchy is the static, design-level component — what an unscrolled, unclicked page communicates.
Within UX optimization, hierarchy sits alongside information architecture, microcopy, and form design. It is usually the first thing to audit because it is fast to fix and high-impact — you rarely need engineering, just design changes.
Blur the page to 10% or squint at it from two meters away. If you cannot identify the headline, the price, and the primary CTA in two seconds, the hierarchy is failing. Five-second tests and click maps give you the data version of the same question.
On conversion-focused pages, almost always — but on a PDP it shares the top tier with price and product name. On a checkout, it should clearly dominate. On a content page, hierarchy serves comprehension first and the CTA second.
One primary CTA, optionally one tertiary link (e.g. 'See size guide'). Two equally weighted CTAs split attention and reliably hurt conversion in tests. If you need two paths, make one visibly secondary in weight and color.
Yes — vertical stacking forces a stricter linear order, and thumb reach makes the bottom 25% of the viewport prime real estate for the CTA. Hero media often needs to shrink so that price and CTA stay visible without scrolling.
Oversized hero images that push price and 'Add to bag' below the fold, gray-on-white CTAs that lose to brand-colored navigation, and trust badges in the same weight as the primary action. Default themes tend toward aesthetic over conversion — audit before assuming the theme got it right.
Get an AI expert review of your site
Paste your URL — Metricuno's AI runs the same heuristic checks a senior CRO consultant would, scoring your page and prioritising the fixes that'll move conversion fastest.