Progressive Disclosure
Show the common case first and reveal the rest on request, so complexity is available without being present.
Definition
A structuring principle that separates an interface into an initial view containing what most users need most of the time, and secondary views containing the rest. The secondary layer stays reachable, discoverable and complete.
Expert heuristic. A review criterion developed by practitioners. Useful and widely taught, but evaluated by judgement rather than measurement.
On this plate
Reach for this when
- Usage of a control is strongly skewed towards one case.
- A screen has grown past what can be scanned.
- Optional detail is genuinely optional.
Common mistakes
- Hiding required fields.
- Labels that describe the level rather than the content.
- Nesting disclosures inside disclosures.
- Labelling the disclosure Advanced, which tells people who need it that they should not be looking there.
Two conditions make it work
First, the split has to be right. You need evidence about what the common case actually is, otherwise you have hidden the thing most people came for. Analytics and task frequency data are the inputs, not intuition.
Second, the hidden layer has to be discoverable. 'Advanced' as a label tells the user nothing about what is inside. Naming the content, such as 'Shipping and tax options', lets them decide whether to open it.
Forms this principle takes
| Form | Best for | Watch out for |
|---|---|---|
| Accordion or disclosure | Optional detail on one page | Hiding required fields, which breaks form completion. |
| Show more on truncated text | Long descriptions | Truncating before the useful part of the sentence. |
| Tabs | Parallel content of similar importance | Content users need to compare, which tabs prevent. |
| Multi-step wizard | Long linear tasks | Trapping users. Always allow back and review. |
| Detail panel or drawer | Inspecting one item from a list | Losing list context, and mobile behaviour. |
| Overflow menu | Rare actions | Burying an action a segment uses constantly. |
Hiding the right things
Do
- Hide what most people never need, and keep it findable by search.
- Label the disclosure with what is inside it, not with More.
- Keep the state open once the reader has opened it, within the session.
- Show a summary of what is hidden when it holds a value that has been set.
Do not
- Hide something required to complete the task.
- Nest disclosures inside disclosures.
- Collapse a section that contains a validation error.
- Use it to make a screen look shorter while leaving the work the same length.
In practice
- i.
Optional shipping instructions
CheckoutA collapsed 'Add delivery instructions' link keeps checkout short for the majority while keeping the capability one click away for the minority who need it.
- ii.
Advanced search
SearchA single query field with an expandable set of filters serves both the person typing two words and the person constructing a precise query, without making the first pay for the second.
- iii.
The error inside the collapsed section
The common bugA form failed to submit, and the invalid field sat inside a section that was closed by default. The reader saw a rejection with no visible cause, which is the worst outcome available from a good principle.
Local chart
PRIN·003 · Region I · Grid B2
This entry and the entries it is stated to connect with. Each line is labelled with what the connection means.
Sources
Where a source establishes something narrower than the popular reading of it, the note says so.
- [1]
J. Nielsen, Nielsen Norman Group, 2006
Continue from here
Each link says what the connection is, so you can tell a principle from an alternative from a thing people mix this up with.
Applies when you are designing
Why this works
The reasoning this entry rests on.
- Choice OverloadPSY·002 · Psychology
- Cognitive LoadPSY·001 · Psychology
Disclosure works because working memory is the constraint, not screen space.
- Decision FatiguePSY·010 · Psychology
Applied through
Where this shows up as a concrete interface decision.
- AccordionCMP·017 · Component
- TabsCMP·016 · Component
- FilteringPAT·004 · Pattern
- Settings and PreferencesPAT·025 · Pattern
Alternative approach
A different answer to the same problem, with a different cost.
- Multi-Step FlowsPAT·016 · Pattern
One long form with disclosure, or several short steps. The choice turns on whether the parts are genuinely sequential.
Check your work
Review passes that test whether this was done properly.
- Form UX ChecklistCHK·001 · Checklist
Short definition
The one-paragraph version, for when that is all you need.
- Progressive DisclosureTERM·016 · Term
Related concept
Connected closely enough to change how you apply this.
- Aesthetic and Minimalist DesignHEUR·008 · Heuristic
- Help and DocumentationHEUR·010 · Heuristic
- Hick's LawLAW·001 · Law
- Miller's LawLAW·004 · Law
- Tesler's LawLAW·005 · Law
- DiscoverabilityPRIN·005 · Principle
- Occam's RazorPRIN·001 · Principle
- Pareto PrinciplePRIN·002 · Principle