Inverted Pyramids & Progressive Disclosure in Design

Red Dead Redemption 2 might be the greatest video game ever created. It’s not just about the whole new level of interaction it gives or the dizzying open world, and detailed elaboration of the surroundings. All of that will eventually be everywhere. The fascination I found myself in is the way the story transpires.  

Most of the game out there are predictable and do a poor job of keeping you glued to the controller. The reason is weak writing. As much as game development is relying on graphics and mechanics it tends to ignore the plot. And that is half of the game.

RDR2 made $725 million in just three days and it is as beautiful as it is dramatic. The story is written in such a way, that it motivates you to stay away from spoilers and passing the game on YouTube. I even feel the urge to turn off the radar and not to go places unless the game leads you there. You want the storyline of the game to take you for a ride. The game keeps you in a moment, dictates the pace, and controls your experience. This is the ultimate digital entertainment.   

Designers can learn from this, UX writers can level up their product writing skills, and the overall quality of digital software, apps, and websites can grow. All we need is to create a visual story that unfolds itself before users realize they are in.

Avalanche disclosure

We want closure. If we buy a book, we go through it to see how thick it is and how far we are from the finish. We have a progress bar on videos, songs, scroll bars on websites – it’s like our personal GPS to know exactly where we stand, what’s next, and how much is left. Shorter attention span calls for it. On one hand, this gave us a useful design and writing principle:

Reveal the main thing first.

Suspense is banished not because it doesn’t work but because we have no time to wait. This superficial understanding of the necessity a product satisfies is crucial in decision making. We see what’s out there and rely on our pattern recognition skills to make a choice. This is how we choose online banking – we don’t go deep into the operations, we see how a service performs familiar operations to form an opinion.

Product designers have to use the business playbook and disclose all the product advantages as early as they can. User acquisition is meant to be more important than retainment. A movie trailer mindset spread across the entire entertainment industry. Killer features stacked upon each other and squeezed into our 30-second attention span. This approach is nothing but distractions devaluing a product’s significance.

Check this out. This is a $10 million episode of GoT recapped in week’s worth of work of a designer and a writer. This is what design is capable of doing.

Simplifying the complex and presenting value right away so that you can get it out of the way and continue searching for the next big thing in life.

Inverted Pyramids & Progressive Disclosure in Design | Shakuro

Episode Synopsis – Game of Thrones Viewer’s Experience by Loris Stavrinides

Where design leads, writing has to follow. With no good old build-up, we have to come up with wording that reminds of a status report plus a cheap exaggeration. In rare cases do we end up with a short and precise statement describing the product or a feature. Most times, we just neglect the user readiness and pour the content on them in hopes they will realize how cool we are.

This type of information catching people when they don’t want it, does nothing but distract and irritate, killing your product in the eyes of potential customers.

When a product says what it can do instead of why it is useful, it will eventually end up servicing itself.

The alternative principle is progressive disclosure. The products that run it, sequence the information in time and parcel out the UI into comprehensible bits so that users won’t be overwhelmed with the amount of content at once.

Inverted pyramid in design

Progressive disclosure uses the inverted pyramid model.

As opposed to the avalanche method, progressive disclosure narrows down the first interaction to just the important information from the user perspective.

The secondary screen is a natural core of the product. This is where all the juicy details are. This is where you can unfold all the features of your product. It is also a place for a subtle upsell.

The third level is for the fans and advanced users. It might not contain any deep functionality but it allows people to become a part of the product. This is where you can put customization options and other opportunities for users to tune up what they already do on your platform.

Inverted pyramid is method of funneling functionality from user perspective.  

Let’s illustrate this principle. Say we have an app that helps people recognize plants. We’ll call it Mendel. The first screen is nothing but a word about who we are and what we do in simple words. User task at hand – open camera. It might be tempting to put social icons or help button or gallery shortcut. All of those do nothing but clutter the interface with distraction. An important layer is take a picture of a plant and let the app do what it does – recognize it.

Inverted Pyramids & Progressive Disclosure in Design | Shakuro

