In late 2018, I wrote a fictional case study on designing Grab drivers’ mobile app. The article got some love from the community, and I appreciate all the “claps” from my “heart”. It motivates me to write more and give back to the community as I go along my journey in design.

I threw a few concepts and jargon in that article, and “Progressive Disclosure” got the most highlights, 20 to be precise. So I have decided to expand on this topic.

What is progressive disclosure?

According to Jakob Nielsen, he defined Progressive disclosure in his article dated 2006 as

“Progressive disclosure defers advanced or rarely used features to a secondary screen, making applications easier to learn and less error-prone”

Interaction Design Foundation defined it as

“Progressive disclosure is an interaction design pattern that sequences information and actions across several screens (e.g., a step-by-step signup flow). The purpose is to lower the chances that users will feel overwhelmed by what they encounter. By disclosing information progressively, interaction designers reveal only the essentials, and help users manage the complexity of feature-rich websites or applications.”

Many people have written on this topic. A simple Google search will result in tons of valuable knowledge. It can be overwhelming to understand what it truly means and not misuse it where it’s not necessary.

This article will share three guiding principles on using progressive disclosure when designing an interaction flow. Let’s get started.

Progressive disclosure is storytelling

Manga or Anime with a plethora of characters use this framework to the dot. The best examples are Naruto or the latest My Hero Academia.

In the manga, they tell the story and introduce new characters in story arcs where the writer focuses on one narrative to get us emotionally vested

We can also draw learnings from the popular phenomenon, i.e. Marvel Cinematic Universe. They used this method to introduce new characters over ten years to make it consumable. Each movie focused on establishing a story about one superhero before they all come together in Avengers.

What happens when you challenge the fundamental form of storytelling? Suicide Squad movie released in 2016.

I found this video essay by Flimento on the difference between 2016 vs 2021, which was a hit(The Suicide Squad by James Gunn). The piece touched on information overload and establishing 5–6 new characters within 30 minutes to the audience.

Now that we know the fundamental ingredients of creating a fulfilling experience through progressive disclosure, let’s look at 3 guiding principles I use it in my day-to-day design job.

Principles of progressive disclosure

In this section, I want to talk about high-level concepts that can help in your day-to-day tasks. I am sure we are already doing it in some form or another.

1. Establish the primary purpose
2. “Bite-size” information
3. Complete information within a context

Let’s validate our principles with an example. We will look at how Mini Motorways leverage progressive disclosure to onboard new users.

I love this game. I love its minimalism and use it as a way to de-stress.

Using progressive disclosure, they enable players to create thriving cities pretty fast.

1. Establish the primary purpose

The primary purpose of onboarding to the game is to ensure players know how to play the game on the first launch. Players might leave the game if the learning curve to play the game is too high. Hence leverage the progressive disclosure to onboard them quickly.

The primary purpose of the onboarding tutorial for this game is to create roads that are the foundation of playing the game.

With this in mind, they break down the information into bite-sized tasks to make it easy to learn and introduce complex tasks after completing the easy ones.

2. “Bite-size” information

Now that we have our core purpose, we need to break it down into core steps to enable players to create cities.

1. Create roads
2. Delete roads

That’s it! Those are the fundamental actions players need to create complex roads and highways as the game progresses.

After establishing the fundamentals, they start adding in complexities in their tutorial.

3. Complete information within a context

If you look at the first step, the fundamental task was to create a line.

We didn’t need a house or a factory which adds complexity. The task of creating the line was complete information. It didn’t need additional context.

With progressive disclosure, we can stack up complexities after they master the fundamentals.

In manga storytelling, each arc provides you more depth, focused on one particular character leading up to multiple arcs where you don’t have to introduce the character motivations and desires again.

Similarly, MCU introduced one character in each movie leading up to Avengers infinity war, where the audience knows each character’s motivations and goals.

Each movie was a complete experience, and even if you didn’t watch the Avengers, you would come out of the theatre with a whole story.

So when using progressive disclosure, the user should see bite-size information that is whole and has a clear objective.