Responsive Enabling

Best Practice: How to Implement Responsive

Enabling
The gradual process of enabling users to interact with certain user interface elements as and when
they need them is referred to as ‘responsive enabling’. Initially, the user is shown all of the
information and user interface elements, such as checkboxes, radio buttons, and input fields, in one
panel, window, or page, but only those items necessary for the first sub-component of the task are
enabled (i.e., active or ‘interactable’). As the user makes a selection, more options are enabled,
while other, redundant options are deactivated (but still visible). Implementation of this design
pattern can be improved by following these steps:

1 Arrange the different information and user interface elements necessary to complete a task
into one panel, window, or page.

2 Decide which elements are necessary for each component of a task or each sub-task. Place
the information and user interface elements relevant to a particular stage in a task close
together.

3 Connect items so that selections result in the activation of relevant user interface elements
and information and the disablement of irrelevant elements and information.

[Continued on next page]

INTERACTION-DESIGN.ORG

Creative Commons BY-SA license: You are free to edit and redistribute this template, even for commercial use, as long as you give credit to the Interaction Design Foundation. Also, if you remix,
transform, or build upon this template, you must distribute it under the same CC BY-SA license.
[Continued from previous page]

4 Distinguish enabled items from disabled options using color. When the user arrives, the
elements and information required to complete the first stage should be active, while all
other elements should be disabled. If there are a number of possible first stages, such as
choosing one of the 'Formatting' options or inputting a customized 'User Style Sheet' in the
example above, allow the user to select any one of these options from the moment they
arrive. Once again, when a selection has been made, disable the elements that are now
redundant.

5 Allow the user to reactivate disabled elements by selecting another user interface element.
For example, when the user has inputted a customized ‘user style sheet’, in the ‘Accessibility’
panel below, he or she can revert back to the other 'formatting' options by clicking one of the
checkboxes arranged vertically.

6 Ensure that there is a natural flow to the active and inactive elements, so as to coax the user
through the task(s) as quickly and efficiently as possible. User testing is a great way to
achieve this.

INTERACTION-DESIGN.ORG

Creative Commons BY-SA license: You are free to edit and redistribute this template, even for commercial use, as long as you give credit to the Interaction Design Foundation. Also, if you remix,
transform, or build upon this template, you must distribute it under the same CC BY-SA license.
Do you want to learn more?
Learn how to use this template to your best advantage in our online course UI Design Patterns for
Successful Software. Sign up for it today and learn how you can create user interfaces that work
just right if you haven’t already started the course.

UI Design Patterns for Successful Software

Beginner course
User interface (UI) design patterns can be a designer’s best friend, allowing you to build excellent
user experiences with structure and speed. When used in the wrong way, however, they can quickly
lead to experiences that confuse your users... and no-one wants that! Our course UI Design
Patterns for Successful Software will equip you with the knowledge required to master UI design
patterns and secure them as one of the best attributes in your designer’s toolkit. You’ll be guided
through best practices relating to content organization, navigation, data entry, and social
integration—all with detailed templates that you can use in your daily work. You’ll also analyze and
critique popular websites to see how the best of the best utilize UI design patterns to achieve great
UX design. If you found this template useful, then this course is a treasure trove of resources and
guidance that will continue to enhance your knowledge of UI design.

Learn more about this course

INTERACTION-DESIGN.ORG

Creative Commons BY-SA license: You are free to edit and redistribute this template, even for commercial use, as long as you give credit to the Interaction Design Foundation. Also, if you remix,
transform, or build upon this template, you must distribute it under the same CC BY-SA license.
How to advance your career
with our online courses

Take online courses by Get a Course Certificate. Advance your career.

industry experts.
Your answers are graded by Use your new skills in your
Lessons are self-paced so
experts, not machines. Get existing job or to get a new
you'll never be late for class
an industry-recognized job in UX design. Get help
or miss a deadline.
Course Certificate to prove from our community.
your skills.

See all our courses

About the Interaction Design Foundation

With over 66,000 alumni, the Interaction Design Foundation is the biggest design school globally.
Industry leaders such as IBM and Adobe train their teams with our courses, and universities such
as MIT and the University of Cambridge include our courses in their curricula. Our online courses
are taught by industry experts and cover the entire spectrum of UX design from beginner to
advanced. We give you industry-recognized course certificates to advance your career. Since 2002,
we’ve put together the world’s biggest and most authoritative library of open-source UX Design
literature created by such noted authors as Don Norman and Clayton Christensen.

INTERACTION-DESIGN.ORG

Creative Commons BY-SA license: You are free to edit and redistribute this template, even for commercial use, as long as you give credit to the Interaction Design Foundation. Also, if you remix,
transform, or build upon this template, you must distribute it under the same CC BY-SA license.