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

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.

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.

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?

Using 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.

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.

Other examples:

Example: Progressive disclosure in WYSIWYG

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.

Source: https://www.givegoodux.com/