Progressive disclosure

Progressive disclosure is an interaction design technique often used in human computer interaction to help maintain the focus of a user's attention by reducing clutter, confusion, and cognitive workload. This improves usability by presenting only the minimum data required for the task at hand. The principle is used in journalism's inverted pyramid style, learning's spiral approach, and the game twenty questions.

Definition and term use

Progressive disclosure is an interaction design technique that sequences information and actions across several screens in order to reduce feelings of overwhelm for the user. By disclosing information progressively, you reveal only the essentials and help the user manage the complexity of feature-rich sites or applications. Progressive disclosure follows the typical notion of moving from "abstract to specific"; only it may mean sequencing interactions and not necessarily level of detail (information). In other words, progressive disclosure is not just about displaying abstract then specific information, but rather about 'ramping up' the user from simple to more complex actions.

In its most formal definition, progressive disclosure means "to move complex and less frequently used options out of the main user interface and into secondary screens".

Examples of progressive disclosure

An example of progressive disclosure is the print dialog where you can initially choose how many copies to print, the printer to use and whether you want to print the full document or only certain pages. On the secondary (advanced options) screen one can then modify the full set of options.

In its purest format, progressive disclosure is about offering a good teaser. A good teaser can include the following:

* A sample of what is next
* An introductory task that is most common
* A high level view of what is expected
* A wizard that walks the user through the task
* A button that leads to more advanced functions (such as editing)

Progressive disclosure says: "Make more information available within reach, but don't overwhelm the user with all the features and possibilities".

Related examples of progressive disclosure

An example for Staged Disclosure is an online news article that is spread across four screens (with a Next Page link at the bottom). This use of progressive disclosure serves advertising objectives (showing banners on each page) and not the user's task.

Another example would be a site that explains a product by making the user click through 4-5 pages of overview/benefits information before revealing the price of the product. The idea here is that if the user reads the product information, they will accept the price more easily. The problem with that approach is that it does not accommodate free-form exploration, a typical behavior on the web.

History of progressive disclosure

Progressive disclosure is a concept that has been around since at least the early 1980s. The technique caught the attention of user interface specialists with Jack Carroll's lab work at IBM (1983), where he found that hiding advanced functionality early on led to an increased success of its use later on. The approach dubbed "training wheels" is one of the few references validating the technique. Carroll and Rosson (1997) pointed out that no empirical evidence exists regarding the effectiveness of progressive disclosure and that the training wheels approach only studied a "single computer application (word processor) and a single interface style (menu based control)". While independent usability studies and consultancy research (including our own) has shown that appropriate usage of the technique is valuable, more empirical research is clearly required.

The software vs. web design environment

Historically, progressive disclosure is a concept that came from the software usability experience. It is clearly easier to apply to software than it is on the web, which is probably why you don't hear all that much about how to do it effectively on the web. In software, the interaction is between dialogues and 'fixed state' interactions. On the web, interactions are chaotic, randomized and dynamic due to the fact that hypertext is a non-linear media.

In the software world the audience is predictable and targeted, making learning styles more predictable. On the web, it's anybody's guess who might be using the site. The website visitor might be a particle physicist, a teen or a grandma. Learning styles, comfort levels and expectations differ greatly. This is perhaps why you hear a lot of references to progressive disclosure in conversations and interviews, but rarely any ideas about how to apply it effectively.

Usability guru Jakob Nielsen mentions progressive disclosure regularly. Nielsen has stated:

"Good usability includes ideas like progressive disclosure where you show a small number of features to the less experienced user to lower the hurdle of getting started and yet have a larger number of features available for the expert to call up".cite web
last = Nielsen
first = Jakob
authorlink = Jakob Nielsen (usability consultant)|Jakob Nielsen
title = Interview – Jakob Nielsen, Ph.D.
publisher = Sitepoint
date = 2002-11-06
url = http://www.sitepoint.com/article/interview-jakob-nielsen-ph-d/4
accessdate = 2006-11-24]

"Progressive disclosure is the best tool so far: show people the basics first, and once they understand that, allow them to get to the expert features. But don't show everything all at once or you will only confuse people and they will waste endless time messing with features that they don't need yet".cite web
last = Nielsen
first = Jakob
authorlink = Jakob Nielsen (usability consultant)|Jakob Nielsen
title = Jakob Nielsen Answers Usability Questions
publisher = Slashdot
date = 2003-03-03
url = http://slashdot.org/developers/00/03/03/096223.shtmls
accessdate = 2006-11-24]

Using progressive disclosure effectively on the web

The marketing approach to progressive disclosure is to get excited about the features and force users to partake of the excitement by making them wade through them all. There's only one problem with that: if you want to get someone excited, creating a feeling of overwhelm does not strike me as a good way to get someone excited. Instead you want to roll a small snowball down a hill and hope it gets bigger and bigger leading to an avalanche! This is the goal of progressive disclosure from a marketing standpoint.

The best way to think about progressive disclosure on the web is: "Only show information that is relevant to the task the user wants to focus on, on any given page". Context sensitive advertising has finally figured this one out with regard to the text ads that Google pioneered.

Progressive disclosure is an interaction design technique that emerges out of the insights gained during Task Analysis (user observation of tasks). Observing users in the field, allows you to understand their workflow outside of your technology. This insight gives you the data you need to prioritize and sequence content functionality.

The main thing to remember about progressive disclosure is that you will be able to use it correctly if you have conducted task analysis (behavioral observation) with your user base. Observing users in their native problem solving environment gives you the insight about how they interact with the information. By observing someone's eating habits, you'll know whether they typically look at the desert and drinks menu at the start, in the middle or at the end of the meal. You'll discover whether they like to eat the main course or their salad first and whether they drink before a meal or at the end of a meal.

Examples of progressive disclosure on the web

* Learn more link
* Related topics link
* Overview of account information on the first screen
* View more details link
* Advanced search link

References

* [http://experiencedynamics.blogs.com/site_search_usability/2004/03/progressive_dis.html Progressive Disclosure web article- best source for definition (Entire Article Appears Above)]
* [http://www.useit.com/alertbox/progressive-disclosure.html Progressive Disclosure] (by Jakob Nielsen) defines the difference between progressive and staged disclosure and gives usability guidelines for how to use progressive disclosure
* UI Patterns and techniques: [http://www.time-tripper.com/uipatterns/Progressive_Disclosure Progressive Disclosure] (by Jenifer Tidwell)
* Designing interfaces: [http://designinginterfaces.com/Responsive_Disclosure Responsive Disclosure] (also by Jenifer Tidwell)