Bluff
Vista
LLC
TECHNOLOGY
Directory/The readerR/03

Make the reading order visible.

A page can contain all the right words and still make them difficult to use. Hierarchy is the relationship between the material, its visual emphasis, and the order in which it can be encountered.

03.1

Decide what the page is for

A reading page, a result list, and a contents page support different activities. Before emphasizing an element, identify the activity that should be easiest to begin.

A long article may need a clear title, an introduction, and a stable reading column. A catalog may need distinct entries and useful comparison points. Repeating the same visual arrangement across both can flatten those differences.

03.2

Let headings describe the structure

Headings should communicate the topic and organization of the content. Their meaning is not limited to how large or bold they appear, because people may navigate a document through its structure rather than scan the whole visual page.

Use headings to establish relationships between sections. A short descriptive heading is more useful than a decorative phrase that conceals the subject. The visual treatment should reinforce that structure rather than contradict it.

03.3

Use contrast with a purpose

Emphasis works through relationships. If every item is large, brightly colored, or heavily framed, the page gives little help in deciding what matters first.

Reserve strong visual differences for meaningful distinctions. Supporting information can be quieter without becoming difficult to read. Labels, captions, and notes still need adequate contrast and a usable size in the context where they appear.

03.4

Treat a narrow screen as a reading arrangement

A responsive layout is more than a smaller version of a wide page. Columns change order, notes move, and controls may need a different grouping. Those changes should preserve the meaning of the material.

Check that a caption still belongs to the right figure and that a note does not interrupt an unrelated sentence. When the page is enlarged or rearranged, the route through the content should remain understandable.

03.5

Remove motion without removing meaning

A visitor may prefer reduced motion, or an effect may be unavailable. Essential instructions, content, and state changes should remain understandable under those conditions.

Decorative transitions can be omitted. An interface should not require a person to watch an animation to learn where a control went or which section is selected. A review with motion reduced is one useful way to examine that dependency.

Further reading

W3C WAI — Headings ↗MDN — Reduced-motion media preference ↗

This guide is a general design resource. Any assessment of a real interface needs its own defined scope and review.