User interfaces often need to balance information without overwhelming users. That’s where progressive disclosure comes in! This design technique shows only essential details upfront, while allowing users to access more in-depth information as they need it.

Think of it like peeling layers of an onion — the deeper content is only shown when the user is ready, helping prevent confusion and keeping things simple. Knowing when and how to use progressive disclosure effectively can help create interfaces that feel clean, easy, and intuitive for users.

Exercise #1

What is progressive disclosure?

What is progressive disclosure?

Users appreciate a wide range of options but also crave simplicity — they don’t want to overthink tasks. Progressive disclosure balances these needs by revealing information gradually. Basic features are displayed first, while more advanced options are accessible only when users request them. For example, a Settings page may show essential settings upfront, like account, appearance, and security options. Clicking "Advanced settings" could reveal less frequently used options, such as accessibility and reset actions, which can then be hidden again. This technique keeps interfaces clean, allowing users to engage only with the features they need.

Exercise #2

Importance of progressive disclosure

Here are the advantages of progressive disclosure in design and UX writing:

  • It doesn’t intimidate novice users and helps them prioritize content.
  • It saves screen space and enhances scannability for all types of users.
  • It only shows what's relevant to users and de-emphasizes infrequently used features or information.
  • It reduces cognitive load.
  • It simplifies the process of learning a new interface.
  • It decreases the number of errors when users accidentally activate an option they aren't familiar with.

Are there any dangers of using progressive disclosure? Firstly, if you haven't done enough user research, you may have wrong assumptions about what information is common or highly important.[1] Secondly, you may hide the advanced options too far, making them hard to notice at all. To avoid this, use labels and visual tools to indicate additional information — for example, through buttons like Advanced, Load More, See All Options, Continue Reading, etc.

Exercise #3

When to use progressive disclosure

When to use progressive disclosure Bad Practice
When to use progressive disclosure Best Practice

When should you consider using progressive disclosure?

  • For information-rich websites, like e-commerce websites with tons of information about each product or service.
  • For applications with multiple commands, features, and options of different priorities that may confuse or even intimidate new users when exposed to them all.

Don't confuse progressive disclosure with staged disclosure. While progressive disclosure has features or information of different priorities, all features are equally important in staged disclosure but displayed in a linear, step-by-step sequence.[2] Wizards are a classic example of staged disclosure. They allow users to enter information in successive steps, each requesting information based on information they entered in the previous step.

Exercise #4

Primary features

Primary features

The most common and relevant features you show users are called the primary features of progressive disclosure. The initial disclosure level can't be too complicated, confusing, or include too many options — otherwise, users will stumble on the very first steps of acquaintance with an interface.

How do you decide what information the initial level of progressive disclosure should contain? Don't assume you know your users down to the tips of their fingers. The most rational solution is to rely on research data. If it's a new product, analyze the findings of user research (using interviews, surveys, field studies, card sorting, etc.) to understand users' needs and priorities. If it's an existing product, look at the website analytics or conduct observational usability testing to get more quality data about why users prefer specific options/features over others.

Exercise #5

Secondary features

Secondary features Bad Practice
Secondary features Best Practice

The border between primary and secondary features should be easy to spot. Additionally, users should have no doubts about how to transition from the primary to the secondary disclosure levels.

Here's how to ensure this:

  • Use hyperlinks or buttons with informative labels to indicate secondary features. For example, the Advanced Settings or Related Topics labels clearly notify the audience of what users will find when they click or tap it. Conversely, the ambiguous Learn More isn't that straightforward about the benefits users can get from interaction.
  • Make sure the button or link leading to secondary features looks clickable and sits in a visible position. Users should have no trouble finding a way to explore more advanced interface functionality.
Exercise #6

Multiple levels of progressive disclosure

Multiple levels of progressive disclosure

How many levels of progressive disclosure are acceptable?

Interfaces that include more than two levels of disclosure have low usability because users often get confused and may get lost when moving between levels of complexity.

