Home > UX Design - Research and Insights > 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

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.

Design for everyone is design for no one. — @dtm_tweets Click To Tweet

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.

progressive-disclosure-ux-instructional- overlay

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

progressive-disclosure-UX-mobile-app-prototype-walkthrough


Download Justinmind now and boost your UX design with progressive disclosure

DOWNLOAD FREE


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.

progressive-disclosure-ux-wizard

 

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. Learn how to create your own user persona template here.
  • 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:

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

Daniela is Content Editor at JustInMind

Add comment

Your email address will not be published. Required fields are marked *

Download Free