Features

Progressive disclosure is a method of revealing the details of a feature on an on-demand basis, so that the basic elements of the feature appear by default while the less used or more advanced elements are hidden. These elements are usually just a click or two away, so they remain readily available, but they’re hidden by default to avoid interface clutter for the majority of users who do not need them.

This method is extremely effective for surfacing the right features in an application and hiding the wrong ones. Simply put, progressive disclosure is one of the most effective ways to clean up your application and improve user experiences without sacrificing functionality.

In other words, it’s the solution to one of the software’ industry’s biggest problems. The continuous addition of new features to applications invariably results in a more complicated interface, which in turn makes the user experience less desirable. Progressive disclosure gives us a way to keep building new features without complicating the interface.

In this article, we’ll explore progressive disclosure by looking at long-established conventions from the world of newspaper design, and then look at how to apply the principle to the web.

The Fine Art of Newspaper Design

Newspapers, as you know, have been around for hundreds of years. In this time, newspaper publishers have learned to do quite a few things that seem to make, well, perfect sense. Newspaper designs are obvious, but only because the people who put them together made them obvious.

The actual design of a newspaper varies wildly from one to the next, but newspapers far and wide adhere to a basic conventions.

First, they offer clear, concise headlines that enable readers to quickly scan a page to find whatever is most interesting.

Headlines serve as the first step in accessing more information. Once you choose a headline that looks interesting, you move on to the article itself.

And the article is written using the inverted pyramid method.

The Inverted Pyramid

The inverted pyramid is a style of presentation in which the most important and all-encompassing details are presented first and the rest of the story is told through progressively less significant, but more detailed pieces of the story. Like an inverted pyramid, it starts broad and gets progressively narrower. It’s the way news stories are written.

Journalists everywhere subscribe to this methodology by beginning each story with facts that explain the who, what, when, where, and why of the story. This creates a broad, big picture view of the story so readers can decide whether or not to keep going.

Each subsequent paragraph then offers increasingly specific about the story. Although the additional information helps the reader round out his sense of what happened in the story, each new piece of information decreases in importance.

This is done for a couple of key reasons. First, it enables readers to get the most important information right up front so she can quickly decide whether or not to keep reading. Second, it gives layout designers a way out of sticky design situations. If an article is too long to fit on a single page, but not long enough to warrant a second page, the least important pieces of information - located at the end of the article - can be trimmed to adjust its length. Using the inverted pyramid structure means the article can be made shorter or longer as needed.

This isn’t so much a problem on the web, but take a look at that first reason again. It enables readers to get the most important information up front.

Most newspaper articles start on one page and end on another. Because it’s a printed media, space is limited, so long articles are broken up into multiple parts. The first part can have a “Continued on A14” statement added to the end of it, for example, and the second part can resume with a “Continued from A1”, very much like a “Read more …” link on a web page.

Simple, right? Let’s recap.

First, the opening sentences of a news story are the most important, which is why they’re at the beginning. Second, anything beyond the critical elements can be relegated to another page.

Instead of cramming everything possible into a single space, newspaper designers split things up into logical chunks. And journalists continue the idea by presenting the most important things from each story first.

You can scan a page to find a headline, read the first few paragraphs of an article, and move on without getting bogged down in details you don’t need and that aren’t essential to the story.

This is the essence of progressive disclosure.

Progressive Disclosure on the Web

So how does all this apply to the web?

It applies to the design of individual features, and the architecture of the site or application as a whole. It gives us a way to surface the essential and most-used features and tuck the less-used features away behind a click.

In Google Calendar, for example, you can click an item listed in the calendar view to see the high-level details of an event.

To see more details, you simply click “edit event details”. This takes you to another page that contains all the information available about the event.

Here, you can see the guest list, comments that have been made, and reminder options. You started with just a few details and progressively accessed more information by clicking a link.

On this details page is another progressive disclosure style design. To add guests to an event, you need to click “Add guests”.

Once clicked, a text area is displayed so you can enter the email addresses of people who need to attend the event.

Why wait? Why not show the text area when the page loads instead of waiting for the user to click a link?

This is done so that only the most critical features are shown by default. Not everyone uses the calendar to organize multi-person events, and not every event requires a guest list. Since this feature is used less often than most of the others, it is hidden by default so that the interface can remain clean and simple while still offering a ton of useful functionality.

GrandCentral (a call and messaging management system) also makes use of progressive disclosure, and does so in a very simple way that you’ve probably seen a number of times on the web already. It applies progressive disclosure through a design pattern known as inline expand to reveal more information about a phone message.

By default, messages in the Inbox are shown in a list, and each item contains a small Play button.

When you click the Play button, the area is expanded and a new interface is revealed that enables you to play the message and learn more about the caller.

Functionality is again hidden to keep the interface simple by default. You can quickly glance at the list of messages to see what’s there without the full set of details for each call getting in the way. If you decide to listen to a particular message, you see those details in an on-demand fashion.

Seeing all of the details for all the messages would be overwhelming. Seeing a quick list and expanding select messages to see more is much friendlier.

Thanks - you’ve changed my life

As you can see, applying the concept of progressive disclosure is usually a simple matter of … OK, it’s not that simple.

You have to figure out which screen elements (features or content) are critical and which ones aren’t, and then figure out how to hide the non-critical elements while still providing quick access to them. But once you have that down, you can stop worrying about how to work in all those fancy new features you’ve been wanting to build.

Well, you can worry less anyway.

Kidding aside, don’t view this as an excuse to start cramming everything you can imagine into your application. No matter how well you master progressive disclosure, you still want to show restraint when it comes to adding new features.

More complex software has a funny way of resulting in more complex interfaces. Remember to show some restraint.