Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

I am working on a device which presents pieces of related content. The content has child/parent relationships and the user can click to expand the various trees.

In the attached sample I mocked up, you can see the relationship is University > Department > Course.

Preview pane - nested elements

At any point, I wish the user to be able to view a brief summary of an element, with an option to read further if needed.

So you can see in this case the 'Degree in Information Architecture' is selected so the pane is populated with information about it. Equally the user can select Arts Dept, University of London, etc. and it will behave the same way.

If, when the user clicks on an element in the list, it expands or contracts then what action should I use to allow the user to preview information about an element?

An already existing pattern means that the entire horizontal row of an element is the clickable area for expand/contract, so I cannot use the click to preview information.

Well I could, but I don't think it's a good interaction doubling up like this. For example, if someone is browsing down three levels deep, I don't want the content on the side changing each time the nested table expands or contracts.

I know Apple has a preview pane in their folder structure window, but it is only presented when the user has clicked through until the last item in a branch. Whereas I want to allow the user to be able to preview the information at any point and still be able to click through.

What could I do here or are there any good examples?

Maybe my whole overall approach needs rethinking..

share|improve this question
Spiral13 - can you start to mark some of the answers to your questions as Accepted? If you have 0% accepted answers it may deter people from giving answers to your new questions, and will also help improve the reputation of the UX.SE site as a whole. –  JonW Feb 20 '12 at 11:45

2 Answers 2

up vote 2 down vote accepted

An already existing pattern means that the entire horizontal row of an element is the clickable area for expand/contract

It looks like you are already performing two actions on left click of an element: expanding/contracting and selecting (focus). To me, displaying preview info seems like a natural consequence of selecting an element. So I think the question becomes: should expanding/contracting and selecting occur as a result of the same action?

If you cannot change or violate the established convention, then the answer is yes. Therefore previewing on click makes sense to me.

Another option would be to add a separate element to each node, either next to or z-indexed above, that would become the target for one of these two behaviors. This seems like the most confusing and least desirable option to me.

You could also use a different event for each of the actions. For example, hover could select (and therefore preview) an element. I think this sounds more jarring than using click to both expand and preview. Double-click or right click seem a bit unintuitive also.

Having said all that, I think the real problem is the convention of expanding as a default consequence of clicking anywhere on the element. As long as branches and leaves both have the same primary purpose (to preview info and click link to display details), then expanding/contracting behavior only applies to one kind of element - a branch. I assume branches are visually indicated somehow (plus/minus in your example), so it seems more obvious and intuitive that the expand/contract behavior would be in some way tied to the visual branch indicator rather than the entire element.

As a side note: are you allowing navigation of the tree via keyboard events or touch events? Thinking about those scenarios might help you make a decision about separating or consolidating actions and consequences.

Good Luck!

share|improve this answer

I think it matters what is the currently highlighted node.

In your mock up, expanding or collapsing the "Economics Dept" shouldn't trigger any preview, since the "Degree in Information" node is still highlighted.

However, closing the "Technology Dept" node should trigger the "Technology Dept" node to be highlighted, since a child node in it's branch is getting hidden. Since "Technology Dept" is now highlighted, the preview pane should show it's information.

share|improve this answer
I think expanding or collapsing the "Economics Dept" would trigger a preview. If for instance I'm in the current view (Degree in Information Architecture) and wish to view the info for Economics Dept I will click it and expect to see it's info in preview pane. If I click it and it simply expands but pane does not change, how am I to view the "Economics Dept" info from this point? –  Spiral13 Dec 10 '11 at 23:32
@Spiral13 I would treat the +/- controls differently than if a user clicks on the "text" part of a node. If the user clicks on the "text" part of "Economics Dept", then show the preview, but do not expand the branch. –  LarsTech Dec 10 '11 at 23:35
The problem with this is that the existing pattern across the site is that the entire horizontal row of the node should be clickable to expand/collapse. I'm don't really want to break this pattern in this instance. Also how would the user be aware that clicking +/- or "text" part would produce different results. –  Spiral13 Dec 12 '11 at 10:09

Your Answer


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.