Progressive Disclosure

Progressive Disclosure is used to hide unnecessary information and reveal it when it becomes relevant. This makes the screen less cluttered so the user can accomplish complex tasks through smaller, intuitive steps.

Web

When to Use

  • There is content that can be hidden because it is not critical to the user’s task.
  • You want to de-clutter the interface.
  • You want to simplify a complex process.
  • There are options dependent upon a prior selection.
  • All options are not critical to see at first.

Do Not

  • Hide an action if the action can be performed without requiring any additional input.
  • Hide primary actions on the page.
  • Reveal content that is not contextually relevant to the user’s input.
  • Nest too many layers.

Appearance & Behavior

Forms

Sometimes an interaction with a form element such as a checkbox triggers a new item or section to appear on the page. For example, choosing a product for purchase might subsequently reveal add-on options for that product.

progressive disclosure of related options in a form

Other times, the user needs to click on an explicit control to show or hide content.

Accordion

An Accordion consists of a list of groupings and each one can be individually expanded or collapsed to show/hide the content contained within. Multiple Accordion groupings can be open simultaneously.

Example of accordian with 1 section open

 

Show More link

Clicking the Show More control reveals the content beneath it by sliding it down out of the control and changing the label to ‘Show Less’. Clicking the Show Less control hides the content by sliding it up and changing the label to ‘Show More’.

controls-show-more-01

States shown: disabled / default / hover

 

Show More in a List

Progressive Disclosure can also be used to make a long list more manageable by showing a limited amount of content. Clicking the Show More control slides the additional content beneath it with a Show Less control anchored at the bottom.

Traditionally, the controls follow standard link colors but can be modified according to the page context to ensure they are visible.

Default/Hover/Active

Show more/Show less

If the user is browsing through a very long list, the content can be chunked to reveal one step at a time. ‘Show More’ continues to appear at the bottom of each new section.  ‘Show Less’ does not appear until all content has been revealed.

Table Groups

Table rows can also be grouped into distinct categories that can be expanded and collapsed. Categories appear as row headers within the table and have a unique visual treatment. Multiple categories may be expanded at a time.

table-grouped
© Intuit 2016 | Terms of use