But hey, what about saying hello and onboarding them first? The best onboarding you can do is let users onboard themselves in a momentum. By separating the narrative about your product from the product, you risk losing users who might lack focus at that time.

The following screens is where we cut it loose. But first, we have to prove we can do what we promised. This is where we must guide them to the promised land. User task at hand – soak it all in.

Inverted Pyramids & Progressive Disclosure in Design | Shakuro

After this, it’s no longer about us but about what a user can do with our support. Our duty here is to empower them to achieve more with us. This includes social proof, deeper knowledge resources, and all sorts of perks you can come up with to keep users in a meaningful loop. This is where we must satisfy expectations.

As for the third tier, if they ask for it, we must be able to give them some hardcore features, possibly paid ones, and going beyond the reach of an average user. This is our playground and a place for experiments. We might not fear losing users at this point, as this is low-key functionality which does not mess with the primary goal of your app. User task at hand – go deeper.

Inverted Pyramids & Progressive Disclosure in Design | Shakuro

Product monetization is one of the first things app production teams consider. Before navigation workflows and information architecture are in place, the money-making mechanism has to be invented. This results in flawed UX patterns.

Don’t mix lucrative expectations into the developing user value.

There are two reasons customers will be willing to pay for your product. One is they don’t want to bother finding it for free. Two is they genuinely want to reward you for the good work. Both scenarios involve you doing something for the people first. Users won’t buy anything unless it is of use for them.

The inverted pyramid approach helps you clear out your vision and decide what to do first. In sum, this is what it’s about:

  1. Identify yourself.
  2. Tell how you can help people.
  3. Prove it.
  4. Show you are more than that.
  5. Prove it again.

Progressive disclosure in product writing

Product design walks a fine line between giving not enough information and overloading. Too much information is no information. Weak presence is not even allowed. So finding the balance is the crucial part of positioning a company which will ultimately influence the UI as well.

A lot of companies confuse what they do with what people really need.

This is where the progressive disclosure approach might help. If we are revealing one thing at a time, the first thing your product says has to resonate with a user. Not a stakeholder, not the competition but a customer. There has to be no SEO strings attached and marketing value added. Just tell how you can help or ease their pain in simple terms. Don’t ask them to sign in. Don’t give your slogan unless it tells exactly what you do.

Inverted Pyramids & Progressive Disclosure in Design | Shakuro

If there is no value you can give customers, make it up but don’t be surprised if someone calls on that.

Everything you write about the product has to progress naturally along with a user’s knowing of it. Be revealing the most important and honest information up front, we mitigate the click bait and frustrated expectation. It’s important for designers to have a client invest in this mindset instead of building revenue-producing schemes off of the customers that aren’t even there yet.

Progressive disclosure is a motion from abstract to specific.

What defines your product on the highest level is likely to be true. Further details must not derange that definition, but add to it. If you do it vice versa, your details and specifics might put together a big picture of your product different from what you’ve imagined.

There is always place for complexity. The customers have to ask for it though.

For example, photography apps and services. It’s hard to define what exactly people mean by “editing a pic”. For one it might be just applying a filter and cropping out random people. For another, it might be a scrutiny involving tinting and dehazing. But all of these option belong to the title “editor”, so the job of product writers is to come up with exact wording to satisfy both types of users.

Product designers have to be able to address the needs of both types with respect. A natural progressive disclosure of such an app would be moving from abstract and general features to more complex ones.

Inverted Pyramids & Progressive Disclosure in Design | Shakuro

Cyberpic app by Vova Krasilnikov

While designing every new feature, we have to evaluate the state of user’s readiness for the entire app in a set of different contexts. It’s tempting to only address advanced users who are as excited for your updates as you are. However, the majority of your audience will be newcomers.

The product has to speak to any user whether or not it has a history of relationship with them.

Every piece of the product should be able to convey the exact amount of content people need in the given time. At the same time, the fact that the product is finite should not be so obvious. We must be able to take a user for a journey far as they want to go. But we should never impose that journey on those don’t ask for it.

There is no rule book for progressive disclosure design. It’s more of a mindset that you approach a lot of things in life with. At the very least, it’s a cool exercise to flex your UX skills.