<- Product Newsletter /

#04 - Staged vs Progressive Disclosure

Author face
Article written by
Juan Jesús Millo

Writing of the week

When should we use progressive or staged disclosure? Do you use a flexible system or one more rigid than a stone?

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.

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.