Progressive Disclosure Examples to Simplify Complex SaaS Products

To avoid confusing your customers, it’s important to simplify your SaaS product. Progressive disclosure can help achieve this, and we’ve gathered some examples to guide you in implementing it effectively for your users.

This article will show progressive disclosure examples you can use in user onboarding to drive product adoption and some best practices for your progressive disclosure strategy.

TL;DR

• Progressive disclosure is a design pattern that gradually reveals information depending on the user’s need.
• The benefits of progressive disclosure are to improve customer experiences for new users, simplify the user interface, create a better understanding of initial and secondary features, and reduce the learning curve.
• Some examples of progressive disclosure are:
• Empty states help to prompt a user to take action.
• You can use a sign-up flow to guide users through a few core features before giving them full access to the product.
• Favor multiple screens over one page to reduce the user’s cognitive load. You can use progress bars to show different actions.
• Use multi-layer menus to keep the user interface clean by showing only the essentials. But still giving access to important features of your product.
• Interactive guides and step-by-step guides can lead users to learn in little incremental steps to prevent any feelings of overwhelm.
• Checklists help users adopt features making them a great progressive disclosure technique.
• You can use tooltips to display additional information and highlight a feature without overloading the UI.
• Grouping and categorizing content in resource centers help users find the information they need more easily.
• Segmenting users with similar jobs to be done helps to use different progressive disclosure strategies based on their needs.
• For new user onboarding, give them only the options to learn core and secondary features so you can show only the information that will increase user adoption.
• Use multiple secondary displays to show step-by-step options for focusing the user’s attention.
• Want a great way of managing your progressive disclosure techniques? Userpilot can assist with your product. Get a Userpilot demo.

What is progressive disclosure?

Progressive disclosure is a design pattern that gradually exposes users to information over multiple screens. It aims to prevent overwhelm as users progress through your product.

Benefits of progressive disclosure

For many reasons, progressive disclosure is a great design process to implement in your product user interfaces.

Here are some of them:

• Improve the customer experience for novice users – Learning a new product can be overwhelming, especially if there are a number of core features that users can use. Progressive disclosure can help slow down this learning and ultimately improve the first-time experience with new users.
• Cleaner user interface – Progressive disclosure follows simple principles suggested by interaction designers to adopt cleaner interfaces that only reveal the information a user needs.
• A better understanding of core and secondary features – Progressive disclosure can help to isolate your primary or secondary features.
• Reduce the learning curve – Teaching your user how to use your product through small steps using progressive disclosure can help reduce the learning curve.
• Less error prone – It will also help them be less error prone because of their increased knowledge of your product.

Examples of progressive disclosure used in SaaS

Examples are a great way to get inspiration on how to use progressive disclosure in your SaaS. Here are five ways to help create a better experience for your users.

Empty states that prompt action

An empty state is the technical design term for a screen inside your product that is almost completely blank. Empty states occur most commonly when users have just signed up to a new platform, or when there is some kind of error message.

Rather than leaving it blank, which could confuse users and potentially lead them away from your SaaS, use empty states to prompt action.

Crowdfire makes good use of its blank state by showing the next step a user should take by selecting topics of interest.

A sign-up flow that walks users through getting started

A sign-up flow can also collect needed data, so when users enter the app, the interface matches their goals.

A sign-up flow helps walk the user through using the app and configure any settings needed, rather than throwing a user head first into your SaaS without a clue how they can do anything.

Asana is a classic example of a great sign-up flow which makes for a good progressive disclosure.

Multiple screens vs a one-page overload

Cramping everything your users need on one screen can overwhelm them. A better approach is to split things up over multiple screens. These reductions of options on one screen helps to reduce the user’s cognitive load.

You can use multi-screens with progress bars to show different actions. It could be for your sign-up flows or when configuring any advanced settings.

Userpilot uses a secondary screen when you set up a checklist. Users can reveal different screens by selecting different buttons, making multiple options manageable.

Multi-layer menus

Multi-layer menus can help you with progressive disclosure. It helps to reduce the number of things on the user interface so users can focus on what they are doing with as few distractions as possible.

The dropdown menu shows the essentials with simple buttons that, when clicked, reveal the next level of options for a user.

Loom uses this as part of its progressive disclosure strategy. When you want to edit your video, you interact with a widget.

The widget then shows the product’s core features, so the more advanced options are progressively disclosed. But are a click away when a user needs them.

Step-by-step interactive guides and wizards

Another example of progressive disclosure is using step-by-step interactive guides and wizards.

You can also hide or blur part of the options you’re showing a user to focus their attention on the most important details.