How can you avoid adding extra levels of complexity?

  • Reconsider your advanced features. Smart sorting and regrouping can do wonders and make the interface easier to navigate. When in doubt, talk to your users and observe whether they see the difference between levels and experience any trouble navigating between them.
  • Consider adding 2 levels of secondary disclosure. It may prevent adding the third level, but it's still not the best idea from the usability perspective since multiple controls for advanced options can disorient users.

When you add a third level of disclosure or two secondary levels, you should give labels more thought. By any means, avoid the ambiguous Learn More/See More/Read More buttons. While they may work in a typical situation of two-level disclosure, in a more complex interface, they will only frustrate users and force them to leave.

Exercise #7

Progressive disclosure in onboarding

Progressive disclosure in onboarding Bad Practice
Progressive disclosure in onboarding Best Practice

User onboarding implies the acquaintance of users with a new product or a feature. People will have a positive experience if you introduce new features at the right pace and prioritize them appropriately. Here's how you can use the principles of progressive disclosure to improve user onboarding:

  • Focus on primary needs. Start by highlighting features that address users' main goals on your app or website. Introduce new features simply and reveal more only if users express interest.
  • Analyze early behavior. Study user actions within the first 1-3 days of launch to identify popular initial features. Highlight these in early onboarding for a smoother introduction.
  • Cater to different user groups. Recognize that some users explore all features, while others want a direct path to specific tasks. Tailor onboarding to accommodate both.
  • Be concise. Keep descriptions brief and direct, focusing on essentials to maintain user engagement.
  • Minimize steps. Limit onboarding to 4-5 clear steps, reducing guesswork to retain attention.
  • Use familiar language. Speak in terms that users already use and understand about your product for better clarity and connection.
Exercise #8

Other progressive disclosure examples

Other progressive disclosure examples

Beyond user onboarding, progressive disclosure also takes other shapes such as:

  • Content previews or snippets: You typically see snippets on blogs and news websites. They provide just enough preview for users to decide if they want to dive deeper and read the full content or move on to the next topic.
  • Accordions: Help centers and FAQ pages often contain accordions to show multiple sections containing information that might be relevant only to a certain group of users.
  • Dropdown menus and mega menus: Dropdown and mega menus help large, complex websites to save space and not overwhelm users with tons of options.
  • Image sliders: Image sliders are often seen at e-commerce websites presenting the most popular or recommended items, so users don't always need to explore the whole catalog.
  • Hamburger menus: Designers often use hamburger menus to hide navigation options that users use more rarely than others, like settings, the log-out option, about the app, request a feature, etc.
  • Lazy loading: Lazy loading prevents overwhelming users and reduces interaction costs. All they have to do is to keep scrolling down if they want to explore more content.
Exercise #9

Testing progressive disclosure with users

What testing methods can help you evaluate the efficiency of progressive disclosure?

  • Moderated and unmoderated usability testing: This technique involves observing users in their natural environment or laboratory conditions. A moderator usually doesn't ask any questions unless users get stuck and need help. While users are performing a task on their devices, the moderator searches for friction points — areas that can be improved.
  • Contextual inquiry: It's a combination of observation and user interviews. Firstly, a moderator interviews participants about their experience with a product/feature. Then, users perform a task on their devices in their natural habitat and context of use, while the moderator observes and asks questions along the way. It's a fantastic method to test what users say about a product and what they actually do when using it. Commonly we conduct contextual inquiry during the early discovery stages for a new feature or product.
  • A/B Testing: This type of testing is about comparing two or more versions of a page/screen to see which is most effective and less confusing.[3]

Other less expensive methods include guerilla testing, session recording, phone interviews, card sorting, etc.

References

Top contributors

Claudio Norambuena
Ilayda Alpsar
Elena Seregina

Topics

From Course

Share

Complete this lesson and move one step closer to your course certificate
<?xml version="1.0" encoding="utf-8"?>