- Users hate complexity.
When there are many commands or options to choose from
in an interface,
they often feel overwhelmed, don't know where to look,
and may end up ignoring relevant information.
One way to manage visual complexity
is progressive disclosure.
Progressive disclosure refers
to showing only a few available options among many
and hiding the rest under a menu, an accordion, tab,
or on a different page altogether.
Usually, the visible options are the most important
and likely to be relevant to the majority of users.
As users move on into a task
or become more familiar with the interface,
they can access other features
by performing an additional action:
clicking a button, opening a menu, expanding an accordion.
A simple example of progressive disclosure
is the "Replace" dialogue in Microsoft Word.
When the user is trying to replace a phrase
in a document with another,
they see a simple form with two fields: find and replace.
For most tasks, this dialogue will be enough.
However, some users occasionally
may have more sophisticated needs.
For example, they may want to replace whole words only;
the word power, but not the string power in powerful.
In that case, they could click the "More" button
for additional options.
If they had even more sophisticated needs
like replacing the font or the case of a string,
they could click once more on the "Format" or "Special" buttons
at a bottom of the expanded dialogue.
Granted, the word special
is not the best label for a button.
It'll be too much to show all these options in clear
to every single user.
Most people would not need them
and would spend too much time to figure out
what they're supposed to fill in or click
and what they should simply ignore.
Another typical application of progressive disclosure
is to show only information that is relevant
for the current step of a task.
For example, on an e-commerce checkout page,
the designer either could show all the steps
and the associated fields on the checkout page
or using progressive disclosure,
could collapse the steps under accordions.
If the latter,
the user could go through each step one at a time
without being distracted
by potentially irrelevant information.
This approach focuses the user on the current step
and is particularly helpful
when the process is very complex,
and seeing all the details of all the different steps
would be overwhelming.
Using progressive disclosure in multi-step tasks
has another important advantage
that is put to good use in dynamic forms and wizards.
If the flow has many branches that depend on user input,
users will only have to see those which are relevant
to their situation.
For example, if you had to enter payment information
and wanted to pay using Apple Pay,
it would be unnecessary
to see fields associated with credit cards.
Progressive disclosure applies to content too,
not just commands.
Many product pages like this one on arcteryx.com
contain only general product information.
Detailed specifications often can be accessed only
by expanding an accordion, in this case,
or in other cases, visiting a secondary page.
Most users who are browsing are unlikely
to need all the detailed information
such as the layering grading of the jacket
from the very beginning.
For them, seeing all that upfront could be overwhelming.
In sum, progressive disclosure is an important tool
in the arsenal of a UI designer.
It helps mitigate complexity
by hiding some of the commands
or content available to the users.
It does come with additional interaction cost.
Users must usually perform one or more actions
such as clicking a button to visit a new page
or expand an accordion
in order to reveal additional options available to them.
This cost pays off if the hidden options
are not needed by most users.