Progressive Disclosure

Progressive disclosure is a user experience (UX) technique that defers advanced features and information to secondary user interface (UI) components. Designers keep essential content in the primary UI, while advanced content is available to users upon request. Progressive disclosure’s goal is to improve usability for novice and experienced users.

Vitaly Friedman, senior UX consultant, European Parliament, gives an example of how to use progressive disclosure in complex interfaces, and explains why it’s important:

Progressive disclosure aims to show users what they need when they need it. Designers use UI patterns like modal windows and accordions to hide advanced features and information. This approach keeps the primary UI straightforward and inviting.

Designers use progressive disclosure to:

• Ensure new users achieve success from the beginning.

• Support users of varying experience levels, from beginners to experts.

• Make infrequent tasks less noticeable.

• Keep the UI clear and uncluttered.

UX designers primarily apply progressive disclosure in digital applications and websites to improve usability. An example of progressive disclosure is Google Search’s advanced search feature.

How Does Progressive Disclosure Improve User Experience?

Progressive disclosure declutters the UI to prevent confusion and cognitive overload. For instance, a social media app might initially display a simple feed and posting features to new users. Extra features, like user activity or detailed analytics, are available upon exploration or demand. This approach ensures designers do not overwhelm users with options they do not need yet.

Designers hide complex functionalities to improve the user’s learning curve. For example, a sophisticated graphic design tool might only show basic editing options on the main interface. As users become more comfortable, they can choose to access more complex features, like layer management or custom brushes. This method:

• Prevents users from feeling overwhelmed.

• Encourages a more engaging learning experience.

Progressive disclosure helps basic and advanced users find what they need faster. When designers simplify the main interface, new users do not need to look at or read through content they do not yet need.

Meanwhile, experienced or knowledgeable users can bypass this basic content. They can directly access advanced content through shortcuts or secondary menus. For example, a product page might present customers with core information and hide detailed specifications from view.

Designers limit the immediate set of actions available to cut the chance of mistakes. When users face an interface packed with functionalities, the likelihood of errors increases.

Consider an online banking application. For new users, it might prominently feature key actions like viewing balances and making transfers. The app may then introduce complex operations as the user navigates deeper into the app. These operations could include setting up recurring payments or applying for loans. This progressive disclosure ensures users are less likely to make incorrect transactions because of an overwhelming array of options.

How to Implement Progressive Disclosure in the Design Process?

Design thinking is a 5 stage process where designers empathize, define, ideate, prototype and test. The design thinking process is non-linear and cyclical. For example, designers may return to the prototyping stage to implement feedback from the testing stage. Watch this video to learn about the five stages of design thinking:

Designers implement progressive disclosure during this design process:

1. Empathize. Designers talk to users to determine which information and actions are most important to them. A typical user research method for progressive disclosure is card sorting. In card sorting, users arrange information into groups. These groups could include basic, intermediate and advanced functions. Designers watch and listen while users arrange the information. Observation helps designers understand user preferences and reasoning.
   
   Design Consultant and author Donna Spencer provides some best practices for card sorting:
   
   

   Show Hide video transcript

   1. 00:00:00 --> 00:00:32

      The people who you invite to be involved are also  super important – not quite as important as the content, but still very important. Small groups of people working in-person around a table is literally the best thing because you can listen to the people and the conversation that they have and that conversation is so much more useful than the actual results that you get. We still could do this remotely, especially if people can get together and you can moderate via video.

   2. 00:00:32 --> 00:01:01

      Or... I haven't ever done this, but we could kind of do it with a Zoom call and like a MURAL board and get people to poke things around, but it's still – any time that you have a chance to do it face-to-face, do that. And one of the things that I like to do if I need to do remote card sorts is just at least a couple face-to-face because then I can really hear that discussion and understand what's going on with just some of the group and then I can look at the results from the others.

   3. 00:01:01 --> 00:01:37

      We want to make sure that *the people are also of the same level*. And this goes for any kind of group research or group activities. If you have a boss and somebody much more junior, the  junior people will always just defer to the boss. If you have technical people and non-technical  people, the non-technical people might just go, 'I don't know!' and follow the technical people. So, you want to make sure that people are at the same kind of levels, and, if you can, the same kinds of work or life situation, or the same kinds of users

   4. 00:01:37 --> 00:02:06

      because then you can listen to them discuss their experiences and they'll do that better if they're the same types. We do that for most kind of focus groups and things. If you are doing it in-person, just don't try to  fill up a room with lots of people. Do it with one group or have one facilitator per group because, as I said, the conversation is the super-useful part of this and it's really worth listening.

   5. 00:02:06 --> 00:02:32

      What I used to do when I did these in-person is I would kind of just sit up at the end of the table, kind of be typing in results from a previous sort; so, I don't look like I'm hovering over them. I look like I'm busy kind of just listening a bit. But I'm listening to every single word they're saying! So, again, if we're working remotely and we're doing a remote card sort, you still want to have a good representative set of people and see if you can figure out a way of getting

   6. 00:02:32 --> 00:02:44

      people to work together remotely. Otherwise,  they'll just do it by themselves one at a time, and you'll still get good results, but you  just won't hear them discussing their reasoning.

