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:

  1. Header
    1. H1
      • Supporting text
      • H2
        • supporting text
        • supporting text
      • H2
        • supporting text
        • supporting text
    2. CTA
  2. 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:

  1. Header
  2. H1
    • Supporting text
  3. H2
    • supporting text
    • supporting text
  4. H2
    • supporting text
    • supporting text
  5. CTA
  6. 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?



Written by Christopher Butler on March 24, 2023,   In Log


Next Entry
The Smallest Details In Minimalism in UX: the blessing of no choices, Dimitris Chatzilias covers a short list of common details that are often overlooked in a way that
Previous Entry
My Reverse Time Capsule While rummaging in the WIRED magazine archives, I found this entry from 1995. In it, Douglas Copeland imagines a “reverse time capsule,” sent back
chrbutler.com is the personal website of Christopher Butler.
© Christopher Butler. All rights reserved.
About this Website
Subscribe to the Newsletter
RSS