Skip to main content

Visual Hierarchy Principles

Version 2.0 Standard: Premium

Visual hierarchy is the arrangement of elements to imply importance. In SEO writing, it is the difference between a "Wall of Text" (which causes users to bounce) and a "Layered Narrative" (which keeps users scrolling).

This guide covers the physics of eye movement and how to format your content to match it.

Part 1 — The Physics of Scanning​

Readers do not read. They scan. If you write for a "reader," you will lose 80% of your audience. If you write for a "scanner," the reader will eventually settle in and read.

The Two Dominant Patterns​

Used for: Informational articles, guides, and long-form content. Behavior: The eye scans the headline (horizontal), then scans the first few words of the next few lines (vertical), then scans across a subhead (horizontal). Implication: The first 2 words of every H2, H3, and paragraph are the most valuable real estate on the page.

  • Bad: "In this section, we are going to discuss the importance of..."
  • Good: "Site Speed is the single most important factor..."
graph TD
    A["User Lands on Page"] --> B{"Is there a clear focal point?"}
    B -- Yes --> C["Eye Anchors to H1/Image"]
    B -- No --> D["Eye Floats (Cognitive Load increases)"]
    D --> E["Back Button Clicked"]
    C --> F["Scan H2s"]
    F --> G["Commit to Read"]

Part 2 — The 4-Layer Formatting System​

To survive the scan, you must structure your content in four distinct layers. A user should be able to get value from any layer without reading the others.

Layer 1: The Skim Layer (Headings)​

Goal: Tell the entire story using only H1, H2, and H3s.

  • Test: If you delete all body paragraphs, does the outline still make sense?
  • Rule: Never use "clever" headings. Be descriptive.

Layer 2: The Anchor Layer (Bolding + Lists)​

Goal: Catch the eye as it drifts down the F-pattern.

  • Rule: Bold the result, not the process.
  • Limit: No more than 10% of the text should be bolded.

Layer 3: The Visual Layer (Images/Tables/Callouts)​

Goal: Break the rhythm and reset the user's attention span.

  • Rule: An "island" (visual element) every 300 pixels (approx. every scroll depth).

Layer 4: The Meat Layer (Body Text)​

Goal: Provide the nuance, data, and emotional connection for the 20% of deep readers.

Part 3 — Formatting Workflow​

Follow this process for every article you edit.

The "Wall of Text" Destroyer

Do not format as you write. Write the draft first, then run this pass as a separate "Formatting Edit."

flowchart LR
    A[Draft Complete] --> B[Audit Headings]
    B --> C[Break Paragraphs]
    C --> D[Inject Lists]
    D --> E[Add Bold Anchors]
    E --> F[Check Mobile View]

Step 1: Audit Headings (The "Table of Contents" Test)​

Read only your headers. If you see "Introduction," "Body," or "Conclusion," rewrite them to be descriptive.

  • Change "Tips" → "5 Tips for Faster Indexing"
  • Change "Conclusion" → "Next Steps for Your SEO Strategy"

Step 2: Break Paragraphs (The "Return Key" Rule)​

Find any paragraph with more than 4 lines on desktop. Split it.

  • Key Concept: One idea = One paragraph. If you use "and also," that's usually a new paragraph.

Step 3: Inject Lists (The "Comma" Destroyer)​

Find any sentence with more than 2 commas listing items. Turn it into a bulleted list.

  • Before: We cover technical SEO, content strategy, link building, and analytics.
  • After: We cover:
    • Technical SEO
    • Content Strategy
    • Link Building
    • Analytics

Step 4: Add Bold Anchors​

Scan the left margin. Bold key phrases that sit near the start of lines. This helps the F-Pattern scanner hook onto value.

Part 4 — Bad vs. Good Examples​

Why SEO Matters

SEO is crucial for businesses because it helps you rank higher in search engines which leads to more traffic. Without SEO, your competitors will likely outrank you and take your customers. There are many factors involved in SEO including keywords, backlinks, and technical performance. It can be difficult to manage all of these at once so you need a strategy.

(Why it fails: No anchors, no lists, monotonous rhythm.)

Part 5 — AI Collaboration Guidelines​

AI (especially GPT-4) loves to write Walls of Text. It is terrible at visual hierarchy by default. You must force it to format content.

The "Skimmability" Prompt​

Use this prompt to grading and fixing your drafts.

Role: Senior UX Editor Task: Audit the following text for visual hierarchy and skimmability. Rules:

  1. Identify any paragraph longer than 3 sentences and split it.
  2. Convert any list of 3+ items within a sentence into a bulleted list.
  3. Bold the most important "takeaway phrase" in every section (max 1 per section).
  4. Ensure no two paragraphs start with the same word. Input: [Paste Draft]

Common AI Failure Patterns to Watch​

  • The "Intro Wall": AI often writes a 6-sentence intro paragraph. Fix: Split it into 2 paragraphs + a hook sentence.
  • The "Colon Addiction": AI loves "Label: Description" lists. Fix: Ensure the label is bolded.
  • The "Conclusion Drag": AI conclusions are often dense summaries. Fix: Turn the summary into a checklist.

Part 6 — Output Checklist​

Quick Check

Before publishing, scroll through your article on your phone. If you see a screen full of text with no breaks, you have failed.

  • H1-H3 Logic: Do headers tell the full story?
  • Paragraph Max: No paragraph exceeds 4 lines (desktop).
  • List Density: At least one list every 300-400 words.
  • Bold Anchors: Key terms are bolded (but <10% of total text).
  • Visual Islands: An image, quote, or callout appears every scroll depth.
  • Mobile Check: No "walls of text" on a mobile screen width.