2. Ideate. Based on their research, designers refine the primary and secondary content. They may use techniques like brainstorming to find solutions to user issues. If the designers ran multiple card sorting sessions with basic and advanced users, they might combine the results to find a happy medium.

3. Prototype and test. Designers create interactive versions of their designs that include progressive disclosure. They then do usability testing with users to ensure the design helps them; not confuse them.

Progressive Disclosure UI Patterns

Designers use many different UI patterns to implement progressive disclosure in their products. Examples include:

• Modal and pop-up windows open in front of the main UI to provide extra functions.

• Accordions expand and collapse content sections to optimize space and reduce clutter. Each section has a header that users can click or touch to reveal or hide the information beneath. Designers commonly use accordions for FAQs, forms and navigation menus.

• Tabs divide content into multiple panels or sections but display only one panel at a time. Users can click on the tabs to switch between panels.

• Scrolling unveils content gradually as users move through a page. While simple, scrolling is an effective tool for progressive disclosure. Many product pages place simple information at the top and complex information at the bottom. Users can reveal further details by scrolling.

• Carousels showcase multiple items or features in a single space, allowing users to browse them horizontally.

• Collapsible menus and sidebars reveal advanced features within the primary UI. Some applications allow users to add and remove multiple menus and sidebars within the UI for advanced customization.

• Tooltips and popovers reveal extra information or tips for an element when hovered over. This pattern provides context without overwhelming the primary content.

• Toggles reveal or hide advanced settings or information. They allow users to control the complexity of their interface.

Designers use many UI patterns to implement progressive disclosure. They often combine the patterns for optimal UX. Vitaly Friedman, senior UX consultant, European Parliament, shows an example of how to progressively disclose complex menus with multiple UI patterns: 

What Are the Best Practices for Progressive Disclosure?

Designers must consider the following when applying progressive disclosure.

• Keep important information visible. Define essential and advanced content through user research. Use methods like card sorting and task analysis. In task analysis, pinpoint the user's issues while watching them perform a task. Then craft a task flow that shows the steps from facing a problem to finding a solution. These insights can reveal the primary content the user needs.
   
  Frank Spillers, CEO of Experience Dynamics, gives an introduction to task analysis:
   
  

  Show Hide video transcript

  1. 00:00:00 --> 00:00:30

     So, task analysis is an  extremely important technique. And, to be clear, you can do your task analysis when you do your regular user research and interview observation; that's the observation side. That's where you ask a user, "Hey can you show me how you do it today?" Now, don't worry about the technology;  don't worry about any tools they may be using

  2. 00:00:30 --> 00:01:00

     – you know – existing applications or whatever. Just have them go through what they normally do. It's even great in task analysis to see things in the absence of some technology like your design or whatever. So, if they want to show you how they  normally do it, then you'll get to see their kind of workarounds, their patterns, their shadow spreadsheets – you know – ways of coping, their hacks and their adjustments, things they've done to make it work.

  3. 00:01:00 --> 00:01:32

     And that stuff is just beautiful. But having them step through their problem solving step by step, kind of 'teach me how you do it' – that's the basis of task analysis. If you're doing *ethnography*, which is similar to interview observation – you're essentially looking  for a few more cultural cues with ethnography; you're looking for things of cultural significance, and it might just be user culture. It might be in that region of the country you're learning about the users.

  4. 00:01:32 --> 00:02:02

     Or it might be at a national level or international level if you're doing localization or cross-cultural research. It might even be the culture of an underrepresented group if you're doing inclusive research and inclusive design, trying to understand the experience of that community, their history, their lived experience as it relates to the problem they're trying to solve or how they approach it. So, task analysis is definitely one of these things  that you want to build into your tool set.

  5. 00:02:02 --> 00:02:32

     And essentially what you're going to do is take those observations from your research and you're going to map them out and kind of flow chart them, flow diagram them and see how you can take that structure and map it to your design kind of like as the user goes from here to here to here, how can my screen support this thing that they do  here with this tool or this feature? Kind of see how you can make it flow much more intuitively

  6. 00:02:32 --> 00:02:36

     so it feels good and makes sense to your users.

