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.
Google Search (left) presents a simple UI. For most users, this is enough. They do not need to see any advanced features. The Advanced Search (right) is available to users who need additional search functionality. If Google presented these advanced features to every user, they may overwhelm them with options.
© Google, Fair use
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.
The social media app Instagram uses progressive disclosure. Many users do not need more than what Instagram presents on the home screen (left). Users who need settings and advanced features must navigate to their profile (middle) and then select the hamburger menu (right). If the home screen presented all these features simultaneously, it would likely appear cluttered. UI clutter can confuse users as they navigate through the app.
© Meta, Fair use
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.
Adobe Photoshop is a deep and complex photo editing application. However, its initial UI focuses on its basic functionality. Photoshop displays the primary tools on the left, selection controls at the top and the main control panel on the right. Users can find advanced features in secondary menus and windows. This deference manages the complexity of Photoshop and allows new users to get an easier grasp of its functionality.
© Adobe, Fair use
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.
This product page on the Patagonia website provides customers with a brief product overview. Patagonia contains advanced information within an accordion, like specifications and materials. New customers can find the overview quickly since it’s the only body of text initially shown. Customers who need further information can quickly locate and expand the necessary accordion.
© Patagonia, Fair use
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.
Monzo’s banking app uses progressive disclosure for transfer functionality. Users must press the transfer tab and navigate to scheduled payments before setting up a payment. If Monzo presented all transfer options on the main screen, users may accidentally access this while trying to complete a different task.
© Monzo, Fair use
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:
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:
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.
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.
Microsoft Word uses a modal window for advanced paragraphing options.
© Microsoft, Fair use
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.
The Interaction Design Foundation website uses accordions for its FAQ sections.
© Interaction Design Foundation, CC BY-SA 4.0
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.
Avid Pro Tools uses tabs to move between different categories in its preferences menu.
© Avid, Fair use
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.
The Carphone Warehouse uses scrolling for progressive disclosure on its product pages. The product's essential specifications appear higher on the page. Customers can access detailed specifications by scrolling further down.
© Carphone Warehouse, Fair use
Carousels showcase multiple items or features in a single space, allowing users to browse them horizontally.
Netflix uses carousels to show personalized recommendations to users. Users can view top recommendations immediately and access lower entries via the carousel.
© Netflix, Fair use
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.
Asana uses a collapsible sidebar to navigate between different views. The user can hide this sidebar to simplify the UI.
© Asana, Fair use
Tooltips and popovers reveal extra information or tips for an element when hovered over. This pattern provides context without overwhelming the primary content.
Adobe Photoshop uses tooltips to give the user information about a specific tool.
© Adobe, Fair use
Toggles reveal or hide advanced settings or information. They allow users to control the complexity of their interface.
Apple’s Safari browser uses a toggle to show and hide developer preferences.
© Apple, Fair use
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:
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.
Modern operating systems have many features and are deeply customizable. The MacOS settings application uses combinations of UI patterns to facilitate progressive disclosure. Apple uses the left-hand menu to organize settings into groups. They defer advanced settings to modal windows. If, for example, a user accesses the display settings, they see the primary settings first. Buttons allow them to access “Advanced” and “Night Shift” settings via secondary windows. The app also features a search bar and help icon to assist the user.
© Apple, Fair use
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.
Adobe Photoshop offers several ways to help the user with basic and advanced functionalities. Tooltips provide contextual help and the option to watch a video tutorial. The Discover panel (accessed via the question mark icon) offers tutorials for many features and tasks.
© Adobe, Fair use
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:
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:
Page 1: Name, email address, shipping address and phone number.
Page 2: Shipping method and discount codes.
Page 3: Card details and billing information.
Page 4: Confirm details and pay.
Page 5: Card check and authorization.
Page 6. Order confirmation.
The Interaction Design Foundation’s sign-up flow features 16 text fields, drop-down menus, and checkboxes. If IxDF presented all this information on a single page, it may overwhelm and confuse the user. The IxDF uses staged disclosure to simplify this process and reduce the user’s cognitive load.
© Interaction Design Foundation, CC BY-SA 4.0
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.
Adobe Photoshop uses responsive enabling in its menus. Certain edit menu functions are unavailable when the user selects a single shape. Responsive enabling reduces the risk of user errors and confusion since users cannot choose actions without effect.
© Adobe, Fair use
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).
