Progressive disclosure UX shows the information and controls people need first, then lets them reveal more when the task calls for it. A notification settings screen can show delivery frequency and a preview of what will change, with an “Advanced delivery settings” control for timezone and retry options. The screen stays easier to scan while the less common settings remain available from the same place.
Decide what belongs on the first screen
Start with the decision someone needs to make, then list the information they need to make it. For an email digest, they need to know whether delivery is enabled, how often messages arrive, and where the messages go. If turning it on shares data or changes a price, explain that consequence alongside the choice. Jakob Nielsen’s original explanation describes placing the most important options first and revealing specialized options on demand.
Frequency is only one input. An option may be rare but consequential, such as stopping all delivery or cancelling a subscription. Give people a direct way to reach it at the point they need it. For a related example, see our accessible form design checklist for how labels, instructions and errors help people act on the information in front of them.
Example: Simplify a notification panel
Suppose a team puts everything on one screen: email address, schedule, local timezone, retry limits, delivery format and filters. The person who only wants a weekly digest must read six controls to find one. The specialist who wants to change the timezone sees every setting but has to infer which ones affect scheduling.
- Always visible: Delivery toggle, recipient, frequency and a summary such as “Weekly on Monday at 9:00 a.m. Europe/Paris.”
- Visible on request: A button labeled “Advanced delivery settings” opens a section with the timezone, delivery format and filters.
- Visible after changes: Update the schedule summary even if the advanced section is collapsed. Show which fields need attention if a save fails.
The summary makes a consequential advanced choice visible without adding every control to the main view. It also helps an experienced user decide whether there is anything to change. If several settings matter together, group them under the same label rather than placing each behind a separate reveal control.
Choose a control that fits the task
Use a disclosure button when a small section can open in place. It keeps nearby information in view and makes the relationship between control and content easy to see. A dedicated page can work for a collection of settings people revisit or link to directly. Keep the route back to the parent clear and show the relevant summary there.
Use a native button if implementing a custom disclosure. It should work with Enter and Space and expose whether it is expanded through aria-expanded. Use aria-controls if you need to identify the controlled region. Check that the collapsed controls are out of the keyboard tab sequence and that the next tab stop makes sense when the section opens. The W3C disclosure pattern documents the expected keyboard behavior and state.
Plan for hidden errors and retained values
A person can edit a timezone, collapse the section and then click Save. Decide whether collapsing keeps that edit. If values are retained, show the effective schedule in the visible summary. If validation finds an error in a collapsed section, make the problem visible and provide a direct route to the field. Opening the section and linking to the error from a summary can be easier to follow than showing a generic message above the form.
Also think about returning users. An interface can remember a preference to keep advanced controls open if the screen is used repeatedly. A shared link can land on the relevant settings group when that helps support. In both cases the person should be able to tell where they are and return to the primary task.
Test the basic and advanced paths
Give participants tasks without naming the control you expect them to click. Ask one person to switch to a weekly digest and another to make the digest arrive at 9 a.m. in a different timezone. Notice whether each person can explain the schedule before saving. Record missed controls, unnecessary expansions and steps where people reverse direction.
Repeat the same tasks at a narrow viewport and with the keyboard. Use a screen reader to check the control label and the expanded state. Then introduce a field error while its section is closed and ask the participant to recover. If people repeatedly miss the advanced section, try a clearer label, a more descriptive summary or moving the setting closer to the task. If everyone opens it on their first visit, consider showing the relevant control by default.
Review the interface again whenever the default behavior changes. A setting that used to be rare can become central when the product serves a new audience. Keep the first view aligned with the decisions people make today, and give the other controls a predictable place to live.
