6

UPDATE: I ended up getting rid of the double set of tabs to simplify the experience. You can see the result on the site.

I have a UX issue I was hoping you could help with.

I'm redesigning our nav on SuperMoney to provide more layers of navigation but without taking up too much space. The site is going to be split up into three main areas - reviews, content, and tools.

See mockup:

Mockup of site with two levels of top nav, where the second level is scoped by the first, and side nav

For the content navigation, I designed the nav above which uses a double set of tabs. When you hover over Topics it will show the top level categories. Hovering over a category will show the sub-categories on the left sidebar (and relevant articles). Hovering over one of those sub-categories will update the articles shown again.

Do you think the nested tabs UX is confusing?

Improve this question
8
  • 2
    It is unusual, so it does create a bit of visual discomfort. But the way you implemented, it is pretty clear to me what is going on on the page. Have you considered using Pills for the second row? I think Tabs > Pills is more common tan Tabs > Tabs
    – Jung Lee
    Jun 28, 2013 at 2:20
  • what @JungLee said + whenever I encounter nested tabs my main concern is accidentally overshooting with my mouse and clicking one of the top level tabs (or getting briefly confused between top and second level tabs). I think you could make the secondary tabs even more visually distinct - how about lowercase/sentence case titles?
    – Jessica Yang
    Jun 28, 2013 at 3:11
  • I'm not 100% clear on how the 3rd level of information and the 2nd level work together, even from looking at your existing site. Could you explain?
    – JClaussFTW
    Jun 28, 2013 at 3:59
  • another comment: hovers for all three levels of navigation could be a bit excessive. uxmovement.com/navigation/…
    – Jessica Yang
    Jun 28, 2013 at 5:51
  • Not only are hovers excessive, they're not very accessible either. Try testing the navigation by using just your keyboard and no mouse - are you still able to trigger the different menu states and navigate around the website successfully without a mouse?
    – JonW ♦
    Jun 28, 2013 at 9:32

4 Answers 4

Reset to default
4

Secondary level tab CREDIT has strong perceived relation with main area because of the same white color and border line.

At the same time relation between top and secondary level tabs are less prominent. A user can understand relationship between them rather reading and comparing labels (i.e. analysing text) then get it visually (i.e. unconscious). So a user gets a little more mental load.

To improve visual relation between levels you could use some cues. For example, compare:
tabs
vs.
tabs

Also it looks a bit confusing the labels naming: there are DEBT labels both in tab and third level menu.

Try to create visual cues as well as logical to create strong perceived relation.

Improve this answer
3

The double tab is a strong system. It uses very little vertical space, and it communicates the idea of a hierarchy very effectively. The nested tabs are a big drawback, though. Your design deals with it pretty well, but it's still a little busy.

My favorite solution is to use a small triangle cut-out for one of the levels. For instance:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

This has much of the same benefits as the tab pattern, but looks different, and is a little bit more subtle, which is fitting for the second level of the hierarchy.

Finally, I can't tell if this applies to your interface, but just in case: don't use hovers to expose the submenu of the tab. The tab pattern is great, so long as you stick to the metaphor religiously. If a tab is active, everything on the metaphorical paper card should belong to that tab. If at any time you show tab A above the other tabs, with the content of tab B still there, you are breaking the rules of your own interface metaphor, and your interface suffers. You can use a dropdown on the tabs (which you seem to have), but only change the active tab if it actually changes (content and all).

Improve this answer
1

Well done on this. I really like the direction it's going in and the functionality looks spot on. However, the three steps until information worries me. Granted, we all like things to be easy via numbers of actions rather than intuitively taking a stab at what's relevant but, a simplified version of your architecture is looming, I feel. Have a look at Mashable.com for a great example of how it could possibly be better structured.

Apologies if this isn't in the correct place, this is my first post.

Improve this answer
2
  • 1
    Hi James. Can you go into a bit more detail about why Mashable is a good example, and also cover off what it is that worries you about the three-steps? Currently your post is more of a comment on the question rather than an explicit answer, but with a bit more detail it should be fine.
    – JonW ♦
    Jun 28, 2013 at 9:34
  • Hi Jon. I think the reason the confusion may be apparent at this stage is because we can't see what the rest of the site entails. Basically, the Mashable example gives a nudge towards the clarification of hierarchy regarding posts vs pages. The three steps concern me [perhaps worry is the wrong term] as it assumes you know exactly what you're looking for. The ambiguous number of included posts suggests there will be more if I just click on 'Credit', say. So I would bypass the highlighted posts in return for a chance at more hits on the main category page.
    – James Green
    Jun 28, 2013 at 11:13
0

The double tab navigation is not that much confusing but I will say that it may depends upon number of factors from development perspective. One of such factor is Response time.

If you hover on a particular option, then if it shows the contents a bit late, then at that time it may create confusion as in the mean time the user may hover on some other option.

So, I think it is better to use minimum of them.

Hope this might answers your question.

Improve this answer

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