One of the most common challenges you'll face in UX design is deciding which information or functionality should be shown or hidden. This often turns into big debates between designers, engineers, and product managers.
Designer: Hick's Law says if we show too much information at once, we'll increase the time it takes for our users to accomplish their tasks!
Engineer: We've created all of this cool functionality, we should make sure the user can access it right away!
PM: We just introduced this new feature. If we hide any information, our customers won't know it exists!
The Problem
As more use cases and datasets are supported, prioritizing the information and actions on a page gets trickier. Plus, choosing the best UI pattern for showing secondary information becomes a big discussion.
Use Case Examples:
- Searching through a list of issues to find a support ticket to confirm which customer it belongs to in order to update their billing information
- Searching through a list of accounts to find a user in order to map their account to a different department within their region
- Searching through a list of businesses to find a specific customer in order to review their service contract's renewal date
The Solution
Prioritizing information and functionality doesn't need to be exhausting. In most cases, you can default to the principle of Progressive Disclosure, a strategy for managing complexity where only necessary or user-requested information is displayed at any given time.
It was first introduced in 1983 by IBM interface specialists John M. Carroll and Mary Rosson who discovered that hiding advanced functionality early on led to the increased success of its use.
3 Steps for Using Progressive Disclosure:
- Write down the shared primary needs of your user types.
- Display the information and functionality necessary to support those primary needs, and hide the rest behind an interaction.
- Choose one of the 6 interaction patterns listed below to reveal the secondary information to the user.
Drilldown Patterns
The anatomy of a drilldown pattern consists of three parts:
- Trigger. This is the behavior that starts the pattern such as a button click or a mouse hover.
- Container. This is the block containing the secondary information or functionality, such as a modal or popup.
- Contextual Reference. This is a visual reference to the "parent" view or data, such as a transparent overlay or a breadcrumb. Its purpose is to reference the primary information. This allows the user to retain context about where they came from without having to hold it in their active memory (a limited resource!).
Pattern #1: Modals
A modal is a small or medium-sized container that instantly appears on top of the initial view. It is best used for displaying detail summaries or low-to-medium complexity workflows, like searching through a list of users to add to the initial view.
Pattern #2: Sheets
A sheet is a large container that slides up or down on top of the initial view. It is best used for displaying rich details of datasets or medium-to-high complexity workflows, like a multi-step e-mail marketing campaign.
Pattern #3: Drawers
A drawer is a large container that slides out from left or right on top of the initial view. Similar to a sheet, it is best used for displaying rich details of datasets or medium-to-high complexity workflows, like navigating an image library to find or upload a new media file.
Pattern #4: Nested Rows
A nested row is a container that expands out from a table row. It is best used for displaying additional details about the data in its parent row, like invoice details from a customer purchase order.
Pattern #5: Popover
A popover is a small or medium-sized container that appears on top of the initial view relative to its trigger. It is best used for displaying detailed summaries and secondary functions, like filter options for a table view.
Pattern #6: Inline Column
An inline column is a container that appears inline next to the parent container on a page. It is best used to display rich details of datasets or medium-to-high complexity workflows, like a comments section related to a support ticket.
