Issue #04

Sent the June 02nd

“People ignore designs that ignore people” Frank Chimero
Header image its not relevant🌱 Thanks to Nicholas Lokasasmita for this issue artwork

Staged vs Progressive Disclosure

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 ethicsCare ethics puts relationships at the center of ethical decision making.
DesignOps: What's the Point? How Practitioners Define DesignOps ValuePractitioners define DesignOps based on the value it provides for their team or organization.
Over-complicated? Over-simplified? The UX Efficient FrontierIs it because people prefer shiny Spotify or Deliveroo redesigns for their portfolio?
Little UX crimes: a collection of Dark Patterns in designDark Patterns is a deception technique in interface design, that intentionally tricks users into things they didn’t want to do.
User-Centered Design and Design Thinking: Different Origins, similar practicesEvery 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.
Interaction Design Principle: Feedback— UX Knowledge Piece Sketch #10At 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?)
The awesome Mac OS Catalina fonts you didn’t know you had access toThese fonts are an optional download, many users of Mac OS X are not even aware they have access to them for free.
Text fields & Forms design — UI components seriesWith 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.

Products

Heurix.ioConduct fast and consistent heuristic evaluations for free. Evaluate websites to uncover UX, usability and persuasion elements that need improvement.
StorytaleHigh-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 niceThe finest collection of ui/ux design components, patterns, examples and inspiration.
Keyframes.appKeyframes helps you write better CSS. Dead simple visual tools to help you generate CSS for your projects.
NocodepagesCreate a website yourself without coding. If you are a Designer, Business, Social Influencer,  Blogger, Podcaster, Artist, or any individual - getting online just got easier.
Ape MockupsThe 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 FigmaA thorough collection of Bootstrap components designed for Figma. Built to the exact CSS specifications from Bootstrap 4's documentation.

📬  Get the newsletter ♡

📕 Check the last issues

Go back
Go back