Progressive Disclosure UX: how to design for a wider audience

Progressive disclosure UX helps us to build global design solutions. Learn how to apply this design pattern to your web and mobile design process here

With user needs now at the core of product strategy, the latest challenge for designers is building digital experiences that reach a wider user base. But despite the surge in design tools that enable designers to create impressive interfaces with sophisticated interactions, designing right by different users can be tough.

In order to keep your design process on track, remember what your goal is: to design interfaces that draw the user in. One way to do this is through progressive disclosure. This design pattern intends to reduce UI clutter, confusion and cognitive workload so that the user’s focus remains on the interface.

In this post we will explore how progressive disclosure UX can help us to design interfaces that are simple, responsive and just what the user needs.

What is progressive disclosure UX?

Progressive disclosure UX is a technique and design pattern used in UX design to make user interfaces easier for users to interpret. It involves sequencing information and actions across several screens so as not to overwhelm the user with reams of content all in one go. Progressive disclosure UI examples include tooltips, labels, keyword shortcuts, expandable text and instructional overlay.

Here’s an example of progressive disclosure in a mobile app walkthrough, made by Justinmind.

Staged disclosure – variants of progressive disclosure UX

Another type of progressive disclosure UX is staged disclosure. This is when users are shown a step-by-step guide in a linear fashion. A classic example of this is the wizard, a UI feature to help users complete an activity such as creating a new Justinmind prototype.

 

When to design with progressive disclosure in your UX design process

Progressive disclosure UX can be a helpful way to guide your users through your interface. But it’s not always the answer.

User research is an important aspect of the UX design process and will help you get to know your target users and understand which methods you should use to reach them.

To help you decide when to apply progressive disclosure to your UX design, first consider who you want to reach with your content. Here are some user research techniques to try out:

• User personas: discover who your users are, what they do, what their objectives/frustrations are.
• Scenarios: visualize why users are looking to use your sire or app in context by creating a user story, or scenario
• Customer journey map: a graphical representation how your each of users interacts with your UI

Learn more about these techniques and how you can use them in your UX design process here.

Beyond progressive disclosure in the design process

Remember that it’s essential to use user-centered principles throughout your design process, not just at the beginning. Regardless of whether you use progressive disclosure UX or not, make sure that you are always in touch with your users. You can do so in the following ways:

• Use social media: discover the expectations of your target users
• Speak with customer care or sales representatives as they have the most contact with users and can tell you what they ask for, and when they need it.
• Look at your metrics: what’s the most popular content? What are the most visited questions in your FAQs? Whatever the answer, this is the content that should be shown first.
• Test: as always, data can provide you with the answers to your hypothesis. Learn more about testing in your design process here.

How Justinmind can help you implement progressive disclosure UX in your web and mobile prototypes

With Justinmind, you can easily use the progressive disclosure technique in your UX design process.

Using the right combination of UI elements and interactive features will give your users the feedback they need to navigate your UI. Justinmind has a wide range of pixel-perfect UI widgets to choose from. And its interactive features are what makes it a leading prototyping tool for web and mobile.

Here are some ways you can guide your users through your UI prototypes:

• Display content dynamically using dynamic panels, variables and conditions. This is a good way to apply progressive disclosure, and show form fields as the user completes them.
• Create effects and animations to simulate different progressions in your web or app prototype.
• Expand and collapse content, in order to selectively display optional information.
• Design a product walk through, a very useful resource for helping your newer users.

• Include dialogs and pop-ups to interact with your users offering additional information.
• Create scenarios to model your user cases and navigation flows.

So what are you waiting for? Download Justinmind nowand start using progressive disclosure UX techniques in your prototypes now!