Morten A. Giraffe

Chapter II / Make it usable

Progressive Disclosure: Reveal Complexity When It Becomes Useful

Keep the primary path calm while making advanced capability and material consequences easy to find.

All 18 rules4 min read
01Scenario

Start with the moment where the interface asks too much.

One settings screen exposes every option to every user. Another checkout hides renewal terms behind a tiny “More.” Both claim simplicity. Only one kind is honest. The first overloads everyone with rare choices. The second removes information the visitor needs before committing.

Progressive disclosure protects the primary task from unnecessary complexity while keeping advanced capability discoverable. It becomes harmful when it conceals cost, consequence, consent, or essential requirements.

02Interface Lab

Show the failure and the correction.

The lab uses controlled markup instead of raster text so the lesson stays legible, accessible, and easy to revise.

  1. Step 1Everything is visibleThe page feels harder than the task.
  2. Step 2Everything is hiddenSimplicity becomes concealment.
  3. Step 3The door is vagueDiscoverability suffers.
  4. Step 4Disclosure is classifiedThe path stays calm without hiding responsibility.

Corrected path

Classify information

Sort details by timing and consequence before designing the interaction.

03Principle

Make the useful path easier.

Now, soon, rarely, must know

Immediate decisions belong in view. Conditional details can appear after intent. Rare controls can move deeper. Anything material to commitment must appear before action.

Label the door

“Advanced” is often lazy. A disclosure label should tell the visitor what kind of detail, control, or consequence they will find.

Preserve state and place

Expanding and collapsing should not discard work, move focus unpredictably, or leave keyboard users behind.

04Rebuild

Turn critique into a usable rule.

Remove

  • Dense settings by default

    Every option appears even when only a few are needed for first success.

  • Concealed checkout terms

    Cost, renewal, cancellation, or consent details are hidden to keep the screen attractive.

  • Vague expansion labels

    The visitor has to open every panel to know whether it contains the right information.

Build

  • Classify information

    Sort details by timing and consequence before designing the interaction.

  • Use descriptive controls

    Make the collapsed label carry enough meaning to support discovery.

  • Keep material truth visible

    Terms and consequences belong near the commitment, not behind decorative minimalism.

05Field Test

Use it on a real page.

Give a first-time user a primary task and an advanced task.

  1. Step 1

    Observe whether the primary path stays calm.

  2. Step 2

    Ask them to find an advanced feature.

  3. Step 3

    Ask them to explain material consequences before commitment.

  4. Step 4

    Check whether expanding preserves state and focus.

Evidence
Use discovery time, explanation accuracy, and keyboard notes.
Pass
Complexity is findable when needed and material facts are visible before action.
Fail
The page either overwhelms everyone or hides what people must know.
06Use By Role

The rule should help the person making the next decision.

Business owner

Ask whether hidden information reduces effort or simply reduces accountability.

Designer

Design collapsed and expanded states with focus, state preservation, and useful labels.

Developer

Use native disclosure semantics when possible and avoid resetting hidden form state.

QA

Test with keyboard, reduced motion, back navigation, and first-time discovery tasks.

Expert tools may keep dense controls visible for speed. Repeated disclosure can slow frequent work; compact modes, saved preferences, and shortcuts may be more honest.

07Checklist And FAQ

Check the page, then answer the doubt.

  • Immediate choices are visible.
  • Rare controls are discoverable.
  • Material terms are not hidden.
  • Disclosure labels are specific.
  • Expanded state preserves work.
  • Keyboard and focus behavior remain logical.
Does progressive disclosure hurt discoverability?
It can. Labels, placement, memory, and task timing decide whether disclosure helps or hides.
What information should never be hidden?
Costs, consequences, consent, requirements, and constraints that affect commitment should be visible before action.
When should advanced settings be hidden?
When they are rare for the current task and the route to them is clearly labelled and state-safe.