When an interface is complex enough for users to understand it right away without any boring manuals, designers need to look for unique ways to present its functionality. In particular, they may resort to progressive disclosure. Below, we will tell you what it is and how to implement it in practice.
What Is Progressive Disclosure?
Progressive disclosure is an approach to organizing information in digital products that involves its presentation from basic to advanced. Thanks to this, users receive this information in a dosed manner. Therefore, it does not cause them any confusion and misunderstanding of what to do in the context of the need to solve specific problems. As a result, the number of mistakes within the interface is minimized, and the user experience becomes positive.
Just imagine if Einstein had to deal with the formulation of the theory of relativity without knowing the fundamental laws of physics or mathematical operations, he would not be able to cope with this theory. Similarly, with interfaces that provide functionality for several groups of users — from beginners to advanced ones — to allow newbies to turn into professionals, they will need help with this. In particular, this can be done through progressive disclosure.
What Are the Main Principles of Progressive Disclosure?
Progressive disclosure is based on three main principles, which we invite you to consider below:
- The correct statement of the main task
Whether a website or an application, each project is created to solve specific user needs. Therefore, you have to determine what these tasks are in the context of your project. - Splitting a task into subtasks
Now that you have a list of tasks your project solves, you must break each into successive subtasks, from primitive to more complex. Note that their complication can occur non-linearly, and this will directly affect the choice of approach for implementing progressive disclosure. - Providing information based on the context
Finally, as your users progress through the interface’s complexity levels, you will need to maintain the context of their previous interaction so that when they move from a more straightforward task to a more complex one, they do not have to reconfigure settings that have already been made.
Guide on Implementation of Progressive Disclosure
Let’s take a look at what progressive disclosure looks like in practice.
Prioritize tasks that the end user can solve within the interface
First, you must identify the critical features for which 100% of end users come to your project. They will have to be presented in the first level of disclosure. These will be followed by less critical features that advanced users and professionals may need.
Ensure a smooth transition from simple tasks to more complex ones
While not all users will want to go beyond the first level of disclosure, you should ensure that those who need it can do so intuitively without having to wander around the wide expanses of your project. The easiest way to do this is through buttons, links, and drop-down menus, but there are more subtle ways to expand, which we’ll cover in the next paragraph.
Do not abuse the number of disclosure levels
As practice shows, more than two levels of information disclosure usually negatively affect the user experience. Most often, this indicates that you have chosen the wrong division into subtasks, and it should be optimized.
Test your solution for usability
At this stage, you will need to get a prototype of your project to understand how its hierarchy works. This will be your starting point for evaluating how user-friendly your solution is. You can then test the usability of more minor elements, such as button states and microtext.
10 Great Examples to Check
Finally, let’s take a look at the list of ten obvious and non-obvious tricks for implementing progressive disclosure.
Snippets
In the context of progressive disclosure, snippets are content previews that briefly describe what the user will receive when they open them. In particular, this thing works very well on news websites and portals with large amounts of regularly updated information.
Sliders
Sliders will help you design your e-commerce solutions to offer your potential customers more product items to consider that are relevant to their search history.
Popups
Popups are one of the standard tricks for implementing progressive disclosure and can be opened when an event is triggered by the end user (for example, on hover). However, you should not abuse them, as their abundance may look annoying.
Advanced settings
If you work on a highly specialized project that requires expertise from its target audience, you should consider creating a menu with advanced settings.
Mega menu
Websites with dozens or even hundreds of pages rarely do without a mega menu with a logically ordered hierarchy of menu items. You may have to tinker with designing the right navigation for this complex structure, but your users will appreciate its convenience in the end.
Hamburger menu
Hamburger menus are minimalist, compact ones that only appear when website or app visitors click the menu icon. This technique works great in projects with limited physical space, such as those created for mobile platforms.
Accordions
An accordion is an interface component where users can show or hide specific content. The FAQ and People Also Ask blocks are the typical implementation examples for accordions, as shown in the figure below.
Animation
If your project is close to gamification, you can use animation as a way to explain to your users what to do next.
Drawers
Drawers are new additional interface layers that appear in a specific context of the end user’s interaction with it. They are usually smaller than the main window of an application or website.
Scrolling
And finally, if you find it difficult to segment tasks into two levels, you can use the standard scrolling technique, bringing the most essential functions and/or information to the top.
Remember about UX
A good UI design is not the same as a UX design. Pieces of advice, life-hacks and recommendations that we share here will be working only if the information architecture and users’ behavior on site are paid attention to. Before you start creating the UI design in any graphic editor be it Figma, Sketch, Adobe XD or any other, make sure you have got:
- an information architecture planned
- a user flow analyzed
- a prototype created (this requirement is not always necessary though)
Empower your toolkit with FlowMapp secret ingredient for planning the entire UX and AI web projects — the all-in-one solution at each planning stage. Sign up now and who knows — maybe one day you’ll need it, same as it is needed by thousands of designers and start-ups around the world now:
Final Thoughts
We hope that we have helped you understand what progressive disclosure is and you will be able to put this approach into practice without any obstacles. And, of course, we will be glad if any of the above examples inspire you to create your own unique interpretation of this technique.
Originally published at https://www.flowmapp.com.
