Progressive Disclosure is a UX design technique of reducing complexity and clutter, and improving usability of the User Interface by placing emphasis on important features of the app, and hiding away more advanced or rarely used features.
Let’s briefly talk about what it is, and then look at examples.
Jakob Nielsen gives slightly different and more prescriptive definition:
Progressive disclosure defers advanced or rarely used features to a secondary screen, making applications easier to learn and less error-prone.
– NNGroup Website
Nielsen talks about secondary screen. In reality, advanced actions can be hiding in dropdowns or modal windows on the same screen or view. The concept of progressive disclosure also applies to Voice User Interface design where there are no screens at all.
In order to implement this technique successfully it is important to have good understanding of target user base and jobs users are hiring the app for. It is especially important to distinguish between the needs of expert and novice users. In some cases design decisions will be skewed in favour of one group or the other, while in others UI needs to work equally well for both groups.
Examples of Progressive Disclosure
Let’s look some example of progressive disclosure. Very common example of progressive disclosure is contextual menu. You can see it in action all over Gmail, for example:
Screenshot shows only one open contextual menu. There are at least 7 more elements that use progressive disclosure to reduce the clutter and simplify the UI. See if you can identify them.
Another example of progressive disclosure can be seen on Amazon’s website. Take a look at how product ranking is shown:
Initially product ranking is displayed as a simple 5-star element under the product name. However, there is a more detailed breakdown available on mouse over. There is also a link to the actual reviews available.
And lastly, an example from Google Search:
Google is showing featured snippet at the top of the page that attempts to answer the user’s questions (query) is a brief way. User has an option to drill into the source page if more detailed answer is needed.
Hopefully these examples give you some understanding of progressive disclosure. It is a powerful tool in arsenal of any UX designer.