12

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

11
  • 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, 2013 at 16:11
  • @JohnGB Do you think it'd make more sense on StackOverflow, considering it's relatively technology specific?
    – aknuds1
    Feb 7, 2013 at 16:16
  • It is a mixed question. Part of it is definitely UX, but the implementation is more StackOverflow.
    – JohnGB
    Feb 7, 2013 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, 2013 at 16:47
  • 1
    A tree view/menu is the typical solution for this. You're basically describing nested lists.
    – DA01
    Feb 7, 2013 at 16:59

5 Answers 5

3

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.

3
  • 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, 2013 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, 2013 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, 2013 at 11:39
1

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

1

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.

0

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.

5
  • 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, 2013 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, 2013 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, 2013 at 8:39
  • Hm, this looks nice, but I can't see what it has to do with your tree problem :\
    – K..
    Feb 8, 2013 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, 2013 at 9:18
0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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