2

I'm designing a work area in a web application where i use a vertical tab navigation on the left (a bit like this: http://patternry.com/p=vertical-module-tabs/)

The content tab with which the tab navigation is associated has a fixed height and I'm not quite sure what the tabs to the left ought to do when they exceed that height, if for example I have 50 tabs, how would I go about displaying them all? I was thinking of adding a more button underneath the tabs but don't know how the above tabs would react and especially how the associated content tab?

I can't find resources on this issue, maybe I can find some tips or help here, thx!

Improve this question
2
  • 5
    I'm thinking that if you have 50 tabs, you have a much bigger issue than the height of the content area.
    – DA01
    Oct 22, 2014 at 21:44
  • Before to design your application (wireframes), try to define the most preciselly your content. It is the most important.
    – Leaf
    Sep 18, 2015 at 15:56

3 Answers 3

Reset to default
1

I have a feeling I'm going to regret answering this, but...

Before you start building your navigation you should perform a content audit. From there you can begin to categorize you content. This will allow you to break down your content into manageable chunks. From there you can start to determine how you should construct your navigation.

The approach you're using right now is starting in the middle. At least from a UX standpoint, but since this is the UX exchange I'm basing my answer on its principals. From a UX standpoint.

This being the case, the first question would be, why are you using this navigation style? There are many examples of what I would consider to be more effective navigation styles with such a large number of potential links. This article from Smashing shows quite a few of them.

The question becomes what information are you using to justify using this navigation? Are your users going to understand/enjoy using this navigation? Is it going to make sense to them. Does it fit within your demographic?

I'm sorry to answer a question with more questions, but like I said I knew I'd regret answering this. So let me rephrase to make this an answer.

Before you decide how to build the navigation determine what type of navigation is best for your content. Do the research, you asked for examples, I guarantee if you figure out what type of navigation is best for your content you'll find plenty. Once you do that do your user research and find which option is best for them. If you do that I have no doubt you will be successful.

Improve this answer
4
  • maybe i didn't phrase it quite right, but it's not a navigation like a menu, it's actually a list of documents. Let me try to explain: it's an application for logistics service, in this example the user needs to make a document of goods to be transported. But he will have to make a lot of those documents, which result in an overview of all those documents underneath each other in the form of finger tabs. So there is really no need for content audit, there all equal to each other. Hope this helps, and yes, i have found quite some examples but not really what i was looking for
    – continuous
    Oct 23, 2014 at 15:27
  • @continuous Thank you for the clarification. I would add that information to your question for other users. I would still try to categorize your approach, however I do not believe I would change my answer. I do see your quandary though, if they are all the same document the list will still grow to an unmanageable list. Maybe you can break it down based on date, by month or year depending on the number?
    – Johnny UX
    Oct 23, 2014 at 15:53
  • thx and sorry for the late answer! you were right, i did decide to skip this option and break up my tabs into smaller chunks, it would be too clumsy otherwise. i decided to go for top vertical tabs (like word or photoshop) which you can close at any time.
    – continuous
    Oct 28, 2014 at 16:09
  • @continuous glad I could help.
    – Johnny UX
    Oct 28, 2014 at 18:52
0

Don't use that kind of 'navigation'.

If your user has 50 items to pick from, your primary concern is to make sure he can easily find the item he needs. Scrolling, collapsing or any form of hiding the items will lead to a bad UX. There is no need to display any 'tab-content' until your user has picked an item. Use this space to display the items. Therefore another method will be needed for displaying the 'tab-content' once he selected an item, so basically abandoning the vertical-module-tabs method.

Improve this answer
0

First of all I 100% agree with Jonny UX. It sounds like a design pattern was chosen which may not be the best one.

However if you are asking how to display "N" tabs vertically, see a 3rd example from Tabs design pattern, solving for “N” tabs question as I think that is what you are asking for here.

Improve this answer

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.