#04 - Progressive vs Staged Disclosure
Differences between progressive and staggered disclosure
When should we use progressive or staged disclosure? Do you use a flexible system or one more rigid than a stone?
What is progressive disclosure?
Progressive disclosure is a strategy that has been in use for more than 30 years, the sister of the Wizard. Its purpose is the feature management, creating a flexible system adapted to junior users who do not know how to use the application or web itself, minimizing the errors rate and giving the possibility to the most experienced users in the form of a very powerful toolbox.
Look at your Chrome browser, if you go to settings, you will see a limited amount of options, which thanks to card sortings and % of use are the most used, but we always have clearly available the advanced options, this is the progressive disclosure, offers power and simplicity, while improving the principles of usability of learnability, efficiency of use and error rate.
What is staged outreach?
On the other hand, the staged disclosure (like the Wizard), shows initially one step of the process, divides the information in equally important fragments, has a linear progression and improves the usability principle of simplicity; while the progressive disclosure shows initially the most important functionalities, its navigation is hierarchical, hides the secondary functionalities and improves the learnability. A good example of staged progression would be Typeform.
Use staged progression when the interaction is simple and information can be divided or semantically grouped.
What should I consider? Divide the information carefully by using card sortings, links and self-describing labelled buttons of what is going to happen in the interaction, and be very cautious when using more depth levels or several secondary levels.
You can practice by looking for three applications/webs that use the progressive disclosure pattern and another three that use staged disclosure.
Articles & Ideas
Ethics for designers Part V: Care ethics
Care ethics puts relationships at the center of ethical decision making. Matthew Ström
DesignOps: What's the Point? How Practitioners Define DesignOps Value
Practitioners define DesignOps based on the value it provides for their team or organization. Kate Kaplan
Over-complicated? Over-simplified? The UX Efficient Frontier
Is it because people prefer shiny Spotify or Deliveroo redesigns for their portfolio? Morgane Peng
Little UX crimes: a collection of Dark Patterns in design
Dark Patterns is a deception technique in interface design, that intentionally tricks users into things they didn’t want to do. Aliona Kyrychenko
User-Centered Design and Design Thinking: Different Origins, similar practices
Every year, it seems, there’s a new buzz word or a hot new method that comes up in UX research and product development: Agile, Lean, and Jobs to be Done are just a few. Jim Lewis, PhD and Jeff Sauro, PhD
Interaction Design Principle: Feedback— UX Knowledge Piece Sketch #10
At any given moment, a user interface should be able to answer these questions: Where am I? What has just happened? What is happening? (Is it still happening?) What will happen next? (And what could happen?) Krisztina Szerovay
The awesome Mac OS Catalina fonts you didn’t know you had access to
These fonts are an optional download, many users of Mac OS X are not even aware they have access to them for free. Ralf Herrmann
Text fields & Forms design — UI components series
With the advance of information and its processing, means to gather the data are also evolving. As printed forms were here for years we can learn a few tips from their design. Taras Bakusevych
Products
Heurix.io
Conduct fast and consistent heuristic evaluations for free. Evaluate websites to uncover UX, usability and persuasion elements that need improvement.
Storytale
High-class web illustrations under simple subscription. Use these illustrations to bring life into your sites, apps and presentations. For personal and commercial projects.
Nice very nice
The finest collection of ui/ux design components, patterns, examples and inspiration.
Keyframes.app
Keyframes helps you write better CSS. Dead simple visual tools to help you generate CSS for your projects.
Ape Mockups
The best free Mockups and Resources for your Project. 1000s of Hand-picked free mockups just for you for both personal & commercial use. All Legal. Go APE!
Bootstrap Design for Figma
A thorough collection of Bootstrap components designed for Figma. Built to the exact CSS specifications from Bootstrap 4's documentation.