• Limit layers of information. A single secondary screen is typically sufficient for each instance of progressive disclosure. Multiple layers can confuse users and make finding “buried” functionality hard. Simpler designs are often better solutions than numerous levels of progressive disclosure. If simplification isn't possible, use combinations of UI patterns. For example, many settings menus use a combination of tabs or menus with modal windows to organize settings.

• Avoid multiple access paths. Users can become confused if they can reach the same information or feature in several ways. A single straightforward path is better for usability. Tree diagrams help designers visualize the content of their products and ensure one path to each piece of information or setting.

Guide the User

Progressive disclosure helps to keep the main interface simple and ease new users into an application. To keep advanced content discoverable, designers help the user in the following ways:

• Make it clear where advanced functions are available. To achieve clarity, use icons, labels, and other signifiers. These signifiers suggest there’s more information available. Examples include arrows, buttons, ellipses and text (e.g., more options).

• Use onboarding tutorials. Explain key hidden features and how to access them through tutorials. Tutorials should include a skip option so as not to frustrate advanced users.

• Provide contextual help. Tooltips, pop-ups and other contextual help patterns guide users as they learn. These patterns can inform users advanced features are available.

• Implement feedback mechanisms. Use prompts and feedback to guide users in discovering and using hidden features. For example, a user completes a task for the first time in an application. A prompt might appear to congratulate them and suggest a related advanced feature they have yet to try.

Progressive Disclosure Challenges

While progressive disclosure is often highly beneficial, it has risks and challenges. Designers must be mindful of the following as they implement progressive disclosure:

• Broad audiences. Defining essential and advanced content becomes challenging when your have a broad audience. Consider a website like Amazon. Amazon’s customers include both computer scientists and people who rarely use technology. In this scenario, designers must test their solution to ensure it meets the needs of their entire audience.

• When “advanced” features become everyday tasks. For tasks users perform frequently, the benefits of progressive disclosure can diminish. If users need to go menu diving to access familiar tools, this can become a hindrance and not a help. An email client, for example, may hide the reply, delete and mark actions behind additional clicks. These extra clicks could frustrate users who perform these actions multiple times daily. In this scenario, designers can use research to redefine primary actions. Alternatively, designers can implement UI customization for advanced users.

• Dumbed-down content. A risk of progressive disclosure is that it can oversimplify the product and limit what users can achieve. Oversimplification affects the usability of the application or website for advanced users. A dumbed-down interface can also give the impression that the software lacks depth or capability. For example, a photo editing application’s UI may be easy to understand,  but the software's full range of features and tools are challenging to find. Designers must find the balance between usability and discoverability.
   
  In this video, Morgane Peng, Design Director at Societe Generale, explains the “UX Efficient Frontier.” This concept is a way for designers to understand how to approach the balance of simplicity and complexity: 
   
  

  Show Hide video transcript

  1. 00:00:00 --> 00:00:34

     I'd like to just introduce this concept to actually find a balance between the complexity and simplicity. And so to understand that, I would like for us to differentiate two things because we have business expertise and interface expertise, and this actually comes this theory comes actually from my financial background, my past, I would say, because after working many years in complex design, I realized that I kind of adapted this theory to design.

  2. 00:00:34 --> 00:01:00

     So this is usually where we go from portfolio management theory. And so that's why first I wanted to define what so this next expertise, it's actually a person's knowledge in an area due to the topic of studies. Maybe they've done some business training or they have some per work experience. And so for example, let's say when you start a job, you're just trying to understand what's happening around you.

  3. 00:01:00 --> 00:01:30

     But after a few years you become super efficient, you stay in the flow. Kind of things, like when we start designing, we have to download tools, but then it goes super fast and then prototype super fast as well. This actually also includes the mental models and how people approach the task and their processes. The next axis is the interface expertise. And so this is actually a person's knowledge of how an interface works due to the training habits of using it through experience

  4. 00:01:30 --> 00:02:02

     from using similar application. So for example, if you use once an app to deliver food, usually the interaction pattern are all the same and you become familiar and it's easy for you to use any of the food delivery app. And so now if you plug the two together and again, they're very different, you get something like this. So everything above the curve is over complicated you are making it harder for the user to use a service. Everything below is over simplified.

  5. 00:02:02 --> 00:02:30

     You're kind of destroying value because you're putting your user at risk of not being able to do their work. And so what's in the middle is what I call the efficient frontier. It really represents the sweet spot. And ideally this is what you want to be on your project. So let's look at some combinations. So this one is basically law, everything. This is where most consumer products are. So for example, food delivery, listening to music,

  6. 00:02:30 --> 00:03:01

     you don't need a lot of business expertise to that and you actually don't need a lot of interface expertise as well. Then here this is where we like to say this is where our playground is as a financial design team because a lot of the legacy tools are in this, because people assume that because the business topic is complex, they can do whatever they want in the interface. And so our everyday job in my team is really to actually get closer to the curve with that of a simple interface.

  7. 00:03:01 --> 00:03:26

     And last one, in this combination. To me this is where it's the danger zone because the interface has been dumbed down too much and if you actually don't get access to designers and sadly nowadays they're still designers who are asked to work on things without reaching out to the users. This is where it's the most dangerous because you actually don't know if you are oversimplifying things on that.

