Before we begin, let’s quickly define design patterns. Design patterns were first introduced by Christopher Alexander, an architect and design theorist who noticed that many things in our activities happen according to patterns: patterns describe a problem and then offer a solution. He adapted his observations to his work and published a great book “A Pattern Language” on the topic. Since then, design patterns have found their place in many areas of our lives, and can be found in the design and development of user interfaces as well.

Different design patterns help us provide solutions to most common problems that all designers and developers face in their work. In this post we’ll explore progressive disclosure and how to apply it to your mobile prototyping.

What is Progressive Disclosure?

Progressive disclosure is a strategy for managing information complexity. When you use progressive disclosure, you show only the information necessary at that point in the interaction. And you display more advanced functionalities of the app interface as the user interacts with it. It’s a simple, yet powerful design pattern:

Initially, show users only a few of the most important options.
Disclose a larger set of specialized options only if a user asks for them.

Just like each of the Matryoshka dolls reveals another one within, progressive disclosure allows information to be revealed step by step

##Benefits of Progressive Disclosure * **Important content is prioritized.** In an app designed with progressive disclosure, the very fact that something appears on the initial screen tells users that it’s *important*. For first-time users, this helps focus their attention on features that are *most likely to be useful to them.* For tech-savvy users, the initial screen also saves them time because they don’t have to scan past a large list of features they rarely use. * **Clean, simpler, more productive interfaces.** By hiding more infrequently used features, *you remove UI clutter, not features*. The idea is that the app allows the user to indicate that they are interested in learning more about something by some sort of input — generally a tap. Users see an element and decide they want more information about it, or to see things related to it. If they really do, they simply “zoom in.” * **Error rate.** Fewer errors occur because novice users will take easier, more manageable steps.

Know Your Users

The main danger of progressive disclosure is incorrect assumption that you understand what is the most popular, common or important task. When designing an app, it’s easy to assume that everybody is like you. You evidently know a lot about your app, because you’re passionate about it. But most probably your users aren’t care that much. As Jakob Nielsen stated: “One of usability’s most hard-earned lessons is that ‘you are not the user.”

That’s why you should design to optimize the user experience for outsiders, not insiders (you or your team). Users have goals and want to get things done using your app. To design a good progressive disclosure, you need to learn about your users, involve them in the design process, and interact with them.

Progressive Disclosure in Mobile Apps

Examples of progressive disclosure are everywhere. A simple “learn more” link that reveals more information is one of the simplest forms of progressive disclosure. But there are more complex and interesting cases, like mentioned below.

Progressive Onboarding

Interactive progressive onboarding is a good example of progressive disclosure. It’s a user-guided tour where hints are only triggered when the user reaches the appropriate point in their experience. Thus, hints may appear in different orders for different users.

Duolingo uses an interactive way of progressive disclosure to show users how the app works: users are encouraged to jump in and do a quick test in the selected language.

Duolingo has a user-guided tour which consists of a quick test

##Instructional Overlay Any time you mask important functionality, it’s very important to give your users a cue that they can still access that functionality. When the hidden features are explained properly, users will be satisfied by the interaction with the app. And progressive disclosure can be used to disclose the *right* information, exactly *when* the user needs it.

YouTube Android app, for instance, uses instructional overlay to explain an unfamiliar interaction. These hints appear on the first launch for new users, one at a time, as the user reaches the relevant section of the app.

Instructional overlay in Youtube app for Android

##Animated Hints A more hands on approach can be found in games which often deals very well with progressive disclosure, revealing game mechanics as you move further into a game. Such hints are only triggered when the user reaches the appropriate point in their experience.

For example, Pudding Monsters uses an animated hand to explain a sliding motion and it becomes clear for users what to do next.

Progressive disclosure can bring simplicity and feature-richness to the app. Image credit: Pudding Monsters

Playground

A playthrough is another example from the game industry, it’s a tutorial-like experience in which the user is taken into a dedicated flow to complete tasks that represent the main interactions. Playthroughs often establish a goal up front (“let’s build a house!”) and are performed in the context of the app’s normal interaction. Users progress at their own pace, while UI guides them and they learn by doing.

The playthrough in Plants vs. Zombies 2 uses a combination of exercises and text assistance to teach new players

Conclusion

We’re always trying to get the most out of our interfaces and maximize whatever space is made available to us. Progressive disclosure is a powerful design pattern that is able to keep user interface clean and uncluttered and to help people manage app complexity without confusion or frustration.

When you design a progressive disclosure try to follow a simple rule — show less, provide more. In order to achieve good UX, you must get the right split between initial and secondary features. You have to disclose everything that users need up front, so that they only have to progress to the secondary display on rare occasions. The primary list just can’t contain too many options.

Last but not least, when designing instructional overlays and any other types of hints for progressive disclosure, the main thing to remember is to keep them as short as possible. Focus on user tasks and design for maximum scannability.

Thank you!