UI Design

The Power of Progressive Disclosure

progressive-disclosure-russian-nesting-dolls

Interactive design of any kind means walking a very fine line between not enough information and information overload. At the core of that balancing act is one of the most important principles of UX and Design: progressive disclosure.

Progressive disclosure means that everything in the User Interface should progress naturally, from simple to complex.

This mimics the natural way the brain processes information, successively; we build upon each subsequent step of experience and learning, adding to what we know.

In terms of the app, site or system we’re designing, this means only the necessary or requested information is displayed at any given time.

Put another way, we only want what we need right now. We only need enough to take the very next action; we only need what we’ve asked for.

Information presented to someone who isn’t interested in it — or isn’t ready to process it — is noise. It’s background stuff. It’s not what we want. It’s in the way. It’s distracting us.

If you’ve ever wondered how to decide what’s really needed onscreen at any point in the user’s journey, download my FREE Progressive Disclosure Cheat Sheet. It’s a simple series of Yes/No questions that will help you determine when to keep something onscreen, hide it for later or delete it altogether.

Progressive disclosure helps people manage complexity without becoming overwhelmed, confused or frustrated. Let’s take a look at some examples of progressive disclosure in action.

Your Facebook Feed

Your Facebook feed is filled with a potentially overwhelming amount of content — and it’s multiplying every few seconds! But Facebook is designed specifically with progressive disclosure in mind, using multiple methods to help you manage the volume of stuff you see.

1. Truncated content.

Facebook automatically truncates long posts with a “see more” link after a few paragraphs. This allows you to read a quick snippet and decide if you’re interested enough to read more

FB-feed-show-more

2. Image and link previews.

When you post a link to an article, Facebook includes a “preview” of the content to come, consisting of a headline and image. Again, this allows for quick evaluation as to whether it’s worth your time or not. So if the end result is a blog post, you get a quick look before you click or tap.

progressive-disclosure-JN-FB-to-blog

3. Progressive content loading.

As you scroll, Facebook loads more posts — essentially obeying your request for more. Nothing loads until you ask for it. Which, incidentally, also makes pages load a LOT faster. Which, in turn, improves user experience.

In addition, when you search, it loads the first 10 matches, and gives you the option to see more, if you so choose.

progressive-disclosure-FB-see-more-results

Weather Apps

Think about the weather app you use on your smartphone. How many times do you actually venture past the very first screen? And when you do, why?

progressive-disclosure-weather-appUsing Apple’s Weather app, the initial screen tells me what I need to know right now:

  • What’s the temperature outside?
  • Is it raining/snowing?
  • What’s the weather going to be like in the near future?
  • What’s the forecast for the rest of the week?

At most, I have to scroll down to see the rest of the weekly forecast — if I want to see it.

The majority of weather apps on other platforms work the same way. They’re designed with the user’s immediate information needs in mind. There’s more detail available, but I’m not forced to deal with it if I don’t need it. That’s progressive disclosure in a nutshell.

Your Bank ATM

If you’ve ever used a bank ATM, the sequence you see in the UI is all about progressive disclosure.

The first screen shows only the most important options, in the order a user is most likely to need them. Notice that the first three options are the most commonly used: withdrawal, deposit and balance inquiry.

And while there are a number of other, less-commonly used options, they’re all tucked away behind the “Additional Options” button.

progressive-disclosure-BA-ATM-screen-01

If I select Balance Inquiry, focus narrows; the only information I see onscreen is related to my request. All other options are hidden until I choose either continue or cancel.

progressive-disclosure-BA-ATM-screen-02

Putting Progressive Disclosure to Work

All three of these examples demonstrate three core principles of progressive disclosure that can (and should) be applied to any kind of digital product:

  1. Show only the most important options up front.
  2. Prioritize those options according to user 
needs and expectations.
  3. Offer a larger set of specialized options on request; disclose additional features /info only if the user asks for them or needs them.

Consciously applying these principles when you design is what delivers the simplicity and ease of use we all crave. When you help people prioritize content and interaction in this way, you’re also helping them use their cognitive abilities more efficiently. Focus is maintained, distractions are removed.

While it’s important to ensure that the most frequently used features are readily available, you must avoid the temptation to put everything onscreen. That means:

  • Don’t fill your navigation menus or toolbars with rarely-used options.
  • Don’t provide 12 product categories when only 3 really matter to your users.
  • Don’t list every service you offer if 80% of your business comes from one of those areas.

As most of us know, too much of anything is too much, and this is no different. Offering too many choices at the same time results in cognitive overload, which results in people choosing nothing. That’s known as choice paralysis among cognitive scientists, and it’s often the main reason new apps, sites or other digital products fail.

When you help people prioritize content and interaction in this way, you’re also helping them use their cognitive abilities more efficiently. Focus is maintained, distractions are removed.

Progressive disclosure ensures that everything in their experience is infinitely easier to view, understand and interact with.

  • King Kano

    I find it challenging to get clients to understand why progressive disclosure is important; many of them have a view point that the most important information is all of the Information. It seems to be a battle that is hard for me to win, so much that I forget to consider progressive disclosure when I’m doing a UX audit.

    • “All of it” is always going to be the answer when you ask what matters most. Your task is to get them to see that only specific items on that list result in VALUE for them — meaning money made or money saved. Anything onscreen that cannot be connected to either needs to be minimized, which increases the likelihood people will do what the client wants them to. That’s how you position the need for progressive disclosure and information priority.

    • Anne Dougherty

      One good way to sell progressive disclosure to clients or organizations that want to put everything on the homepage (we’ve all had them [g]) is to create walk throughs for each user task they want their users to do.

      Then take the clients/stakeholders through every step evaluating each piece of content you encounter on a screen and specifically asking: Does the user need to see this *right now* to get done what she’s trying to do.

      You can do this with lo-fi wireframes or paper print outs, which I’ve found is most effective since you can physically mark out things you don’t need on a page.

Blog Categories