6

enter image description here

As shown in the picture, I have a use case of using Nested Tabs. Is this a good experience for the user. But material design says not to use Nested Tabs.

enter image description here

If so, is this applicable only for mobile? If it is good to use nested tab's in desktop, what is the best way of using? Can anybody give some good examples for this use case? Thank you in advance :)

Improve this question
3
  • This post might help you: ux.stackexchange.com/questions/39511/…
    – Joao Carvalho
    Feb 10, 2017 at 13:27
  • 1
    The crucial words are design and guidelines. It's Material Design, and their "rules" are only guidelines. Despite the supposition prevalent in the minds of some considering themselves to be UX "designers", the only rules in design are that there are no rules. And don't talk about Fight Club.
    – Confused
    Feb 10, 2017 at 13:27
  • You don't say whether the menus are activated on hover or on click. On hover, it's a terrible experience since the user has to mouse around in precise paths so the sub-menus don't snap shut or switch. On mobile, it's all on-click, so you won't have that particular type of awfulness.
    – Ken Mohnkern
    Feb 10, 2017 at 18:21

4 Answers 4

Reset to default
2

The short answer is no -- nested tabs is not a great solution or user experience.

Problems with the design on the right:

  • The design paradigm is not intuitive to the user.
  • The user has to figure out that they can slide the secondary tabs to the left to see more. This hidden content creates a UX pain point -- analytics would show that the hidden content receives way less clickthroughs because most people never see it or know it's there.
  • The example you provided does not have any design/color/styling differentiation between the primary tabs and the secondary tabs. The lack of styling equalizes the hierarchy that ought to be shown.
  • The near proximity to each other can cause a mis-press (poor UX).
  • The top-left CTA is outside of the "Arc of Usability" which makes this navigation very difficult to use with one hand.

The Arc of Usability:

enter image description here

Even for desktop, you should avoid nested tabs. The only use case I can think of in which nested tabs may be necessary, is if you are creating complex desktop software for business intelligence, data analysis, etc. This assumes the user will gain mastery of the software and functionality becomes more important than intuitiveness.

Improve this answer
2

You said "As shown in the picture, I have a use case of using Nested Tabs. Is this a good experience for the user". Why do you think that? How can be this a good experience?

Having nested tabs is a similar problem to having multiple rows. I think is explained really well in this article, "Tabs, Used Right" by Nielsen Norman Group:

Multiple rows create jumping UI elements, which destroy spatial memory and thus make it impossible for users to remember which tabs they've already visited. Also, multiple rows are a sure symptom of excessive complexity.

Nested navigation on desktop is ok, but nested tabs are not good UX.

Improve this answer
1

I believe it is not a matter of device (Desktop or Mobile).

As we read horizontally (LTR but the same is applicable for RTL) it is easier to recognise the separation between text elements when they are separated vertically.

Layouts tend to use a horizontal Top bar so they implement a top level horizontally. However, for nested levels things start to get messy as the elements don't have the same width and each element limit gets confused with the upper/lower ones. If they did have the same width, vertical visual relations between an element and the one below would start to appear.

Improve this answer
0

As long as you provide no more as two levels it is OK. More is too complex.

Separate the child level appearance visually from the parent one. The aim is to make the app's hierarchy quickly clear to a user.

For example change the font of the child level, make it smaller and italic. Change the color, but pay attention, that selected highlighting method on both levels must be the same (dark or bright or underlined).

Add a blank line or some content between the levels(for example page title). Add some padding to the second level, just to underline that the second tabs level is inside some selected area (page) of the parent.

Improve this answer

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.