What is progressive disclosure?
Progressive disclosure hides advanced or less used features on a secondary screen to make apps easier to use and reduce errors. At first, show only a few of the most important options. Then, disclose secondary options when users ask for.
Users want both power and simplicity. They want features to serve all their needs, but don’t have time to learn features in depth. → Progressive disclosure is one way to satisfy these conflicting requirements.
Examples
-
Print dialog box: advanced options such as scaling or printing in reverse sequence are hidden until users click.
-
Hypertext
-
Product page contains all products. Click a product to go to its page and view detailed specifications.
Benefits of progressive disclosure:
-
Show users what’s important.
-
Help users prioritize their attention and spend time on features that are most useful for them. Avoid mistakes and don’t have to go through all features they don’t need, thus save time.
→ Progressive disclosure thus improves 3 of usability’s 5 components: learnability, efficiency of use, and error rate.
Worried users can’t understand all options on your system? People understand a system better when you help them prioritize features and spend more time on the most important ones.
Usability criteria for progressive disclosure
-
Get the right split between initial and secondary features: disclose everything users frequently need up front; primary list can’t contain too many options; initial display can’t contain confusing features.
-
How to progress must be obvious: make mechanics simple, like placing buttons in visible spots or making links obvious; clear labels for buttons & links.
How to determine what initial features to display?
- Task analysis and field studies: find out what people need
- Frequency-of-use statistics: help prioritize features
- Observational usability testing: users actually want to enter a page or do it by mistake?
Multiple levels of progressive disclosure
Although you can have multiple levels of progressive disclosure, users may get lost and hence lowering usability.
What if you have so many features?
- Simplify your design to scale back complexity
- Chunk advanced features into groups so users can check only one place and ignore areas they don’t need. Use techniques like card sorting for grouping.
- User testing
Another option is to have multiple secondary displays, each of which is revealed by a different control on the initial display. This may add complexity to the initial level.
It’s rarely a good idea to offer multiple ways to progress to secondary options. If you must do this, clearly label all choices.
Staged disclosure
Example: A single-screen hotel reservation system that squeezed all the reservation stages onto a single screen.
-
Benefits: users can see all info they need to book hotel in 1 page instead of going to multiple pages, like room categories, prices, dates, and availability.
-
Drawbacks: When users experiment with various reservations, the section for users to enter their address and credit card information is not necessary.
→ It’s better to have a 2-screen design: defer payment details to a secondary screen.