0

In our very specific use case for a certain audience, users can set settings though interactive graphs. These graphs have a set name and a number. There could be as many as 10 graphs. For reasons these graphs are called 'groups'

Screenshot:

enter image description here

Now each graph is allowed to be different so I can't group the tabs. I think having a lot of tabs is kind of subjectively ugly and it might be cumbersome to switch between graphs. It also takes up a lot of horizontal space which might be an issue for smaller screens (although all our users are desktop users at the moment).

Is there a navigational UX alternative to having a row of tabs?

Improve this question

3 Answers 3

Reset to default
2

Nesting Tabs

It's an alternative when grouping isn't possible: a horizontal panel with nested tabs.

enter image description here

Example di.fm

Horizontal Navigation

Just one page with horizontal scrolling site + pagination

enter image description here

Example parsonsbranding.com

Full-height Navigation Tabs

Just one page with vertical tabs, the number of tabs are the same but being vertical they take up less space.

enter image description here

Example gtheimagineers.com

Improve this answer
4
  • 1
    Just in terms of terminology I would still call these tabs horizontal because they're laid out horizontally (so that tab 2 is to the right of tab 1). When they say vertical tabs it's usually to describe tabs that are above each other (side navigation). I think that the most common name for this pattern is an "accordion" :).
    – Vitaly Mijiritsky
    Commented Mar 16, 2022 at 6:12
  • 1
    That's right, I borrowed the term from another post, accordion makes more sense. Nor do I think that "nesting" is the most appropriate term for the first case, graphically I see it appropriate but it seems to me that "nesting" means something else for DEVs.
    – Danielillo
    Commented Mar 16, 2022 at 7:04
  • The horizontal one is kind of interesting. The problem is going to tab 7 quickly from tab 1. Is there any solution for that using horizontal navigation?
    – Gerlof Leuhof
    Commented Mar 16, 2022 at 8:09
  • Pagination controls at the bottom
    – Danielillo
    Commented Mar 16, 2022 at 8:21
0

Yes, the classic alternative to having a row of tabs is having a column of tabs :). Just like you have on the left here:

enter image description here

Also, a dropdown menu is good in that it's very scalable and doesn't take up too much real estate. Of course its drawbacks are that the items aren't immediately visible and it requires two clicks to perform a selection. So if they aren't likely to switch between the graphs often, it could be considered.

Improve this answer
0

Locate graph selecting elements as closer as possible to graph grid and make it almost a part of it like filter control. Thus user need not switch his attention from graph to separate area.

Also, it's even possible to display all graphs at the same time in deifferent colors or transparency. As well as this semmed to be mobile friendly.

Sample graph image

Improve this answer

Your Answer

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

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