Visual hierarchy
Visual hierarchy is the principle of arranging elements on a page so they naturally guide the user's eye and communicate the relative importance of content. It works with size, color, contrast, spacing, and position. A well-designed visual hierarchy lets visitors grasp the structure of a page instantly and find what they're looking for.
Visual hierarchy directly affects how users read a page, how long they stay, and whether they take the desired action. Its impact is backed by extensive research:
- Users don't read pages—they scan them. A Nielsen Norman Group eye-tracking study of 232 users across thousands of web pages identified the F-pattern: the eye first moves horizontally across the top of the content, then makes a shorter horizontal movement a bit further down, and finally scans the left side vertically. Elements outside this path get no attention (NNGroup – F-Shaped Pattern, 2006)
- Content at the top gets most of the attention. A more recent NNGroup eye-tracking study analyzing 130,000+ fixations from 120 participants on thousands of websites found that users spend 57% of their time looking at content above the fold and 74% of their time on the first two screenfuls (NNGroup – Scrolling and Attention, 2018)
- An unattractive layout drives people away. An Adobe survey found that 38% of users will stop engaging with a page if the content or layout is unattractive. Conversely, 66% of people prefer beautifully designed content to something plain and simple (Adobe – The State of Content, 2015)
- Contrast and space increase conversions. A CXL case study documents how Open Mile increased conversions by 232% simply by removing distracting elements and adding white space around the CTA button. SmartWool saw a 17% increase in revenue per visitor after standardizing image sizes and simplifying the page's visual hierarchy (CXL – Visual Hierarchy & Conversions)
FAQ
How does visual hierarchy relate to Gestalt principles?
Gestalt principles (proximity, similarity, continuity, closure) form the psychological foundation of visual hierarchy. Baymard Institute research (eye-tracking tests with 236 participants on the product pages of 60 e-commerce sites) confirms that 82% of e-commerce sites have serious issues with how elements are arranged on product pages, which directly lowers conversions (Baymard Institute – Product Page UX).
Is making headings and CTA buttons bigger enough for good visual hierarchy?
Size is just one tool. In its study of eye-tracking patterns (232 participants), NNGroup showed that users respond to a combination of size, contrast, color, and position. For example, horizontal attention leans strongly to the left—80% of fixations fall on the left half of the page and only 20% on the right (NNGroup – Horizontal Attention Leans Left).
How can you test visual hierarchy without eye-tracking?
The quickest method is the squint test: squint at the page and see which elements remain visible—those make up your actual visual hierarchy. If the most important information (your value proposition, the CTA) doesn't stand out, the hierarchy needs work. Another approach is A/B testing different layout variants—CXL documents cases where simply changing the visual arrangement led to double-digit conversion gains without touching the copy.
Sources:
- NNGroup – F-Shaped Pattern For Reading Web Content (2006) – eye-tracking study of 232 users across thousands of web pages
- NNGroup – Scrolling and Attention (2018) – analysis of 130,000+ fixations from 120 participants
- NNGroup – Horizontal Attention Leans Left – eye-tracking study of how horizontal attention is distributed
- Adobe – The State of Content (2015) – survey of user preferences
- CXL – Visual Hierarchy & Conversions – case studies on how visual hierarchy affects conversions
- Baymard Institute – Product Page UX – eye-tracking tests with 236 participants on 60 e-commerce sites
%201.webp)