Go to Quince Home

Responsive Enabling

 

Example of the Responsive Enabling UX pattern.

Problem

Drawing attention to information that is unnecessary for a given task at a specific point in time can distract users.

Solution

Show all information and UI elements that users may need to interact with, but initially only enable those elements that are necessary for the initial step. As selections are made or as the context changes, subsequently enable other elements as they become relevant.

Context

  • Information or sub-tasks will be provided to users in a step-by-step manner, or users will be selecting objects that change the context of an activity.
  • 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 as enabled.
  • As opposed to the Responsive Disclosure pattern which only shows what is necessary at a given point in time, it would be confusing to hide certain interface elements.

Rationale

In order to keep the user focused on a given step or task and to make it clear what actions are possible, it can be useful to only enable (e.g. visually highlight, and allow interaction with) information and UI elements related to the current task. Large numbers of elements to interact with can seem daunting to users. Even if only some of the visible actions are relevant, a user will likely notice the number of UI elements before coming to the understanding that only some of them are relevant.

A benefit of this pattern is that users are prevented from trying actions that would not make sense for a given situation, thereby preventing many errors before they occur.

You may also want to consider using the Responsive Disclosure pattern which initially only shows information and UI elements that are relevant to the first step in a process, and then only makes visible additional elements as relevant.

Implementation

One implementation of this pattern is to make visible all information and UI elements, but only enable those elements that are relevant for the current step of a larger activity. “Disabling” of elements can be accomplished through using visual design principles that reduce the prominence of the elements (e.g. graying out the area around the elements) and disabling the interactivity of action oriented elements (e.g. buttons can’t be clicked when disabled).

A second implementation that has more to do with context than a step-wise process (as in the first implementation above), focuses on supporting activity based on what a user has selected, or what type of object is currently being modified (e.g. a picture versus a block of text). In this case, you would enable features that are relevant to the type of object the user is interacting with. Others patterns such as the Ribbon pattern can be used to group features by relevance to objects or typical activities to increase the understanding of why some features become disabled/enabled. For example, if features related to pictures are enabled when a picture is selected, it can make sense to have all of these features shown together in a box or an area labeled something like “format picture” or “picture effects.”

Examples

The primary example for this pattern comes from Matlab. All options are visible on the screen, but many of them are initially disabled, allowing the user to focus on contextually relevant options first.

http://quince.infragistics.com/114a

Example of the Responsive Enabling UX Pattern Example of the Responsive Enabling UX Pattern

This example is taken from the Mac OS X System Preferences. If the user chooses to “Show the date and time,” many other related, and now necessary choices need to be made; only then are they enabled. In addition, the visual design choice here is to indent the information that is initially disabled to reduce its visual prominence and show that it is relevant only within the context of showing the date and time.

http://quince.infragistics.com/118o

Example of the Responsive Enabling UX Pattern Example of the Responsive Enabling UX Pattern

This example from the FireFox Connection Settings shows another typical use of this pattern, similar to the Mac OS X example.

http://quince.infragistics.com/11fs

Example of the Responsive Enabling UX Pattern Example of the Responsive Enabling UX Pattern

The navigation system used in Toyota's Prius and Lexus cars uses a variant of Responsive Enabling, which is sometimes called “Responsive Disabling.” In this case, as a user enters a destination address, information that no longer matches possible real world addresses is progressively disabled. This guides the user along, by only showing information that could actually be selected (i.e. preventing potential errors by not allowing users to spell streets that don’t exist).

http://quince.infragistics.com/11b0

Example of the Responsive Enabling UX Pattern Example of the Responsive Enabling UX Pattern

Sources

Jennifer Tidwell, Responsive Enabling

Bruce Tognazzini, 10 Most Wanted Design Bugs