Looking for advice regarding a Web design involving 3-dimensional lists

Question

I hope this is the right place for Web design advice; considering StackOverflow also, but not sure if pure design questions are welcome there?

I'm trying to design a Web page that is to display information contained in 3-dimensional lists. The data model is such that you have a list of persons, where each person has a list of lists of items. When choosing a person in the UI, that person's lists should be displayed, and when choosing one of the person's lists, that list's contents should be displayed in a separate pane. I also want to make it possible to manage the selected person's lists (add/remove) as well as list items. I'm using Twitter Bootstrap as my Web client framework, which makes it easy to create horizontal and vertical tab navigation components.

I've considered using vertical tabs in the leftmost column for the persons, and a horizontal tab bar in the main pane for the item lists (with items beneath that), but I'm thinking it'd be difficult to design a dynamic tab bar (if the number of tabs gets huge especially). As a simpler solution, I'm considering a second column of vertical tabs for the selected person's lists. Lastly, I've thought of making the vertical user tabs collapsible (accordion), so when you expand a user you can see his/her lists within the same nav component.

I've come up with three design mockups so far, of possible avenues I may explore further. Would appreciate very much if someone could provide some practical design advice! Keep in mind that it should be implementable in HTML5 + JavaScript, and should play nice with Bootstrap. Also remember that it should be possible to manage (add/remove) lists and items. Feel free to suggest designs that diverge from my mockups.

P.S.

Don't worry too much about my using the Twitter Bootstrap framework; if you're not familiar with this, it works through CSS definitions and can be customized so I'd think any HTML(5) design you come up with should be possible to integrate with it without too much hassle.

---

---

---

Answer 1

If you have 3 levels of navigation for every user, and no idea how long the lists would grow to be, its best to differentiate the list navigation visually. Take a look at 37 Signal's implementation of multi-level navigation in their redesigned product, Basecamp Next:

A list simply pops open on top of a parent list, getting complete focus from the user, and no confusion whatsoever.

Technology wise, it totally depends on what you want to show the user in those lists. Are the list dynamically generated? If they are, you might need to come up with the backend implementation at the same time you design your UI.

The key here is to remember that your UI should help the user focus on their task, and then get out of the way.

Answer 2

One Note of Caution

Do not use top and left tabs together (As suggested in the first mock up). I am telling you through experience and as well as results of user-testing on that model which revealed that this model flops - perfectly.

Coming towards implementing 3 levels of tabs, this is always difficult to handle 3 levels of navigation. If I had to deal with 3 Tabs at first, I would try my best to bring them down to 2 levels but if they were inevitable, then 3rd tab can changes its appearance in someway so that user would comprehend 2 Levels of Tabs and 1 level of "different tabs".

Try to look at Commonwealth Bank website which is using the same but slightly different way. The 2nd Big Drop Down also used to be a tab which is not changed into DROP DOWN and this helps.

Also if you could bring your 3rd Tab few hundred pixels away from your 2nd tab, it becomes easier to use them. The same screenshot given below is a good example of that approach.

Answer 3

It depends on the common usage for most users. For example, if it's common for a user that is looking into a specific person to see which other persons are using the same list or not. Once you figured this out, I would try to separate at least one dimension to a menu item which will make it simpler for a user to digest.

Answer 4

Depends on how "fast" you want to enable the user to "travel" between the lists. Also on how many users or items there are.

If you got many users and the users got not so many lists, put the users left and the lists on top.

If you got many lists and not so many users, put the users on top and their lists on the side.

If don't know how big each of the lists can get, I would recommend a tree-view, since it is exactly what you need, a list of lists (of lists of lists etc.)

This can get pretty confusing if you don't have a real tree structure in the background. Like if a list can be owned by different users.

But if the interface is just for explorative purposes, this can work pretty well.

Answer 5

Your third approach is the best one. Persons and lists are dynamical items which I wouldn't represent as tabs, because user can add any number of these items.