What is Progressive Disclosure? Show & Hide the Right Information

progressive disclosure

Progressive disclosure is one of the ways of reducing UI complexity and it may come in handy whenever designers want to make products less overwhelming for the end-user.

This article explores progressive disclosure, when to use it, helpful UI components, real-world examples, and a step-by-step process for implementing this design technique.

Design user experiences your customers love with the world’s most advanced design tool. Sign up for a free trial to create your first interactive prototype with UXPin. 

Build advanced prototypes

Design better products with States, Variables, Auto Layout and more.

Try UXPin

What is Progressive Disclosure?

Progressive disclosure is a technique UX designers use to reduce cognitive load by gradually revealing more complex information or features as the user progresses through a user interface of a digital product.

Jakob Nielsen, co-founder of the famous Nielsen Norman Group, introduced progressive disclosure in 1995 as an interaction design pattern to reduce user errors for complex applications.

Designers achieve this by breaking complex tasks into smaller, more manageable steps and presenting these to users one at a time. This step-by-step approach allows users to complete large tasks without being overwhelmed by too much information and instructions at once.

The most common example of progressive disclosure is a multi-step form, typically used for eCommerce checkouts. An example may look like the following:

  • Step one: name and delivery address
  • Step two: shipping options
  • Step three: order confirmation and payment details
  • Step four: success/thank you page

What are the three categories of progressive disclosure?

There are three categories for progressive disclosure:

  1. Step-by-step: breaking complex tasks into manageable steps
  2. Conditional: hiding certain elements and features until the user requests them
  3. Contextual: offering additional information and options to provide context based on the user’s current situation

What is progressive enabling?

Progressive enabling is a similar design technique that gives users incremental access to features and functionality as they become more familiar with a product. This technique is especially effective for complex products, allowing users to fully comprehend each feature before moving to the next.

The levels in video games are an excellent example of progressive enabling. Players start with basic features and difficulty, which grow in complexity with each level.

When to Implement Progressive Disclosure

process

Here are four instances where designers might consider progressive disclosure.

Complex tasks

Breaking complex tasks into manageable chunks makes it easier for users to understand and complete. If you save each step, users don’t have to complete everything at once and can return later.

Contextual help

Designers often use contextual help through tooltips, popups, hotspots, and other UI elements to direct users through tasks. For example, a designer can highlight the form field a user must complete next so they know where to focus.

Onboarding

Progressive disclosure is highly effective for onboarding, where designers provide in-app tutorials and walkthroughs to explain steps in a specific process, including using contextual help.

Content design

Content, especially in product documentation, can be overwhelming to read and digest. Content designers can use progressive disclosure to present users with the most important information first, with the option to explore more content for those who need it.

UI Patterns for Progressive Disclosure

Here are some examples of how designers use UI design patterns for progressive disclosure.

Accordions

Accordions give users control over when and if they need content. These design patterns are particularly helpful when designers have to present a lot of content, like FAQs.

Tabs

Tabs allow designers to organize content into categories so users can choose when they need it. These tabs also reduce scrolling, which is particularly helpful on mobile apps.

Dropdown menus

Dropdown menus help keep UIs uncluttered by hiding long lists. Hiding this content allows users to focus on the current task without being distracted by irrelevant content. For example, imagine trying to complete a form with all the countries, states/provinces, and cities visible. It would be a nightmare to navigate.

Scrolling

Presenting users with the most important content high on the page above the fold can help them find answers or complete tasks without scrolling. Designers can provide supplementary content and features when users scroll. Sales landing pages often use this type of progressive disclosure to make a decision immediately or scroll for more information.

Explore: 4 types of scrolling patterns.

Dialog boxes & popups

Dialog boxes, popups, and tooltips provide users with additional information when they hover or click on a UI element. This progressive disclosure technique lets users find answers without leaving the task while keeping interfaces uncluttered.

Examples of Progressive Disclosure

GOV.UK bank holiday page

The most famous progressive disclosure case study for content design is the UK government’s GOV.UK bank holiday page redesign. The initial web design was busy and overwhelming.