Alternatives to Progressive Disclosure: Staged Disclosure and Responsive Enabling

In addition to progressive disclosure, designers employ similar methods to reveal information progressively. Methods include "staged disclosure" and "responsive enabling."

Designers decide which method to use based on research and context. These methods are also not mutually exclusive. Designers may combine all three to improve their product’s usability.

Staged Disclosure

Staged disclosure unfolds the user's journey in a straightforward, step-by-step manner. Progressive disclosure makes advanced features or information available to the user on request. Staged disclosure reveals all information one step at a time.

A typical example of staged disclosure is a step-by-step e-commerce checkout process. Some processes use multiple pages; others use accordions that expand and contract as the user completes each step. Here’s an example flow:

1. Page 1: Name, email address, shipping address and phone number.

2. Page 2: Shipping method and discount codes.

3. Page 3: Card details and billing information.

4. Page 4: Confirm details and pay.

5. Page 5: Card check and authorization.

6. Page 6. Order confirmation.

Other examples of staged disclosure include:

• Software installation wizards present software setup in stages. Wizards make complex installations manageable and user-friendly through guided choices.

• Educational course modules progressively unlock content. This progression facilitates learning and keeps students engaged without overwhelming them.

• Product configuration flows present customizable product options in a sequence. Choices in early steps determine the options available in later steps. For example, an online car configurator starts with model selection, followed by color and then interior options.

Responsive Enabling

Responsive enabling displays only relevant information and controls for a specific immediate task. As the user interacts, the interface enables relevant options and disables unnecessary ones.

A typical example of responsive enabling is in application menus. Users see a full menu based on the active window, item or task. However, unavailable actions appear grayed out.

This approach indicates to the user the functionality available in the current context. Designers use responsive enabling in partnership with progressive disclosure to inform users of their possible actions.

Other examples of responsive enabling include:

• E-commerce product configurators. Size and accessory options activate when the user selects a product color.

• Document editing tools. Formatting options (e.g., bold, italic) activate only when the user selects text.

• Survey forms. Specific questions unlock depending on the user’s answers. For example, the user unlocks pet care questions when they answer "Yes" to owning a pet.

• Payment method input. Users do not see the credit card input form if they choose an alternative payment method like Apple Pay.

• Video game tutorials. Tutorials guide users through game controls one at a time. Once the user completes one action (e.g., jump), they unlock the next (e.g., punch).

Learn More About Progressive Disclosure

Learn How to Balance Simplicity and Complexity in UX in our Master Class with Morgane Peng, Design Director at Societe Generale.

Vitaly Friedman’s Master Class, Complex UI Design: Practical Techniques, includes many progressive disclosure techniques.

Read Jakob Nielsen’s article on Progressive Disclosure for further insights.

Explore how Microsoft Windows uses Progressive Disclosure Controls.

Apple’s Developer Guide explains some best practices for progressive disclosure.

Learn from the Nielsen Norman Group When (& When Not) to Use Modal & Nonmodal Dialogs.