Responsive Disclosure

Example of the Responsive Disclosure UX pattern.

Problem

Information that is unnecessary for a given task at a specific point in time can distract users.

Solution

Initially only show users information and elements that are necessary, and only show potentially needed information as needed.

Context

Information or sub-tasks will be provided to users in a step-by-step manner.
Information that will be provided to users at a given step may differ based on responses or interactions during previous steps.
All of the information that the user may need to see during the complete process may seem overwhelming if shown initially.

Rationale

In order to keep the user focused on a given step or task, it can be useful to only show information and UI elements related to only the current task. Long forms and lists of steps may seem daunting to a user. Even if it will not be necessary to fill out all of an overwhelmingly long form, a user will likely see the length of the form or the number of UI elements before coming to the understanding that only relevant portions must be completed.

Keep in mind that one risk with this is that users may feel mislead if they start to feel like the overall task is taking longer to compete than they would have initially agreed to. Therefore, in some cases it may be useful to provide an estimate of total completion time, or an estimate of how many questions will need to be answered on average. In this case, you may want to consider using the Responsive Enabling pattern which initially shows all possible elements, but only enables them as necessary.

Implementation

Initially only show information and UI elements that are absolutely necessary for completing the first step in the overall process. When a user makes a selection, or completes an action that makes currently invisible information or UI elements relevant, only then makes these additional items visible.

Usually, you should leave previously completed information visible, in order to provide a coherent ongoing context. In addition, this enables the user to be able to go back and change a previous selection.

Be careful of using this pattern in cases where users are already very familiar with an existing interface, or layout; they may be used to the flow of a given process, and it can actually backfire and confuse them if you now change to only showing portions of a well known process.

Examples

The primary example for this pattern is taken from TurboTax. Only first time users are shown options such as creating a new user id.

http://quince.infragistics.com/1156

Example of the Responsive Disclosure UX Pattern

This example is taken from an internal application at Northwestern Mutual. Initially only the first group of checkboxes is shown. The second and third boxes are only progressively shown as the user makes selections.

http://quince.infragistics.com/10w7

Example of the Responsive Disclosure UX Pattern