Why Progressive Disclosure is the best design pattern

This pattern has been around since at least the early 1980s but started to gain more popularity in 1983 when UI specialists from IBM found that if advanced functionality is hidden when not needed, it will have a higher chance to be used later.

The purpose of the progressive disclosure design pattern is to reduce UI clutter, confusion and cognitive workload so that the user will remain focused on the interface. When the progressive disclosure design pattern is used, only the information necessary at that point in the interaction will be shown. More functionalities will become available as the user interacts with the app.

One simple example would be an app screen that contains a toggle which will show more options once you press it. This might not seem great at first because it adds a few steps to your design, but that’s not always a bad thing. If you apply this pattern correctly it can be a powerful technique to keep your users focused. Other examples would be: expanding navigation menus such as dropdowns, sliders, carousels, pagination, the “hamburger menu” or the “Read More” link.

The progressive disclosure pattern is used a lot in fintech apps. Nobody would want to be distracted while making a transaction. Distractions will result in errors most of the time and fintech apps will need to keep users focused.

When to use?

There are 3 questions you need to answer to help you find out when to use this pattern:

  1. Who are your users, what they do and what their objectives/frustrations are?
  2. Why are users using your app? You can build user stories for that.
  3. How will users interact with the app? You can build a customer journey map.

Still not sure?

Ease of use is the basis of any successful design and sometimes users will understand more when less information is revealed.

Andy

Front-end Engineer & Designer based in Dublin currently working @IBM.
I write about: Javascript, HTML, CSS, React JS, React Native and UI/UX Design.

Add comment