--- title: "Progressive Disclosure" url: "https://www.insideuxdesign.com/en/glossar/progressive-disclosure" language: "en" description: "What is progressive disclosure? A plain-language explanation with an example and practical tips. Learn how to keep interfaces clean without cutting features." published: "2026-10-14T09:50:32+02:00" updated: "2026-10-14T13:03:31+02:00" --- # Progressive Disclosure Progressive disclosure is a design principle where an interface shows only the essentials at first. More options and details appear only when someone asks for them. - **Buchstabe:** P UX glossary # Progressive Disclosure Progressive disclosure is a design principle where an interface shows only the essentials at first. More options and details appear only when someone asks for them. Imagine you just want to print a PDF quickly. Instead of a simple dialog with “Printer,” “Pages” and “Print,” a window pops up with 40 options: color profiles, margins, duplex binding, paper tray. You spend half a minute hunting for the print button. Many print dialogs handle this differently: they show the essentials first and tuck everything else behind “More settings.” That principle is called progressive disclosure. ## Explained simply Progressive disclosure means an interface first shows only the most important information and features. Everything else appears only when someone explicitly asks for it. Think of a restaurant menu that lists the main dishes up front while the wine list comes separately on request. If you just want to eat, you aren’t buried under 80 wines. If you want wine, you get the full selection. Jakob Nielsen described the principle in a widely cited 2006 article. In essence, he argues that progressive disclosure improves three aspects of usability at once: newcomers learn a system faster, experienced people work more efficiently, and fewer errors happen. Even then, the idea wasn’t new. Nielsen describes it as more than 30 years old. ## What makes it work According to Nielsen, success depends on two things. First, getting the **split** right: what people need often belongs up front, and what they rarely need can move to a second level. You’ll make this call best with data, such as usage analytics, observation and [usability testing](https://www.insideuxdesign.com/en/glossar/usability-testing). Second, the **path to the second level** has to be obvious. A link like “Advanced options” should be easy to spot and make clear what’s behind it. Nielsen also advises against more than two levels, because people easily get lost. A related variant is *staged disclosure*: a wizard guides people step by step through a process, such as a booking. Here, everyone goes through each step, whereas with progressive disclosure, people decide for themselves whether to dig deeper. The principle works because working memory can only handle a limited amount at once. Every extra option adds to [cognitive load](https://www.insideuxdesign.com/en/glossar/cognitive-load). You can read more in [Basics of Human Perception: Short-Term Memory](https://www.insideuxdesign.com/en/blog/basics-of-human-perception-short-term-memory). ## An example Before: a banking app shows every field at once when you make a transfer: recipient, IBAN, amount, reference, execution date, standing order, frequency, end date. Many people scroll up and down, unsure what they actually need to fill in. After: the screen initially shows only recipient, IBAN, amount and reference. Below that is a link: “Schedule for later or set up a standing order.” Anyone who needs it can expand it. Everyone else is done after four fields. ## Common misconceptions Progressive disclosure doesn’t mean hiding features that lots of people use regularly. If a frequently used option ends up on the second level, every use costs an extra click and time spent searching. The principle only works when the split matches how people actually use the product. ## In practice - **Measure, don’t guess.** Use data and observation to check which features really get used often before you move anything to a second level. - **Label it clearly.** “More” on its own says little. “Change delivery address” or “Advanced filters” tells people what will open. - **Stick to two levels.** If you need a third, that’s a sign the feature itself should be simplified. ## Related terms [Cognitive Load](https://www.insideuxdesign.com/en/glossar/cognitive-load), [Onboarding](https://www.insideuxdesign.com/en/glossar/onboarding), [Hick’s Law](https://www.insideuxdesign.com/en/glossar/hicks-law), [Mental Model](https://www.insideuxdesign.com/en/glossar/mental-model) ## Sources - [Jakob Nielsen: Progressive Disclosure. Nielsen Norman Group, 2006](https://www.nngroup.com/articles/progressive-disclosure/) - [Kathryn Whitenton: Minimize Cognitive Load to Maximize Usability. Nielsen Norman Group, 2013](https://www.nngroup.com/articles/minimize-cognitive-load/) ## More terms [ ### A/B Testing An A/B test is an experiment that shows two versions of a page or element at the same time to randomly split groups of visitors. It lets you decide with real data which version works better. ](https://www.insideuxdesign.com/en/glossar/a-b-testing) [ ### ARIA ARIA is a W3C standard that adds roles, states and properties to HTML. It tells screen readers what an element is and how it currently behaves. ](https://www.insideuxdesign.com/en/glossar/aria) [ ### Accessibility Accessibility means designing websites, apps and digital documents so that everyone can use them, including people with visual, hearing, motor or cognitive disabilities. ](https://www.insideuxdesign.com/en/glossar/accessibility) [ ### Affordance An affordance describes what action an object makes possible and whether people can recognize it: a button invites you to press it, a handle invites you to pull. ](https://www.insideuxdesign.com/en/glossar/affordance) [ ### Alt Text Alt text is a short text version of an image, stored in the HTML alt attribute. Screen readers read it aloud so people who can’t see the image get the same information. ](https://www.insideuxdesign.com/en/glossar/alt-text) [ ### Atomic Design Atomic Design is a method for building user interfaces from small, reusable building blocks, from single elements like buttons all the way up to complete pages. ](https://www.insideuxdesign.com/en/glossar/atomic-design) [ ### BFSG The BFSG, Germany’s Accessibility Strengthening Act, has required many companies since 28 June 2025 to make certain products and digital services, such as online shops, accessible. ](https://www.insideuxdesign.com/en/glossar/bfsg) [ ### Card Sorting Card sorting is a research method in which people sort terms written on cards into groups. It shows you how they mentally organize content, so you can plan navigation that makes sense to them. ](https://www.insideuxdesign.com/en/glossar/card-sorting) [ ### Cognitive Load Cognitive load is the mental effort it takes to understand and use an interface. The less unnecessary thinking a design demands, the easier the actual task becomes. ](https://www.insideuxdesign.com/en/glossar/cognitive-load) [ ### Color Vision Deficiency A color vision deficiency means someone has a harder time telling certain colors apart than most people. The most common type is red-green deficiency. ](https://www.insideuxdesign.com/en/glossar/color-vision-deficiency) [ ### Contextual Inquiry Contextual inquiry is a research method where you observe and interview people in their real work environment. It shows you how they actually get tasks done, not just how they describe it. ](https://www.insideuxdesign.com/en/glossar/contextual-inquiry) [ ### Contrast Ratio The contrast ratio describes how much two colors differ in brightness, such as text and background. WCAG requires at least 4.5:1 for normal text. ](https://www.insideuxdesign.com/en/glossar/contrast-ratio)