Preview pane for various nested elements

Question

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.

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..

Answer 1

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!