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.
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
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.
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
- 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
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)
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.
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 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).
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.
Two CSS3 pseudo-classes in particular (
:checked) can be used for progressive disclosure (see a proof-of-concept here).
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.
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.
All basic points, but important nonetheless!
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).
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).
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.
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!