Tell me more ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.
up vote 4 down vote favorite
1

This might be considered a sort of special case of the issue described here: should arrows point left/down or down/up in collapsible accordion?

I have this scenario:

enter image description here

As can be seen in the illustration, my current design is inconsistent with the approach taken in Windows Explorer (and OSX Finder for that matter, just with other arrow icons).

So my question is:

  • How to communicate that HEADLINE 1.1 controls the collapse-states of the contents of it's subheadlines and not if the subheadlines themselves are visible?

UPDATE: Here's a live example.

share|improve this question

2 Answers

up vote 2 down vote

I would not use a treeview. (A) Use HEADLINE 1.1 and HEADLINE 1.2 as a headline with the option "EXPAND ALL". Below you placed the tree with the collapsible SUBHEADERS. (B) There are too many elements then you can also split the tree in 2 views (first is a list and second a tree).

Examples

share|improve this answer
Thanks for your input! In my design (and it may not be clear from the arrow "overload" in the illustration, I know...) I have defined the HEADLINE 1.1/HEADLINE 1.2 behaviour as a two-state toggle, instead of a three-state toggle or one-shot operation as you suggest? That is, only if all subheadlines are collapsed, HEADLINE 1.1 expands all. Else HEADLINE 1.1 collapses any expanded subheadlines. Mixing two-state toggles (subheadlines) and three-state toggles is rather confusing, I think. The reason for me using icons concerns the fact that text-links/buttons quickly bloats the interface. – agib Nov 24 '11 at 15:45
You can also use a icon instead of text for the command "EXPAND ALL". But the treeview metapher in your concept is wrong. – sysscore Nov 24 '11 at 16:06
up vote 2 down vote

The triangle expander control you are referencing here is described by Microsoft in their Progressive Disclosure Controls Guidelines. This particular control is the only one that displays in it's Present State (as opposed to the 'future state' i.e. the state it will be in when selected) this is because it (apparently) resembles a rotating lever so shows the direction in which the action occurred.

Rotating triangles

Purpose - Show details: Show or hide additional information in place for an individual item. They are also used to expand containers.

Appearance - Rotating triangles somewhat resemble rotating levers, so they point in the direction where the action has occurred.

Glyph Indicates - Present state

share|improve this answer
Thank you for the feedback and reference, although I'm not sure, how/if that answers my question. Judging from the MS guidelines, the rotating triangles can only be used to toggle individual items. In conclusion, my suggested way of using them, to display the collapse state "INSIDE" children, is wrong. But my question is then: What should I do instead? – agib Nov 29 '11 at 15:01

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.