This clip examines two principles that work hand in hand to make web content readable: the inverted pyramid approach to information order and the use of visual structure to help users scan efficiently. William Hudson, UX Strategist and Founder of Syntagm Ltd, describes the theoretical basis and practical examples of both.
Starting with the Most Important Information
The inverted pyramid is a well-established approach in journalism that translates naturally to web content. Instead of building to a conclusion, you open with a broad summary of what the content covers and add detail as the page progresses. A reader who stops at any point should have the essential message.
The principle is simple in theory but often ignored in practice. Many pages start with background, context, or preamble, burying the actual point several paragraphs down. Online users are unlikely to read that far, especially when they are looking for something specific.
The approach is attributed to Edwin Stanton, Abraham Lincoln's Secretary of War, who is credited with organizing the telegram reporting Lincoln's assassination in 1865. That telegram was reprinted on the front pages of newspapers, including the New York Times, and remains a textbook example of the approach: the reader understands the entire event from the first sentence, with supporting detail following in decreasing order of importance.
Practical Guidelines for Inverted Pyramid Writing
Applying the inverted pyramid to web content means following a few consistent practices:
Use clear, meaningful headings or lists at the start of each topic.
Create separate paragraphs for distinct points so each one can stand alone.
Lead every paragraph with its main idea. Don't save the conclusion for the end of a paragraph.
Aim for one key idea per paragraph. Multi-point paragraphs are harder to scan and easier to misread.
That last point (one idea per paragraph) comes from the technical writing community and applies equally well to product documentation, help content, and marketing copy. It keeps pages scannable and reduces the cognitive effort required to find information.
AI drafts are worth checking for their inverted pyramid structure. Left to themselves, AIs often build toward a conclusion, burying the main message several paragraphs down, which is the opposite of the inverted pyramid. The flip side is that AI is good at restructuring on request: ask it to put the key message first and lead each paragraph with its main idea, then check that the result still says what you mean.
Visual Structure: Making Pages Scannable
Structuring the order of information is only part of the solution. Visual structure supports scanning by providing clear entry points and navigation cues. The guidelines here overlap with good information hierarchy:
Use headings to signal topic changes. Readers use headings to decide whether to read a section at all.
Keep paragraphs short. Long unbroken text blocks suppress scanning and signal effort.
Use bulleted or numbered lists where items are genuinely parallel. Lists are faster to scan than prose.
Use bold or italic sparingly to highlight key terms or phrases. Highlighting too much defeats the purpose.
A note on italic text: italics can be useful for emphasis or technical terms, but extended italic passages are harder to read than upright text. Use italics for short runs rather than whole sentences.
A useful test is to look at a page and ask what a visitor could learn in five seconds of scanning, without reading a word of the body text. If the answer is "nothing useful," the visual structure needs work.
What Poor Visual Structure Looks Like
The contrast between a structured and unstructured page is immediately obvious, even without reading the content. A page with three large paragraphs and a generic heading like "Program Overview" gives the reader no entry points. To extract any information, they have to read line by line, which most users are unwilling to do for content they haven't committed to.
The same content, reorganized with descriptive subheadings, shorter paragraphs, and bullet points, becomes scannable in seconds. A visitor can identify the relevant section and decide whether to read further. The information hasn't changed, but the experience of finding it has changed dramatically.
See a worked example in this PDF.
The Take Away
The inverted pyramid puts the most important information first. Readers who stop early still get the key message.
Start paragraphs with their main idea, not background or context.
Aim for one idea per paragraph to support scanning and comprehension.
Headings, short paragraphs, and lists give pages visual structure that aids scanning.
Use bold or italic only for short emphasis. Extensive italic text is harder to read.
Test your page by asking what a five-second scan would reveal. If the answer is nothing, restructure.
Hero image: © Interaction Design Foundation, CC BY-SA 4.0
