Progressive Disclosure: Presenting Information On A Need To Know Basis

Every journey begins with a small step on a road mostly unseen

Do you sometimes struggle with how many links to include in the main navigation of a fairly large site? Maybe the issue is where the secondary navigation will be located in your design. How about sidebars? Are you able to find the balance between all the things you want to include without overwhelming the space and your visitors?

Most people use at most 20% of any given complex system. The problem is everyone uses a different 20%. What’s a designer to do? How do you include all the different features that your audience in total wants, while holding back on the 80% of features no individual will use or wants to see?

The answer lies in progressive disclosure.

What is Progressive Disclosure?

Progressive disclosure is the concept of managing information by displaying only what’s necessary or requested at any given time. The idea is to help prevent information overload and keep designs cleaner by reducing clutter and noise. The goal is to keep your audience from becoming frustrated or disoriented by giving them what they need and want and nothing more.

From his 2006 Alertbox article on progressive disclosure Jacob Nielson points out the dilemma faced by designers.

1. Users want power, features, and enough options to handle all of their special needs.
2. Users want simplicity; they don’t have time learn a profusion of features in enough depth to select the few that are optimal for their needs.

How does one provide all the features users want while still keeping interfaces clean and simple? In the same post Jacob also offers the solution.

1. Initially, show users only a few of the most important options.
2. Offer a larger set of specialized options upon request. Disclose these secondary features only if a user asks for them, meaning that most users can proceed with their tasks without worrying about this added complexity.

This is progressive disclosure. You want to separate information into multiple layers and by default only present those layers that are necessary or relevant to the task at hand. Along with those necessary layers of information you want to provide simple mechanisms to let people have more information on request.

There are two related ideas in the previous paragraph. One is to provide necessary and relevant default information and the other is to provide more on request.

The first idea tells us it’s ok to present different information on different pages of a web site and the second tells us we should provide a way for our visitors to get more information if they want. This extra information might also change from page to page, though all the extra information should be readily available at any and all times.

Drop down menus, while sometimes suffering from other usability issues, make for a good and simple example of progressive disclosure. Your main navigation presents an overview of the general topics that can be found on your site, while secondary links are not displayed until a user mouses over one of the main links.

Imagine if every page on your site had an always visible link in your main navigation. Not a pretty picture once your site has grown past a dozen or so pages, is it?

If someone clicks into a specific section of your site you might present a secondary menu for those pages available within the section, but not the secondary pages available in another section since they aren’t relevant at that moment. Once someone clicks into a different section the links in your secondary menu will also change since it is now a new set of links that are relevant.

Progressive disclosure enables you to hide advanced information from new users while still making that information available to the more advanced users who want it. Information that isn’t currently wanted is essentially noise. Reducing noise and increasing signal is something we should strive for in design and progressive disclosure gives us a mechanism for doing so.

Presenting limited sets of information increases learning efficiency. When information is gradually presented as needed or requested it’s processed better and is perceived as more relevant. Errors and the time and frustration of recovering from those errors is consequently reduced. Less frustration means a better user experience.

How to Design Progressive Disclosure in Your Website

We’ve already looked at one way to include progressive disclosure in a website, that being drop down menus. Drop downs do have other usability issues, many of which are solved by mega drop down menus. Still it’s easy to see how they present only needed information with more being available on request.

A few other techniques I’m sure you’ve encountered:

• Read more links
• Advanced search options
• Modal popup windows
• Related posts
• Tool tips
• +/- icons to open and close a hierarchy
• Context menus on right click
• Links in general
• Product summaries that link to detailed product pages
• Dynamic forms (PDF) that reveal questions based on the answers to previous questions
• Tabbed info boxes in sidebars

Each of the above hides some information until that information is requested. You do need to be careful offering too many mechanisms for additional information. Take the related posts idea. Too many links can overwhelm quickly. If you try to present mechanisms to more infomation everywhere you still end up with a lot of noise

Joel Reyes recently wrote an article for Spyre Studios combining a variety of techniques under the umbrella term inline expansion. Many fall under the single accordion technique, but there are also mega drop downs and sliders and drawers and other similar techniques for hiding information until requested.

