I have a desktop (i.e. not mobile) app with an overall two level hierarchy:

Items -> Dimensions

Typical number of items/dimensions:

  • Items: 2-40

  • Dimensions: 3-4

Item 2 -> Dimension A is of the same type as Item 6 -> Dimension A. That is, Dimension A's are like apples and apples. Not apples and oranges...

The UI should support quick and easy navigation between Dimensions of different Items.

A: Accordion

An accordion would be a UI solution, see A in wireframe below.


  • Hierarchy is very clear


  • Accordion headers jump up and down
  • List of Items become more "complex"

B: List + tabs

would be another solution, see wireframe below.


  • List Items and tabs stay in place


  • Hierarchy is not immediately understandable.

I personally prefer B: List + tabs due the stay-in-place advantage stated above, so

My question is:

In B (see wireframe below): How do I clearly indicate that tabs are sublevels of the list selection?

Accordion -versus- List + tabs


I think you can achieve it by encapsulating the tabs:

enter image description here

(Plus, gegarding the number of the items, you coul still use some grouping of them.)

  • Nice idea and mockup! A challenge is, though, that the list of Items may grow to the extent that a vertical scrollbar appears on the right thus visually "detaching" the selected Item from the tab space on the right. However, using a bit of padding to the overall tabs container and applying the same background color to that as to the selected Item might do the trick. – agib Feb 7 '14 at 15:07
  • Yes, and another way to do it would be grouping items - if possible, of course (just try to visualize the list of items split into groups - might work, but would need some nice idea to implement it visually). – Dominik Oslizlo Feb 7 '14 at 15:58

You might consider the basic, well understood treeview:

a tree view hierarchy

The advantage is that it's a well established convention that most computer users already understand how to use and the hierarchy is crystal clear. I suppose in your case there's a disadvantage of the subitem type (dimension) not being very apparent, but that could be mitigated by styling the subitems to indicate their type. E.g. dimensions of type A could have a red background, type B could have as blue background, etc. or each dimension could have their own icon, or use both color and icon.

  • You're right, a treeview is familiar to most people. However, the interaction/navigation quickly becomes fiddly with expanding and collapsing back and forth. Furthermore, I believe it would be overkill in this situation with only to overall levels, Items and Dimensions. – agib Feb 10 '14 at 10:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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