Progressive Disclosure is an interaction design technique. We use it to provide information gradually, focusing only in what is important for each step or part of a task.
Quoting Frank Spillers, co-founder of Experience Dynamics, “it’s a technique that sequences information and actions through different screens with the purpose of reducing the excess of information and burden of our users”.
To apply Progressive Disclosure, we must classify or divide the information into different levels depending on their relevance and use. This allows the user to freely choose among several options (sections, content, features, etc.) without being overwhelmed by a multitude of alternatives.
Advantages of Progressive Disclosure
By applying Progressive Disclosure we can manage the complexity of an interface and improve the user’s experience. This is because it helps us comply with 3 of the 5 basic usability components:
- Learnability: when we reveal content progressively we reduce the cognitive charge of our users and the volume of options they have to choose from. This will make our site or app easier to use from the beginning and improve the results of traffic.
- Use efficiency: by prioritizing features and most used options, we help reduce the effort of finding a specific option. It will also make the navigation shorter, which will rise conversion.
- Error Ratio: it is known that the more options available, the higher the dropout. When users feel overwhelmed by a long list of options or do not understand the difference between these options, they tend to stop their decision process and abandon their navigation (analysis paralysis). Also, users may choose the wrong feature or content. This can be avoided by using Progressive Disclosure, where the user only sees the most relevant and general options. These will guide the user towards a more precise and correct option.
Some examples of Progressive Disclosure
Every day, we see examples of Progressive Disclosure in the apps and sites we use. For example, Linkedin app uses Progressive Disclosure in their post feed. Users only see the first lines of every post. If they are interested in seeing the complete post, they can voluntarily click on “see more”. If not, they can keep scrolling down through the feed. This way users don’t feel obliged to read long posts that are not of their interest.
Most online stores and marketplaces are also great users of Progressive Disclosure when it comes to presenting products. Let’s say you are interested in buying a toaster in Amazon.com. First you will see a list of products, together with the most relevant information about each product (name, brand, price, etc.). To see more details about a certain product, you just have to have to click on the article to go to the complete product specifications. This way, when users search through product listings, they can do so in an easy and simplified way because they only see the priority information at first.
We can see another example of the use of this technique in TeaCup Lab’s website; this time we analyze the Services page. Here, several techniques are presented with a brief description. This short definition helps those first-time users who may not have enough knowledge about the matter and cannot fully understand the differences among the offered services or techniques. Applying Progressive Disclosure, this site offers the learn more about each technique or service by simply clicking on “See Technique”.
Toolbars and menus are also a great scenario for Progressive Disclosure. If we analyze the user interface of Gmail, we will see how the less used features are grouped and hidden under the button “more”. This allows users to discover them only when they are needed.
¿How do we prioritize information and features?
The key to this technique is to correctly define what is priority and what is secondary. To do so, we can use different research techniques:
- Card Sorting: a mainly quantitative technique that allows us to understand our users’ mental model. It contributes to discern between what is priority and what is not. With this classification, our design must then position the important information on the first level and push the rest of the information to the next levels.
- User Testing: it’s one of the main user research techniques. We observe real users interact with with a product. With this observation, we can detect hierarchies and information architectures that hider navigation and understand the causes. This will help us optimize the first levels of navigation and prioritize information with reliable insights and facts from real users.
- Web data analysis: if we are working on an already existing product, we can always check the usage data (most visited pages, most engaging content, most used features, etc. ). This will help us prioritize too. However, this data analysis should be complemented with qualitative data to confirm the causes of behaviour.
Once we have reliable information about our user research and data analysis, we will be able to classify the information into two big groups: priority and secondary. Only then, we can start working on the design of our site or app.
To wrap up, Progressive Disclosure allows us to reach two important goals.
On one hand, we are able to grant power and freedom to our users by putting at their disposal a great variety of options that are prioritized by use and interest. Users are free to choose the depth they would like to achieve with their navigation.
On the other hand, it allows us to offer all this content in an easy, simple and brief way. Users will not have to waste time looking for it or trying to deduce where to find it. Our new information architecture and design will guide them towards their goal.
Both results promote a better user experience and, in consequence, a higher conversion rate.