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


Alternative 1


Alternative 2


Alternative 3

share|improve this question
    
Asking a generic question about 3D lists is great. But when it is about your specific situation (such as asking about a specific technology) and doesn't apply to many other people, it falls outside of the scope of this site. Please modify your question to only deal with UX. –  JohnGB Feb 7 '13 at 16:11
    
@JohnGB Do you think it'd make more sense on StackOverflow, considering it's relatively technology specific? –  aknuds1 Feb 7 '13 at 16:16
    
It is a mixed question. Part of it is definitely UX, but the implementation is more StackOverflow. –  JohnGB Feb 7 '13 at 16:27
    
@JohnGB The UX FAQ does say that you should detail the software platform (e.g. Android), if applicable. I don't see how HTML5 + Twitter Bootstrap (being just a framework) would be worse than being specific to Android. –  aknuds1 Feb 7 '13 at 16:47
1  
A tree view/menu is the typical solution for this. You're basically describing nested lists. –  DA01 Feb 7 '13 at 16:59

4 Answers 4

up vote 2 down vote accepted

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:

enter image description here

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.

share|improve this answer
    
All dimensions are user controlled. That is, the user dimension is friends of the logged-in user, lists are managed by the user and so are list items (i.e., they can be added/removed). –  aknuds1 Feb 8 '13 at 8:25
    
Will look into Basecamp's UX, thanks :) Have found some other compelling options, in Isotope particularly, so there's a lot to take in for this design-challenged software engineer. –  aknuds1 Feb 8 '13 at 8:42
    
I'm currently headed in this direction, as it seems to work well in practice, i.e. click on a list to enter it and see the list contained within that. Thanks. –  aknuds1 Feb 18 '13 at 11:39

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.

share|improve this answer
    
The number of lists and items is arbitrary, as users are free to add new ones (haven't decided on an upper limit). A tree-view might make sense, but I'm not sure how to make it look good, as the standard Bootstrap control I've been using, vertically stacked tabs, is designed for one dimension only. I can add a second dimension (for children), but not sure how to make highlighting of both (selected) parent and child look appealing. The data model is a straight tree, each list has one owner, same goes for list items. –  aknuds1 Feb 8 '13 at 8:23
1  
Yes, I see. It's a big problem of UX, that many developers tend to use the easy way out, in sens of programming. Which I totally understand, I'm a software engineer myself. If you use JavaScript, you can probably use a javascript lib and fit it to your needs or if you feel frisky, write your own tree. –  K.. Feb 8 '13 at 8:34
    
I'm currently considering a "tile" based UX inspired by SkyDrive or a "pinterest" style one as implemented by Isotope or Masonry. I only became aware of pinterest/Isotope/Masonry yesterday, so my head is kind of spinning due to new ideas :) –  aknuds1 Feb 8 '13 at 8:39
    
Hm, this looks nice, but I can't see what it has to do with your tree problem :\ –  K.. Feb 8 '13 at 9:11
    
I'm thinking I could represent the first dimension (persons) with vertical tabs on the left, the second dimension (lists) with "tiles" on the right and the third dimension (list items) with a view that is reachable by clicking a "tile". SkyDrive has three dimensions of navigation like this. –  aknuds1 Feb 8 '13 at 9:18

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.

share|improve this answer

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. 3 Tabs used by commonwealth bank

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.