Progressive Disclosure in User Interfaces

As designers, we’re always trying to get the most out of our interfaces and maximize whatever space is made available to us. While many solutions have been devised over the years, one above all others has consistently influenced the way visitors access the content they seek. From simple techniques, such as tooltips and drop-down menus, to complex single-page websites powered by Ajax, progressive disclosure has become a formidable force.

This article explores the methodology of progressive disclosure and its impact on our interface design work.

What Is Progressive Disclosure?

Before we begin, let’s quickly define progressive disclosure. We all know how damaging clutter can be on usability, so simplifying interfaces whenever we can makes sense.

Progressive disclosure breaks content into smaller, more digestible blocks (showing them only when required). HTML elements, for example, can be hidden from users using the visibility or display properties in CSS; and scripting for events such as onclick can make things appear when requested. By using these content presentation design patterns, we can keep our interfaces simple and help the user accomplish their tasks with greater ease.

The Good, Bad and Indifferent

The thing is, users can be quite exacting. Most demand power and flexibility in the tools they use to accomplish their everyday tasks — which we provide to them on the web with increasingly complex methods of delivery — yet users also want that power to be delivered with simplicity. For instance, many users may want feature-rich apps without needing to learn anything more than they already know (e.g., not having to read an instruction manual).

This dual need of complexity and ease of use has to be dealt with, even though it seems that both things are diametrically opposed. Progressive disclosure can bring simplicity and feature-richness to a website. The idea for progressive disclosure originated as a guideline in software design. When you click on an item in a menu, a dialog box usually appears with an array of carefully organized options.

Disclosure happens not just in the dialog becoming visible, but also in the tabs used to move between categories. On the web, this technique has come to be relied on because of the increased demands of users. Web designers will disclose parts of a page, offering secondary “advanced” options as required.

The benefits of progressive disclosure are these:

• Clean, simpler, more productive interfaces (a godsend for small displays)
• Important content is prioritized by giving the initial focus to the most common features
• Less important content is hidden from view so as not to confuse visitors
• Time is saved if scrolling is reduced and fewer refreshes are needed
• Fewer errors occur because novice users will take easier, more manageable steps

There are also a few disadvantages to consider:

• Accessibility can be tricky, as in the case of helping screen readers navigate to page sections
• Page-loading times could increase because of the size of preloading content
• Client-side technologies like JavaScript (Ajax), CSS3 or Flash could be disabled by the user (so you must take into account graceful degradation, which could add to the development time)
• Too many choices on a navigation path could be confusing
• Indexing by search engines and social networks could be affected by progressive disclosure methods (such as in the case of using the display:none; CSS property)

Progressive Disclosure Basics

In designing a site with progressive disclosure in mind, we should prioritize content into primary or secondary categories. Primary content appears immediately in the normal flow of the page (and is highly visible). Secondary content makes space for itself by doing one of three things:

• Taking up a part of the browser window when requested (as we see with content that slides down when requested)
• Replacing visible content in the layout (such as in tabbed interfaces)
• Overlaying over the primary content (such as in lightboxes/modal windows)

Primary and secondary disclosure methods accomplish their purpose in different ways.

Progressive Disclosure Design Patterns

Let’s look at some of the ways progressive disclosure shows up in design work. Because this technique has existed for quite some time, designers have come up with innovative ways to give content added depth and substance, while making readability and the learning curve easier on users. As with any pattern, every website will have its own requirements, and you should investigate your options before renovating your layout.

Primary Progressive Disclosure Methods

Below are some primary disclosure methods.

Hyperlinks

Clicking on a link redirects us to another page (or we scroll to the target content in the case of fragment links). This might entail losing the visible content, but it’s the most basic and recognizable way of navigating content.

Scrolling

Scrolling provides a way of disclosing content in order of priority. It could be as simple as ensuring that important content appears higher in the page.

CSS Media Queries

Different browsing devices will involve different requirements for content.

A print stylesheet, for example, can remove unnecessary bulk (such as menus) and avoid wasted ink. Media queries, which was discussed in the article on responsive web design, can also help with this disclosure effect by taking away content from plain view for screen sizes that are smaller (which is the case with netbooks and smartphones).

Server-side Techniques

Languages such as PHP enable us to make requests to databases, external files and even other websites.

As users request this content, we can mould an experience around them, rather than just showing just generic, static content.

Secondary Progressive Disclosure Methods

Below are some secondary disclosure methods.

Mouse and Focus Events

If you’ve made use of the :hover pseudo-class, you’ll know that we can dynamically style content based on mouse events such as a mouse hover.

A reaction to a hover event could involve displaying a tooltip, presenting tab content or presenting menus in dropdown menus. A focus event (which can be captured using the :focus dynamic pseudo-class) can also help with progressive disclosure in a similar manner.

Conditional CSS

Two CSS3 pseudo-classes in particular (:target and :checked) can be used for progressive disclosure (see a proof-of-concept here).

