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

Advantages:

  • Hierarchy is very clear

Problems:

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

B: List + tabs

would be another solution, see wireframe below.

Advantages:

  • List Items and tabs stay in place

Problems:

  • 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

share|improve this question
add comment

2 Answers 2

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

share|improve this answer
    
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 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 at 15:58
add comment

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.

share|improve this answer
    
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 at 10:31
add comment

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.