Progressive Disclosure

Progressive disclosure defers advanced or rarely used features to a secondary screen, making applications easier to learn and less error-prone. -Jakob Nielsen

Note: This page is a work-in-progress. Feedback and suggested improvements are welcome. Please join the discussion on moodle.org or use the page comments.

This is a prototype guideline, a starting point for the Usability/Improve_Moodle_User_Experience_Consistency project. I am especially interested in comments about the readability, accessibility and brevity of the document.

Context

Use Progressive Disclosure when you know some users will want to take a simple route and just get a job done, but some users will want to do something more advanced.

Forces

• Progressive disclosure allows novice users to first learn the fundamental functionality of an application, and then move on to more advanced features if/when they need them.
• Helps meet expectations of differently skilled users with the same UI. We let the less-experienced users know what they can safely ignore: (They may be curious and take a peek, but they still so it in the safety of knowing they can still go back and ignore if what they see is confusing.)
• May distract advanced users. See Persistence and Clear Labels below.

How to do it?

Identify the key workflow: what users actually do most of the time. Identify other further controls or alternative workflows that are required but less common. Place them on an alternate, less prominent route that users with more experience can take to learn about further features.

The trigger element that reveals and hides the advanced parts of the UI should, in general, be a link or an icon and not a button, regardless of whether Persistence is used or not. This is because progressive disclosure itself does not change the actual state of the application but is a navigational aid for users. The trigger element changes appearance to reflect the state of the progressive disclosure (visible or hidden).

Reasonable defaults

One typical way to do this is to have an "advanced" button, which leads to further configuration options. They should all have reasonable defaults so that the application does the Right Thing even if the user does not.

Persistence

Depending on the context, often it is beneficial to make the state of the progressive disclosure persistent for any given user: Once the user has once expressed that they are willing to see the additional functionality, it will be visible by default when the user accesses the screen the next time. (Until they hide it again.)

Predictability

To make sure the users who need the advanced functionality find it, the element that the user needs to click to see it needs to be clearly and unambiguously labeled.

It should be predictable to users what will happen if they select to see further options:

• If there is a link for "advanced [noun]", such as "advanced search", the link can take to another, completely different page.
• If there is a link to show something additional in the UI the advanced options should either appear near the button or the items that appeared should be signaled with an asterisk (*) to differentiate them from the items that were visible by default.

Common mistakes

There are no such things in reality as a novice user, intermediate user or an advanced user. Different personas have various dimensions of know-how in terms of computer literacy. A common mistake is making users choose what their skill level is, and based on that show more or fewer controls. Progressive disclosure should be based on scenarios that different actual personas (prototypical users) will have.

Please see the talk page for further caveats. To use progressive disclosure, you need to know the circumstances of different personas: since it typically hides features, it needs to be made sure progressive disclosure does not unreasonably slow down experienced users.

Examples and implementation

Simple progressive disclosure in a form

the form before pressing the "show advanced" button

the form after pressing the "show advanced" button

Javascript implementation. Moodle remembers the state the form was left in (in the user_preferences table) so that if you left the form in the 'Show advanced' state, the advanced controls will already be visible when you use the same form again.

Implementation: Progressive Disclosure Implementation

Search and Advanced search of forums

Change to another page with further options if the user clicks "advanced search".

• Simple search: the "search forum" form http://moodle.org/mod/forum/view.php?id=737
  • Simple search results (with link to advanced search): http://moodle.org/mod/forum/search.php?search=sweet&id=5
    • Advanced search form:http://moodle.org/mod/forum/search.php?id=5&user=&userid=0&forumid=0&subject=&phrase=&words=&fullwords=&notwords=&dateto=0&datefrom=0&showform=1
      • (Advanced search results: http://moodle.org/mod/forum/search.php?id=5&words=not&phrase=any&notwords=&fullwords=&hfromday=1&hfrommonth=1&hfromyear=1&hfromhour=1&hfromminute=1&htoday=1&htomonth=1&htoyear=1&htohour=1&htominute=1&forumid=0&subject=&user=)

Search options

Javascript implementation. When "Search options" is clicked, reveals three checkboxes. Go to a module, such as a forum, in a course, click Update module, click Check permissions. URL of form is /admin/roles/check.php?contextid=X .

Further information / Sources

• Jakob Nielsen's Alertbox: Progressive Disclosure
• Wikipedia: Progressive disclosure
• An entirely different definition of the term: UI Patterns and Techniques: Progressive Disclosure

(TODO: search progressive disclosure for examples and add some here)