Hierarchy and Scan Paths

By the end of this lesson, you will be able to...

• Identify the priority, grouping, and reading-order signals in a visual composition.

• Build a plausible scan path from type, spacing, placement, contrast, and repetition without treating it as proof of reader behavior.

• Revise an over-emphasized page so the first action is clear while supporting content remains discoverable.

Idea in one sentence: Visual hierarchy is a set of invitations about what to notice first, what belongs together, and where attention can go next.

Core Insight

Imagine the night-train spread now has a solid grid and the type roles from the first lesson. The columns line up. The image and caption stay together. The body has a comfortable measure.

The editor adds one more request: make the article feel energetic.

The designer responds by making almost everything noticeable:

• the title is large and uppercase
• the introduction is bold and colored
• every section heading uses a different accent
• a pull quote is larger than the body
• the image has a thick frame
• the caption is bold
• the source note is placed in a contrasting box

Nothing is technically misaligned. The reader still does not know where to begin. The page has many signals and no clear invitation.

The first model is:

If every important element stands out, the reader will understand that the whole page is important.

The problem is that attention is limited. When every element asks to be first, the page makes the reader perform the ranking work.

The central trade-off is simple: hierarchy can speed comprehension, but too much contrast creates noise and makes the reader spend attention on the design instead of the content.

Look First: What Is the Page Asking For?

Before changing a font or color, describe the page without naming its style.

Use four questions:

1. What should a reader notice first? Usually this is the entry point: a title, image, or short statement.
2. What should become clear next? This may be the promise, context, or action that makes continuing worthwhile.
3. Which elements belong together? The answer may come from shared edges, proximity, type roles, or a common visual treatment.
4. Where should attention rest? Sustained reading needs a quieter field after the entry signal.

For the night-train article, a reasonable first reading proposal is:

title -> introduction -> opening paragraph -> section heading -> body -> image/caption -> next section

This is a proposal, not a measurement. A real reader may enter through the image or scan the headings first. The design task is to make the intended relationships available and then test whether the page supports the actual communication goal.

The Initial Model: Importance Means Contrast

Contrast is useful. Size, weight, color, spacing, shape, and position can all signal difference. The mistake is treating contrast as the only language of hierarchy.

Suppose the spread has five visual levels:

title       = very large, bold, colored
introduction = large, bold, colored
heading      = medium, bold, colored
caption      = medium, bold, colored
source note  = small, bold, colored

The values change, but the pattern does not. Every role uses the same loud signal. The reader sees a wall of emphasis rather than a sequence.

A better model treats hierarchy as a relationship among several signals:

• Scale tells us how much space a role can claim.
• Weight tells us how strongly it speaks inside that space.
• Proximity tells us which items belong together.
• Alignment connects items across the grid.
• Spacing creates pauses and separates levels.
• Color or texture adds emphasis, but should not carry the whole meaning alone.
• Repetition teaches the reader what a recurring role looks like.

The goal is not maximum contrast. It is enough contrast to make the next useful distinction visible.

The Principle: Build a Priority Ladder

Start with a small ladder rather than a cloud of “important” elements.

Level 1: Entry

The reader should be able to find the subject quickly. For the spread, the title is the main entry. It may be large, but its size should leave room for the content it introduces.

Level 2: Orientation

The introduction explains why the article is worth following. It should be visible after the title without competing with it. A stable type role and a modest change in scale can be enough.

Level 3: Navigation

Section headings and captions help the reader move through the material. They should repeat consistently so the reader learns their job. A heading does not need a new color every time it appears.

Level 4: Sustained reading

The body should become the quiet field where attention can remain. “Quiet” does not mean weak contrast or tiny text. It means that the body is not interrupted by unnecessary signals.

Level 5: Support

Source notes, metadata, and secondary explanations remain available without claiming the entry position. Their lower prominence is a reading-order decision, not a license to make them inaccessible.

The ladder is not a universal ranking of all content. It is a proposal for this page, this audience, and this communication goal.

A Worked Revision: One Page, Two Attention Models

Use the 12-column grid from lesson 002. The content is:

Title: The Last Night Train
Introduction: What disappears when a city loses its final connection after midnight?
Sections: The timetable, The waiting room, The missing connection
Image: Passengers beneath the station clock, 23:47
Caption: The last departure is also a daily deadline.
Source note: Regional archive timetable and passenger counts.

The first composition uses the naive model:

Now revise the system:

Trace the revision:

1. Input: a grid-coherent page contains several elements that all claim attention.
2. Observation: title, introduction, headings, image, caption, and source note use similar emphasis signals.
3. Decision: assign each element a place in the priority ladder and remove redundant contrast.
4. Intermediate state: title becomes the strongest entry; headings repeat; image and caption form a pair; body receives the longest quiet interval.
5. Output: the reader has a plausible route through the page and can still discover alternate entries.
6. Naive failure contrast: adding emphasis to every important item destroys the differences that would have made the priorities visible.

So far, we have seen that hierarchy is not a contest for the loudest element. It is a sequence of relationships that lets one signal lead into another.

Scan Paths Are Hypotheses

A scan path is a proposed route through a visual composition. It can be described with arrows, numbered annotations, or a short sequence of reader questions.

It is useful because it makes assumptions visible:

1. What is this article about?       -> title
2. Why should I continue?            -> introduction
3. Where does the argument begin?   -> opening paragraph
4. What is the next section?         -> heading
5. What evidence supports it?        -> image and caption