Userpilot uses this technique for part of its Hubspot integration configuration. It uses short guiding messages while hiding secondary steps to prevent users from feeling overwhelmed when completing the setup.

How to apply progressive disclosure in your onboarding process to drive product adoption?

Progressive disclosure is a great technique to help you drive product adoption in your onboarding process. Here are three ways you can achieve this.

Use checklists for progressive guidance

Checklists are a great way for simplifying complexity progressive disclosure. They can break down features to help them get started without any overwhelm.

During the onboarding, you can use a checklist where each point will open a new screen and guide them through your core features. Moreover, showing users one step at a time will help increase user adoption.

Use tooltips as part of interaction design

Tooltips are an essential tool for progressive disclosure. As part of the onboarding, you can trigger them for new users to show them around your SaaS.

You can use tooltips to showcase any of your SaaS features and provide additional information without overloading the UI with tons of information.

Categorize and group content in resource centers

A knowledge base is where you store resources for a user and where they can get answers themselves on how to get the most out of the product.

One of the concerns with a resource center is that if you have a complex SaaS, they could be hundreds of articles for them to get their heads around. As part of progressive disclosure, you want to make accessing this information as easy as possible.

One of the best practices of resource centers is categorizing and grouping content together. It lets users only be a handful of clicks away from accessing the information they need, making things simple.

A side benefit of a resource center is it can help reduce customer support tickets, as users can self-serve answers.

Best practices when implementing a progressive disclosure strategy

It’s clear now that progressive disclosure is a good way of making things simple for users when going through your SaaS. To ensure that you succeed in implementing your progressive disclosure strategy, here are some best practices you should follow.

Segment users with similar JTBDs

Each user has their own goals they want to complete with your product. Knowing what goals they want to complete will help you with your progressive disclosure strategy.

One way to ensure you are dealing with each user’s needs is by segmenting them. Segmenting your users by their jobs to be done (which you can learn more about via in-app surveys) lets you use a different progressive disclosure strategy for each segment.

There is no point showing advanced settings to a new user when they’ve only just joined your SaaS. Each job to be done can have different core features.

With segmentation, you can make sure that you are gradually letting new users discover new features when they are ready for them. And you can even customize the information in a resource center based on their goals to reduce confusion.

Prioritize core and secondary features

Some SaaS products can be complex and have a range of features. Introducing them all at once can really stop new users in their tracks.

A best practice of progressive disclosure is limiting the options presented to a user during onboarding. Progressive disclosure defers advanced or not often-used features, so you can limit to only show users the core and secondary features.

In the example below, Userpilot shows three choices when beginning a flow for an in-app experience, so it’s clearer to a user what they should do next.

Once the user has chosen one of the options, you can show them the available choices of only that feature. In the Userpilot examples, if the user chooses a flow, they are presented with the option to use modal, slideouts, tooltips, and driven actions.

Limiting what you show users based on what they decided helps users to progress in using your onboarding rather than making them think about what they should do next from a long list of options.

Create effective onboarding flows with branched experiences

Rather than showing a generic onboarding flow, which may not be relevant to a user and might be super long, you should offer branched experiences.

You can do this by showing multiple screens that have step-by-step options. When users select a certain response, it takes them down a path relevant to whatever they choose.

ConvertKit does this in their sign-up flow.

They ask a user where they are joining from. And depending on what they choose, a different screen is shown to them.

Set goals to see how new users use the product

Setting goals can help you with your progressive disclosure strategy. You can set micro or macro goals that will match your different segment’s goals so you can see how your users engage and adopt features.

These goals will help you see if users haven’t discovered or adopted any features. You can identify any friction with granular event tracking by being able to spot patterns in usage.

With this analytical data, you can segment and show them tutorials or highlight unused features with tooltips.

Prototype and A/B test for improvements based on feedback

Testing your progressive disclosure strategy and getting feedback can show you how well they work.

You can create simple prototypes for your ideas and A/B test them for user usability. You can ask the user to submit a friction log so you can spot any friction points and how you can make improvements.

You can also use experience surveys to collect feedback on your prototypes to get further information on how to improve.

Conclusion

Progressive disclosure will help you make your SaaS more consumable for users by giving them bite-size information to stop them from getting overwhelmed. And these progressive disclosure examples will help to improve your user’s experience.

Userpilot is a great tool to get you started with a progressive disclosure strategy. It can help you segment your users, organize your resource centers, and create interactive walkthroughs, all key for progressive disclosure.

Want to get started with progressive disclosure? Get a Userpilot Demo.