Outlines are information architecture.
When you create an outline, you are arranging ideas in relation to one another: a heading is a big idea, a sub-heading is a smaller one related to it, a bulleted list is a group of even smaller ideas, and so on. Every indent suggests a sense of zooming in — of getting more specific and detailed — and every outdent suggests zooming out — a return to a bigger idea.
Using an outline as a step toward writing an essay is like prototyping as a precursor to a high-fidelity design. That’s pretty obvious. But, the text-outline as an information architecture tool is, I think, more useful when evaluating the effectiveness of an existing visual design.
Whenever I look at a page or screen, the first thing I do is scan it to understand what kind of information it contains and how that information is arranged. In my mind, that scan produces something like a text outline. Here’s a very simple example of that:
- Header
- H1
- Supporting text
- H2
- supporting text
- supporting text
- H2
- supporting text
- supporting text
- CTA
- Footer
Typically, though, a design I’m evaluating in this way will end up with a very different text outline. This is because current design trends tend to use a visual language that ignores hierarchy. A common example of this are full-bleed rows of text, images, calls to action, or other media that could be positioned anywhere on the page. When a visitor scans a page with full-bleed elements throughout its layout, they imply an outdent — a return to the global frame of the page or screen’s container.
A resulting text-outline interpretation of this kind of layout might look like this:
- Header
- H1
- Supporting text
- H2
- supporting text
- supporting text
- H2
- supporting text
- supporting text
- CTA
- Footer
A page that arranges its information in this way does not offer the same level of clarity as one that uses visual cues that communicate hierarchy. When a visitor encounters “outdented” elements, they imply a definitive end to the information that preceded them, and a return to a previous level of information. But it’s rarely the case that the inclusion of a full-bleed call to action intends that. Sometimes it’s there as a necessary interruption or pause between elements, but isn’t meant to align with the hierarchical position of things like the header, navigation menu, or footer of the page. A simple adjustment to its width can fix that. Not everything needs to — or should — be “full bleed.”
The next time you produce a layout, reverse-engineer it into a text outline, using both the nature of the information as well as its position — size, width, etc. — to determine where in the structure it belongs. Does your design’s representation as a simple outline align with the hierarchy you intend for the page or screen?
If not, how can you adjust your visual language to more intentionally guide a viewer’s eye toward accurately perceiving the information in front of them?