The Inverted Pyramid Of Visual Design

In one second the user should understand generally where they are
—largely driven by visuals and functionality.
If we can keep people for 10 seconds, they should understand our primary message.
If they stay for two minutes, some secondary messages should be getting through.
All this feeds into a call to action.
—Kristina Halvorson

Journalists use the inverted pyramid style of writing to quickly convey the most important information of a story to readers. It works because no matter how far into an article someone reads the most important information gets through.

The more you read the more detailed information you get, but no matter where you stop reading the main message has been conveyed. Can web designers do something similar visually?

What is the Inverted Pyramid Style of Writing?

The inverted pyramid is a method for presenting information in descending order of importance. Your most important information is written first, followed by the next most important information and so on until you’ve reached the least important information at the end.

The idea is that the critical information is presented immediately and then additional information is presented that expands on, explains, and reinforces the main idea.

At any point someone should be able to stop reading without missing the main message. Those who read more get more, but everyone gets the main idea you’re trying to communicate.

The main benefits of the inverted pyramid are:

• It quickly conveys key information
• It establishes a context in which to interpret subsequent information
• Its initial chunks of information are more likely to be remembered later
• It allows for efficient scanning and searching
• It can be easily edited since least important information is presented last

The above could equally be goals of a good design. We want our designs to quickly communicate important information, be remembered, and establish context, don’t we?

The cons of the inverted pyramid are:

• Doesn’t allow flexibility of building suspense or creating surprise ending
• Can lead to perception of being uninteresting

Whenever it’s important to present information efficiently and quickly, the inverted pyramid is an excellent style to follow. Your lead (opening paragraph) becomes a concise overview of whatever it is you’re writing and you can follow the lead with more detailed chunks of information for those that want to know more.

The Inverted Pyramid of Visual Design

How do we translate a style of writing to one of visual design. With less difficulty than you might think. In fact through a few solid principles of design we can easily do exactly what the inverted pyramid is meant to do.

There’s an assumption with using the inverted pyramid when writing that most people aren’t going to read all the way through to the end. Sounds similar to the common wisdom that people online don’t read, but rather scan web pages.

However that common wisdom is flawed. People do read online, the same way some people will read all the way to the article’s end. People do read online, but they scan the page first to see if they want to read further, the same way people read the headline and lead of an article before deciding if they want to read the rest.

The inverted pyramid stills conveys information to those who decide not to read past the lead paragraph and that’s what we want to do with our visual design.

I mentioned you could this with a few design principles.

• Dominance and focal points
• Visual hierarchy
• Progressive disclosure

In fact hierarchy alone is all we really need. We’ll use focal points to help create the hierarchy and progressive disclosure will help us decide which information is most important and which we could hide until later.

Think in Terms of Visual Layers of Importance

Think of the information you’re trying to convey as different layers of information each of different importance. One layer of your design to communicate the most important message, another layer to communicate secondary messages, and so on.

For example someone visiting a page on your site for the first time might see things in the following layers.

• overall aesthetic to visually grab attention to the page
• logo/tagline and main page heading as primary elements
• lesser page headings and images
• bolded text, lists, inks and other easily scannable elements
• detailed page copy
• mechanism (links, buttons) to more information
• boilerplate elements like navigation and sidebar content
• supporting details that may not get noticed until after many visits

Certainly not the only path through a web page, but probably a fairly common path as far as what we’d consider most important for our visitors to see.

You might recognize the image above from my series on design basics. I’ve modified it a bit to illustrate the points in this post as you’ll see in the images below. As I mentioned the first time around with the design above, it’s by no means a wonderful design, but hopefully it helps make some things clearer.

Group Information by Relative Importance

Before designing think about all the information that’s going to be on the page and create some kind of hierarchy for their importance. If you could only communicate one thing what would it be? What would be the 2nd thing you’d like to communicate? The last? Try organizing the information into 3 or 4 distinct groups.

In the image above the dominant elements on the page are shown as one layer. These are the items you want people to notice right away and they should ideally be communicating a singular message. Depending on what your call to action is you might not have it in this dominant layer.

Use Visual Weights to Separate Layers

Make your most important group of information the dominant visual element(s) on the page by giving it the most visual weight. Take the next most important group of messages and create focal points by giving them a greater visual weight than most other elements, though less than your dominant element.

Continue on until you’ve come to the least important information on the page.

On each layer your design elements will have a similar visual weight. They might vary, but they’ll be closer in weight to the other elements on that layer than they will to the elements on any other layer.

Above we see a layer of elements that are of the next most importance on the page. Imagine the content to be a blog post. Could someone understand the main ideas behind the post having read the headline and then noticing the lesser headings and bolded elements?

The Greatest Visual Weight is Your Lead

While designing the page ask yourself

• if a person was only exposed to your design for a second or two what message might they receive?
• is this the most important information you want to convey?
• if a person scanned your page quickly how much of the content would they understand?
• Could they understand your article just by reading the article’s headings?
• if a person spent a minute or two on the page how much information could they get?
• 5 minutes? 10 minutes?

What we’re doing is taking the inverted pyramid and looking at it sideways. Instead of your lead being the opening paragraph, your lead is the page headings, any bolded or italicized text, images and captions embedded in your content.

Your opening paragraph might still be written as a lead paragraph, of course, but think of what people will see and the order they might see your elements, and realize through focal points and hierarchy you have great control over the order people see your design.

Above we see a lesser layer in regards to it’s immediate importance. Perhaps having read your page headings and emphasized text your visitor notices boilerplate elements like the menu seen here.

Summary

The main problem designers attempt to solve visually is how to communicate one or more messages. How do you convey information of varying importance?

Journalists use the inverted pyramid style of writing to deliver the most important information first, followed by additional information in decreasing order of importance.

Web designers can do the same thing by creating a visual hierarchy of information (PDF). We can use the principle of dominance to call attention to the most important message on the page. From there we can create a hierarchy of information and call attention to different messages in decreasing order of importance.

To design with an inverted pyramid you first need to identify what each page is trying to communicate and organize the information into several layers of importance. Then give each layer it’s appropriate visual weight in relation to the other layers.

If you do it well then visitors to your site should receive your main message no matter how long or little time they spend. You also ensure that regardless of time spent everyone receives the most valuable information they could in the given time frame.

Having seen enough to want to read your content your visitor can now focus on the content layer of elements, namely your copy itself. While you’d like everyone to stay long enough to read your copy, presenting information in layers would ensure those who do stay long enough are also most likely to respond to a call to action, which you might place on this layer.

« Prev PostNext Post »

Download a free sample from my book, Design Fundamentals.