Through user research, the team learned that most people wanted to know the date of the next bank holiday. The redesign presents users with the upcoming bank holiday at the top of the screen using a clear visual hierarchy, with the following days in smaller text below.

gov uk example min

Google’s primary search is simple: one input field with a few options, including an image search and two buttons. Most users will only use this basic search feature.

google basic example min

Google’s Advanced Search is more complex, with multiple fields and options for users to get more granular, including settings for language, region, exact phrase, last updated, etc.

google advanced search min

Dropbox’s File-Sharing Options

When you share a file in Dropbox, the file-sharing options are initially hidden, with only the email field and “Share file” button visible.

dropbox example min

Users must click “Settings” to access more advanced settings like “File settings” and “Link for viewing” options.

dropbox advanced example min

eCommerce product pages

Designers use progressive disclosure on product pages, so they don’t overwhelm customers. A standard technique is to use accordions or tabs to hide details so shoppers can choose if and when they want to see them.

For example, only the quantity stepper and “Add to Cart” button are visible on this product page from Shopify Themes. The product’s description, shipping and returns, and reviews are hidden behind accordions.

ecommerce example min

Progressive Disclosure Design Process

Identify user needs

As we saw in the GOV.UK example above, understanding what content and information your users need is vital for progressive disclosure. Designers can use fundamental UX research techniques like user interviews and usability testing to determine these needs.

Prioritize information

Next, designers use card sorting and affinity mapping to prioritize information and features to help users accomplish their goals efficiently. For example, designers may hide the lowest priority items or use the hierarchy to create an efficient multi-step process.

Determine the correct level of detail

Once they have prioritized the information, designers must determine the level of detail for each one. What information must designers present immediately, and what must follow?

For example, with GOV.UK, the most important information what the next bank holiday. The level of detail users required was the date and name of the holiday–for example, December 25, Christmas Day. The other holidays followed sequentially with the same level of detail.

Design for simplicity

Keeping user interfaces simple and easy to use is crucial. Designers must only provide the content and features required to complete a single task or decision–which is why the first three steps above are essential for progressive disclosure.

John Maeda’s 10 Laws provide an excellent framework for achieving design simplicity:

  1. Reduce: remove what isn’t needed
  2. Organize: makes complex systems easier
  3. Time: saving time feels like simplicity
  4. Learn: knowledge makes things simple
  5. Differences: balancing simplicity and complexity
  6. Context: “What lies in the periphery of simplicity is not peripheral”
  7. Emotion: more emotion is better than less
  8. Trust: simplicity = trust
  9. Failure: some things aren’t meant to be simple
  10. The one: subtract the obvious and add the meaningful

Prototype and test

The last step is to prototype and test your solution. Designers must also consider usability and ensure the design doesn’t introduce problems. For example, hiding features so users can’t find them.

Create Better Prototypes With UXPin

UXPin’s advanced features allow designers to create immersive prototypes indistinguishable from the final product. With fully functional forms and code-like interactivity, design teams can test ideas to find a solution that best solves user needs while providing maximum business value.

These four UXPin features enable designers to build advanced prototypes: 

  • States: create multiple states for a single component and build complex UI patterns like dropdown menus, steppers, carousels, and accordionsessential for progressive disclosure user testing.
  • Interactions: use Triggers, Actions, and Animations to design immersive prototype experiences. With Conditional Interactions, designers can create dynamic interactivity according to user actions.
  • Variables: collect data from user inputs and use it elsewhere in the application. Designers can use these variables to personalize the prototype experience to feel like the final product.
  • Expressions: design form validation, computational components, dynamic error messages, and more. When combined with States, Interactions, and Variables, Expressions enable designers to create Javascript-like functionality.

Build prototypes that allow your team to get meaningful, actionable results from testing. Sign up for a free trial to create your first UXPin prototype today.

Build prototypes that are as interactive as the end product. Try UXPin

Try UXPin

by UXPin on 13th March, 2023

UXPin is a web-based design collaboration tool. We’re pleased to share our knowledge here.

Still hungry for the design?

UXPin is a product design platform used by the best designers on the planet. Let your team easily design, collaborate, and present from low-fidelity wireframes to fully-interactive prototypes.

Start your free trial

These e-Books might interest you