Ajax

The technique of content-on-demand has seen a significant rise in popularity through the use of Ajax. Ajax allows us to request new content based on user decisions and then embed it without needing to refresh the page. However, JavaScript is essential to this process (which can be problematic for a few users).

Pop-up windows

While many designers do not recommend them, pop-ups are another form of progressive disclosure. They bring up a new window or new content through some interaction with the current page. This method is less cleaner and more invasive than the others.

Modal windows

Progressive disclosure doesn’t always involve swapping content (either temporarily or long term). You could display a lightbox, a step-by-step wizard or a dialog box, thereby putting the focus on the requested content.

Some Things to Keep In Mind

With all of these techniques available to us, we should highlight a few guidelines for making use of this dynamic form of content presentation.

We’ve already covered the advantages and disadvantages of this method. Below, you’ll find some practical advice on how best to eliminate or minimize any impairment of the user experience. Keeping it brief, first decide whether a single- or multi-page layout suits your content (there is no harm in extending long articles and tutorials over multiple pages).

You’ll want to ensure that the disclosed content gets the full attention of the user (for example, lightboxes fade the background to reduce noise). Limit choice so that users are not overwhelmed with options and content, but give enough options for them to make an informed decision. Never force an option on users.

One page or many? The question often faces designers. As always, compatibility is critical to the process. The method you adopt should have good solid browser support.

If you opt for a dropdown menu with hover events, then you may need to use anchor links to ensure that IE6 users see the dropdown menu. If you use Flash or JavaScript, then make sure alternatives are available for when they are not, which many web designers forget about. All basic points, but important nonetheless!

Users can disable scripting and Flash, so ensure that alternatives are available. To avoid quirks with visibility, label your links so that users know what action is coming. Structure and organize your mechanisms logically (having copy appear on the screen at random isn’t helpful), and use calls to action to point users to key data (since the material won’t be immediately visible, users need to know where they can locate the content). Mystery-meat navigation is like playing guess who, without the fun. Also, with regard to accessibility, ensure that screen readers can navigate around disclosed content effectively.

Use skip links and label fragment identifiers clearly (because most screen readers will take this as an instruction to read part of the page, rather than just repeat everything). Embedding skip links in the content and body helps orient screen reader users. Finally, a note on performance. Technically speaking, progressive disclosure allows us to keep content hidden or off the page until it’s required (which reduces page requests and inter-sectional downloads).

But performance can take a hit on single-page layouts if content is merely hidden until needed by the user, because content that is not in use is being loaded. While Ajax alleviates this (via asynchronous requests), it’s still a concern (Ajax can cause high amounts of persistent network traffic, which can slow down a website).

Showcase of Progressive Disclosure Examples

Here are a few examples of progressive disclosure in the real-world.

Hyperlinks are straightforward. Users simply click and go to a page with more content. Traditional scrolling makes content below the fold of the canvas visible. Mid-window scrolling can be initiated through iframes and the CSS overflow property. Positional scrolling, to push users down the page, can be triggered with scripting. Print style sheets disclose content, hopefully without the junk! Media queries can contract and expand content, catering to different device Amazon has a database of products and discloses them via server-side requests. Tooltips disclose content temporarily and can be quite elegant. Navigation tabs can be used to group and break sections of a page into categories. Dropdown menus in web forms can be implemented not only via lists, but with option inputs. Breakout boxes (slide-out menus) can present a variety of options in a structured way. Using the target or checked pseudo-class gives the impression of multi-page depth. JavaScript methods of altering visibility create effects similar to CSS3 but with the advantage of compatibility. Panels can be produced by swapping content. (The event can even be a timed.) Some websites make use of AJAX requests to speed up the appearance of content. Pop-up windows aren’t usually welcome by users, but they are a form of disclosure.

Websites can do amazing things with Flash. Just a shame about all the disadvantages. aightbox effects exist all over the web. They hold small individual items beautifully. Step-by-step wizards can break up progressively disclosed content into digestible chunks. Dialog boxes and alert windows provide a basic level of detail for decision-making.

Summary

There are many different ways to display content on the screen, and progressive disclosure is one of the most exciting.

It increasingly frees us from having to refresh pages and from navigating to a unique location just to see something change slightly; it even allows us to simplify complex aspects of a website. Enhancing a website is straightforward, but maximizing the available space can be quite a task. As you produce designs for clients or yourself, consider the impact that disclosure could have on your workflow.

Perhaps a lengthy web form could be made easier; perhaps you could use lightboxes to better distinguish useful content on the page; and there is always the option of just giving more (or less) choice to users in order to reduce information overload. However you disclose your wonderful content to visitors, give it some consideration and be creative!

Related Content

• User Interface Patterns for Dealing with Interactive Content
• The Benefits of Wireframing a Design
• 10 Tips for Optimizing Web Form Submission Usability