Progressive disclosure: reveal the next useful layer

Progressive disclosure: reveal the next useful layer

A concise visual guide to deciding what stays visible, what moves behind a clear route, and when staged disclosure fits a task better.

Complex tools force a tradeoff. People need enough power to handle unusual cases, while the first decision still needs to stay easy to scan. Progressive disclosure manages that tradeoff by placing common actions in the first view and specialized actions behind a clear, optional path. 1
The pattern has one governing question: What must someone decide next, and which information can wait until that decision is made?

Keep the first decision small

Progressive disclosure shows a small set of important options first, then reveals a larger set of specialized options when someone asks for them. The initial view carries the main task; the secondary view carries depth. NN/g describes this pattern as a way to support both power and simplicity, with learnability, efficiency, and error rate among the usability outcomes it aims to improve. 1
A first layer keeps common actions visible and a named path leads to specialized options
Self-made diagram based on NN/g's definition and usability criteria for progressive disclosure, plus the GOV.UK Details component guidance. 12
The first view also communicates priority. An option that appears immediately receives attention before an option that requires another step. A designer therefore makes a placement decision, not a visibility decision: the advanced option remains available, while the common path gets the shortest route.

Choose the split by task, not by visual preference

A short screen is useful only when the remaining path still supports the work. NN/g recommends task analysis, field studies, usage data, and observational usability testing to decide which features belong in the initial display. The same source warns that usage counts need interpretation: a page can receive many visits because people need it, or because they arrive there by mistake. 1
Use four checks before moving an option behind a control:
CheckKeep in the first layer when...Move to a secondary layer when...Failure to watch for
FrequencyThe action appears in the common task path.The action serves a specialized or rare case. 1A frequent action becomes a scavenger hunt.
Co-usePeople need to compare the option with other visible options.The option belongs to a distinct decision.A hidden control forces repeated opening and closing.
ExpectationThe label and control make the next step obvious.A short, descriptive trigger can name the detail. GOV.UK recommends clear link text for its Details component. 2"More" promises too little information.
AudienceMost users need the information to complete the task.Only some users need the information. GOV.UK positions its Details component for this case. 2The majority must open a hidden panel.
The co-use check prevents a common mistake. A designer may hide every advanced control to make the first view look calm, then split a group of options that people need to compare together. NN/g's hotel-reservation example makes the boundary concrete: room categories, prices, dates, and availability supported exploration when kept together, while address and payment details belonged to a later completion stage. 1
The split also needs evidence from both ends of the audience. Forsey, Leahy, Fields, Minocha, Attfield, and Snell proposed Progressive Disclosure through Layered Interfaces as a way to improve learnability and reduce training burden in human-machine interfaces. Their experimental study supported tentative conclusions, and differences between participants suggested that a customized approach may matter. 3
That qualification changes the design task. A layered interface is a hypothesis about how people will learn and work. Test the common path with newcomers, then test the secondary path with experienced users who need the specialized controls.

Progressive disclosure and staged disclosure solve different problems

Progressive disclosure and staged disclosure both distribute complexity across views, but their navigation logic differs. Progressive disclosure is hierarchical: people start with the core task and open detail when needed. Staged disclosure is linear: people move through a sequence because the task itself has steps. NN/g distinguishes the two patterns by stopping behavior, navigation, and the amount of backtracking each task needs. 1
Progressive disclosure adds optional depth, while staged disclosure divides a linear sequence
Self-made comparison diagram based on NN/g's distinction between progressive disclosure and staged disclosure. 1
A print dialog with a small set of common settings and a separate advanced-options view uses progressive disclosure. A tax application that collects identity, income, and review information in successive steps uses staged disclosure. The first example lets many people finish early; the second expects people to continue.
Staged disclosure suits steps with separate purposes and little interaction. Frequent back-and-forth signals that the sequence has separated information people need together. NN/g found this problem in booking flows when users had to compare room information across screens while also entering details that belonged later. 1
A useful choice rule follows: hide optional depth; sequence dependent stages; keep co-used information together.

Translate the rule across design work

The control changes with the medium, while the placement question stays stable: which information supports the next common decision?
DisciplineTask momentFirst layerSecondary layer
Graphic designA poster, map, or information graphic needs a quick route through dense content.The headline, primary route, legend, or first reading level.Definitions, exceptions, source notes, or extended detail placed behind a clear visual route.
UX/UI designA person completes a common action in a feature-rich tool.The controls needed for the common task.Advanced settings, edge-case controls, and technical detail behind a descriptive control.
ErgonomicsA worker performs a repeated task while attention stays on the work area.The control, cue, or instruction needed for the current action.Setup, calibration, and maintenance information placed where the worker can retrieve it without searching the whole environment.
Industrial designA person operates a product in its normal mode.The normal control sequence and the product state needed to continue.Service modes, configuration controls, and uncommon adjustments behind a deliberate physical or visual route.
The cross-discipline translation is a specification exercise. In a UI, "Advanced settings" can open a secondary panel. In a printed guide, a short section label can lead to a deeper page. In a product, a guarded control or service position can separate normal operation from maintenance. Each route must remain findable and its label must describe the destination.
GOV.UK's Details component captures the same boundary for web content: use it when only some people need the extra information, give the trigger short descriptive text, and keep the content visible when most people need it. The component page also records evidence that some people avoid opening the link and that voice-assist users may need specific interaction support. 2

Audit the path before shipping

A calm first view can conceal a broken second view. Run the audit from the real task, then inspect both the common and specialized paths.
Seven questions move from task and actions to frequency, co-use, pattern, label, and testing
Self-made audit flow based on NN/g's task-analysis and usability-testing guidance, Forsey et al.'s learnability framing, and GOV.UK's Details guidance. 123
  1. Name the task. Write the outcome a person needs at this moment.
  2. List the actions. Record the controls, information, and choices that support that outcome.
  3. Mark frequency. Separate common actions from specialized actions using observation, usage evidence, or task analysis.
  4. Mark co-use. Keep options together when people compare or adjust them in the same decision.
  5. Choose the pattern. Use optional depth for progressive disclosure and a distinct sequence for staged disclosure.
  6. Name the route. Make the trigger describe the information or control that appears next.
  7. Test both paths. Check whether newcomers complete the first task and experienced users find the specialized task without guesswork.
NN/g notes that designs with more than two disclosure levels often have low usability in practice. That observation is a warning about navigation cost, rather than a fixed limit. A third level may be justified by the task, but each additional level needs evidence that the structure remains understandable. 1
A complete disclosure specification can fit in one sentence: After [common task], show [frequent options]; reveal [specialized options] through [descriptive route], while keeping [co-used options] together; test [novice path] and [advanced path].
The result is smaller at the first decision and still usable at the next one. That is the standard progressive disclosure has to meet.

Este contenido lo produjo un canal automáticamente. Con una sola frase, Neodrop puede seguir produciendo para ti.

Contenido relacionado