You may want to click through to Joel’s article as he provides links to some jQuery resources as well as providing examples of sites using some of these techniques.

We can also look at some higher level design principles. Developing an information or visual hierarchy on your page helps with progressive disclosure. Hierarchies allow people to scan one level of information on a page while ignoring the rest. Assuming they want the rest of that information it’s easily there for their consumption.

Through contrast, repetition, alignment, and proximity you can create multiple layers of information within a single page. These layers while technically all visible at once still make it easy for the eye to ignore what’s not relevant until such a time when it becomes relevant. We make the most important elements highly visible and minimize the visual impact of the full text so it can be safely ignored on first glance.

Think of your page as an onion with different layers that are revealed little by little as one absorbs one level and then moves on to the next.

Ideally someone should be able to visit your page and scan the headings to gain one level of information. They should then be able to scan a little more deeply perhaps taking in images and lists to gain another level of information. On each successive scan or deeper look at your content new layers of information are revealed.

The above idea is a visual representation of the inverted pyramid journalists use when writing an article. The most substantial, interesting, and important information is presented as close to the top (usually in the first paragraph alone) of the article. As you read further down more details, more information is disclosed. Readers can leave the story at any point with a clear understanding of what’s going on. Those who read more will get more out of the article, but even those leaving after a paragraph or two get the main points.

Chunking

Chunking is a technique of combining many units of information into a limited number of units or chunks, so that the information is easier to process and remember. The design principle of proximity is a visual way to chunk information on your page.

As long as each chunk is clearly and meaningfully identified your visitors can scan different sections of your design easily and based on their needs ignore that section or dig deeper into it.

How to Effectively Disclose Information

The concept is easy to understand, but there are some considerations in regards to effectively disclosing information. Think of our single article.

There’s the visual hierarchy we need to create to make headings and important text stand out. There are the words we use in those headings and selective text that captures the main points of what we want to communicate. There’s the way we organize the information to determine what should and shouldn’t be at each level of the hierarchy. There’s writing the article in an inverted pyramid style.

The less of these things we get right the less effective our progressive disclosure becomes. I’ll refer back to Jacob Nielsen for some things we need to consider.

1. You must get the right split between initial and secondary features. This will be easier after your site is live and you’ve collected some data about what actually gets clicked and used. During design you can do task analysis to better understand the steps someone needs to take in order to complete different tasks
2. It must be obvious how users progress from the primary to the secondary disclosure levels. You want to make the mechanics of finding more information as simple and obvious as possible and you also want to label buttons and links in a way that sets clear expectations for what will be found in the next level of information. Ideally you’ll create a strong information scent creating a desire for the additional levels of information

Nielsen also mentions a related concept, staged disclosure, and suggests using it where appropriate. A common example of staged disclosure are the wizards used to lead you through a task. Since each step in the task depends on the one before it you lead people through the wizard presenting only the step required to complete the current task.

Staged disclosure works best when the information is naturally accessed in a linear sequence. Paginating an article or presenting a long article as a series of shorter articles is another example.

You can mix in progressive disclosure to staged disclosure as well. Take the wizard example. While each step follows in sequence, there may be some advanced options you can set in each step. These advanced steps can be presented with a button labeled advanced or similar. As long as it’s clear that these advanced steps aren’t required and can be set later you provide an easy sequence of steps for novice users while also allowing more advanced users to find additional information they may want.

Summary

Progressive disclosure is a pretty easy concept to wrap your mind around. You may not have known the term, but I’m sure you were familiar with the concept prior to reading here. I’m also sure you didn’t hesitate to accept the concept as something desirable for your designs.

The number of ways to selectively hide and display information may not have been so obvious and how to effectively disclose information may not be as easy as it first seems. There are a lot of considerations that go into deciding what you should display where and it will likely take some iteration to truly get right for the majority of your audience.

Pay attention to what happens on your site to get a better feel for what your visitors click on, where they spend the most time, what sequence of pages or actions do they take on your site?

Remember the goal is to reduce information overload for new and novice users. Selectively display only what’s necessary or relevant at a given time, while providing simple mechanisms for those visitors who want more.

« Prev PostNext Post »

Download a free sample from my book, Design Fundamentals.