Collapsible fielsets for uncluttering editing pages

Collapsible fielsets for uncluttering editing pages

by Frank Ralf -
Number of replies: 6
There's a lot of discussion going on how to improve the editing interface of Moodle.

One feature Drupal uses for uncluttering editing pages are fieldsets with the title as hyperlink to toggle the fieldset between collapsed and uncollapsed state using JavaScript (see screenshot).

That's similar to Moodle's "Advanced features" button but IMO more intuitive and without another Button.

For details see http://api.drupal.org/api/function/theme_fieldset and http://api.drupal.org/api/file/developer/topics/forms_api_reference.html/6#fieldset

Frank
Attachment Drupal_Collapsible_fieldsets.png
Average of ratings: -
In reply to Frank Ralf

Re: Collapsible fielsets for uncluttering editing pages

by Tim Hunt -
Picture of Core developers Picture of Documentation writers Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers
My experience of being a novice users is that this just means that you can't see what options are available, so you just have to click to expand everything - therefore this does not help.

Probably, when you are experienced, it is more efficent to click once or twice to expand a couple of secitons rather than scrolling.
In reply to Tim Hunt

Re: Collapsible fielsets for uncluttering editing pages

by Matt Gibson -
One thing this does add for novices is the implicit message that the collapsed sections can be ignored. The required fields are always in the top bit that's not collapsed, so it makes the form a lot more novice friendly.

I have to agree that it's also much better than the current 'show advanced' buttons that not only show everything, but also repeat down the page, making it hard to work out which bit you have just expanded sometimes.
In reply to Tim Hunt

Re: Collapsible fielsets for uncluttering editing pages

by Frank Ralf -
Well, you could show each page with all sections expanded the very first time and keep track of each section's status via a cookie. That way each user could customize the view of each page to his liking.

And a collapsed state would indicate to the novice user that this is an advanced option he doesn't have to bother with.
In reply to Tim Hunt

Re: Collapsible fielsets for uncluttering editing pages

by Olli Savolainen -
Thanks, Frank for pointing me here.

Against 'Show advanced':
  1. If grouped&labeled properly, collapsible fieldsets communicate what is inside better than a 'Show advanced' button. This is a benefit both for those users who want the advanced features and for those who don't. 'Show Advanced' gives no clue of what is hidden.

    On the other hand, if options are grouped based only on whether they are advanced or not (and not based on their actual subject), the grouping may get unnatural. Having collapsible fieldsets inside normal fieldsets to have both kinds of groupings is probably out of the question, being too complex.

  2. A button implies there is an action with actual consequences in the application, when opening something hidden with progressive disclosure is really navigation, and a link should be used. Too many misdirected hints in the UI can get confusing, but the seriousness of this is difficult to evaluate.

  3. Since collapsible fieldsets are at the end of the form after all the mandatory elements, distraction is minimal since users need to consider if they are interested in advanced options only once, just before submitting the form. 'Show advanced' buttons are all over the place, and their distractiveness is made worse by point 1., above.
For 'Show advanced':
  1. An option is to add labels in or next to the buttons describing what is hidden in them, to have just that advantage of collapsible fieldsets.
  2. It is already a part of Moodle style to have the 'Show Advanced' buttons. As the benefits of making a big change are not obvious, changing the conventions would probably distract more than help. On the other hand, we are already adding a collapsible fieldset in the roles UI of 2.0.
  3. 'Show Advanced' buttons communicate more strongly that these options can be ignored than collapsible fieldsets. (The same effect could perhaps be added to collapsible fieldsets by adding an "Advanced:" prefix.)
  4. Collapsiple fieldsets easily make users lose orientation if they are big, since visual page structure can change dramatically.
Vertical tabs do not let the novice user know what options they can ignore, i.e. they do not provide progressive disclosure. Thus it is not really something to compare against the two other options.

Research about the actual benefits would be nice.