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.

Has anyone come across data table UI design/patterns that also show some form of hierarchy? I am trying to think of examples similar to Excel, but used in web applications or mobile apps because it seems to be more prevalent in traditional desktop applications but not web applications, as many designs tend to favor flatter and simpler ways to present information.

Are there any clear usability issues/concerns with using data tables to present hierarchical information compared to traditional tree view or even the accordion UI component?

Are there also technical constraints that prevent it from being used more often?

enter image description here

share|improve this question

4 Answers 4

ExtJs Toolkit offers two of these. You can see them in action here.

Other than that these are not easy to implement and thus not part of many toolkits, I don't see any technical constraints.

TreeGrid

The ExtJS Treegrid

Which is essentially a tree with extra columns.

Good when parents and children are all the same type.

Group Feature on Grid

A screenshot of an ExtJS Grid with grouping raws.

This is good when there's a two-level depth relationship (like Category -> Items).

share|improve this answer

I think what you are looking for is a treetable pattern http://quince.infragistics.com/Patterns/Tree-Table.aspx

The advantage of tree tables is that it can show the same information that a table can show in addition to hierarchy of elements. Usually users with technical background like using tree tables because it gives them more visibility than a tree or a table alone.

It's definitely more common in desktop applications that on the web.

share|improve this answer

There is an application called Treesheets. It is not beautiful, and the presentation cannot be used 1:1 for web, but if you spend some time playing around with it, you will get the hang of what it feels like to work with such data in a UI designed specifically for it (as opposed to the clunky Excel solution) and where the problems are. Note that the user has to go through a very short tutorial (took me 10 or 15 minutes the first time) before starting to use it efficiently, so you will probably need some simplifications if you are allowing editing. Non-editing is much easier, as the tutorial mostly covered shortcuts for navigating and creating a new hierarchy level, or deleting the previous one.

On the side, it is also a very useful application for writing down information whose structure you don't know before you start writing (e.g. taking notes or creating an outline from scratch).

share|improve this answer
    
+1 for a very interesting program. Definitely would like to see something like this incorporated into Microsoft OneNote. –  Michael Lai Sep 10 '13 at 22:31

A usability concerns I saw are:

  • lack of direct manipulation in Excel-like grouping (besides Excel creates headers below the group by default, summary-like, but it's beyond the question)
    enter image description here
  • for some users relationships between header and + button are unobvious as they located rather distantly

Treeview and accordion are the direct manipulation controls, as content and functionality are in one place. Triangles or + signs near the content are clues of their interactiveness.

share|improve this answer

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.