It is dangerous when treated as certainty. People scan differently. Familiar readers skip the introduction. Someone looking for the photograph may enter at the image. Someone using a linear or assistive presentation may encounter a different order.

Use the scan path as a design hypothesis:

• state the intended path
• identify alternative valid entries
• test whether the content still makes sense if the reader starts elsewhere
• revise the relationships when the page's purpose changes

This matters for accessibility as well as aesthetics. A visual layout can suggest order, but the content should retain a meaningful sequence when it is presented linearly or through another modality.

Check: If the title is the largest item, must every reader notice it first?

Think first, then reveal.

Answer: No. Size proposes priority; it does not control attention. Placement, contrast, familiarity, image content, and the reader's goal can create other entry points. The design should make the intended entry clear without pretending it is compulsory.

Check: The three section headings use three different accent colors to make the article feel lively. What should you inspect first?

Think first, then reveal.

Answer: Ask whether the colors create a useful distinction or merely make each heading compete. If the headings perform the same role, repetition usually helps readers recognize the pattern. Variation should carry meaning.

Trade-offs and Limits

Speed versus nuance

Stronger hierarchy helps a reader orient quickly. It can also encourage shallow scanning if every signal points toward a summary and the body looks like an obstacle. The signal to watch is whether the entry hierarchy leads into reading or replaces it.

Emphasis versus noise

Contrast can rescue a buried relationship. Too many contrast changes make the page noisy and increase the cost of choosing where to look. Remove one signal at a time and see whether the intended distinction survives.

Repetition versus adaptation

Repeated headings and captions teach a stable vocabulary. A special section may need an exception. Make that exception visible through a reason—such as a change in content role—not through arbitrary decoration.

Visual order versus proof of behavior

A scan-path annotation can explain your intention. It cannot prove that every reader's eyes will follow the arrows. Use observation, feedback, or a comparison of alternatives when the decision has meaningful consequences.

Hierarchy versus accessibility

Do not encode priority only with color, tiny text, or faint contrast. Size, placement, labels, spacing, and semantic structure should support one another. A supporting note can be secondary and still readable. A heading can be visually prominent and still need to remain in a meaningful content sequence.

Hierarchy cannot rescue weak content. If the article has no clear claim or the image does not support the text, contrast will only make the confusion easier to notice.

Common Confusions

Confusion: Hierarchy means ranking content forever

Why it is tempting:

The word “priority” sounds like a fixed list.

Better model:

Hierarchy is conditional. A title leads when the reader enters the article. A caption leads when the reader is studying the image. The same element can change prominence across contexts.

Confusion: A scan path is a measured eye movement

Why it is tempting:

Arrows and numbered annotations look precise.

Better model:

A scan path is a testable design hypothesis about likely attention and reading order. It needs evidence if the decision depends on actual behavior.

Confusion: Contrast means color

Why it is tempting:

Color changes are immediately visible in a mock-up.

Better model:

Contrast also comes from scale, weight, spacing, position, texture, and grouping. Color should not be the only carrier of meaning.

Confusion: Grouping means adding a border

Why it is tempting:

A border makes a group easy to draw.

Better model:

Proximity, shared alignment, type role, whitespace, and repetition can group elements without enclosing them in a box.

Practice: Draw Two Scan Paths

Use the library announcement from lesson 002:

Title: Who Owns the Night Sky?
Introduction: A public lecture about satellites, observation, and shared darkness.
Body: 500-word event essay in three sections
Image: Long-exposure photograph showing satellite trails
Caption: The same sky can look empty until movement is recorded over time.
Access note: Free entry; step-free access; doors open at 18:30.

Create two versions of the page on the same grid:

1. A version for a reader deciding whether to attend. The title, date or access information, and introduction may need a fast entry path.
2. A version for a reader studying the essay. The body and section headings may need a calmer path with fewer interruptions.

For each version, annotate:

• the intended first entry
• the next two likely steps
• the grouping signals that connect image and caption
• the element that must remain discoverable but secondary
• one alternative entry that should still make sense

Then remove one contrast signal from each version. If the hierarchy collapses, explain why that signal was carrying too much work.

A good answer should:

• use the grid relationships from lesson 002 instead of treating hierarchy as decoration
• assign a clear but conditional priority ladder
• use at least two different hierarchy signals, not color alone
• keep the access note readable and discoverable
• distinguish an intended scan path from proof of reader behavior
• explain one trade-off between fast orientation and sustained reading

Connections

Lesson 001 gave each content role a typographic job. Lesson 002 gave those roles a shared spatial field. This lesson proposes how attention moves through that field. Lesson 004 adds time: it asks how hierarchy and spacing behave when the reader stays for a long article rather than making a first scan.

Resources

• [BOOK/TUTORIAL] The Elements of Typographic Style Applied to the Web — Focus: Scale, proportion, spacing, and how typographic differences create rhythm without noise.
• [ARTICLE] WCAG 2.2: Understanding Meaningful Sequence — Focus: Keep visual layout and meaningful content order from contradicting each other.

Key Takeaways

• Hierarchy proposes what to notice first, what belongs together, and where attention can go next.
• Priority needs contrast, but repeated loud signals erase the differences that make priority visible.
• A scan path is a design hypothesis, not a guarantee about every reader's eyes.
• Grouping can come from proximity, alignment, type roles, spacing, and repetition—not only borders or color.
• A good hierarchy guides readers into the content while preserving alternate entries, readable support information, and meaningful sequence.