4

I was wondering, in which case are horizontal tabs better, and in which case are vertical tabs better?

There is one answer I can already give, but I'd like to see if there are more.

Because you usually have more space vertically, vertical tabs are better, when you have a lot of tabs, whereas horizontal tabs, can give a quick overview of a small number of tabs.

Improve this question
2

4 Answers 4

Reset to default
2

Tabs are more of a navigation element. Once you are in the tab section you don't want it to be along the content. Vertical tabs share the same horizontal space with the content, its really not a great idea unless you want to grab the users attention while they are on your content.

I believe content should be wrapped with elements that compliment it further. To keep content clean I prefer to use horizontal tabs. Remember keep minimum number of tabs, its a lot easy for users to choose.

Improve this answer
4
  • 3
    I have to disagree with "Remember keep minimum number of tabs, its a lot easy for users to choose.": Use the number of tabs that makes sense for your content. See UX Myths article on this topic: uxmyths.com/post/931925744/…
    – Phil
    Jun 16, 2011 at 14:10
  • I agree, it again depends. When you have a critical path drawn for your users then you control his experiencing by just offering what is needed. Too much cognitive load for armature users is not good. Works good for mission critical products where the user needs more control but not ideal for leisure products.
    – Siddharth Menon
    Jul 3, 2012 at 7:05
  • Any research to back this up?
    – Steven Jeuris
    Nov 8, 2012 at 10:11
  • I've never seen uxmyths.com. Thanks @Phil!
    – Homer
    Feb 4, 2014 at 17:50
1

We have to keep in mind that mental models will affect the perception of our elements. So in this case, the use of tabs will depend on your audience and the kind of application. I agree with #Siddharth Menon, tabs are a navigation and usually expected to be horizontal (as they usually are in real life). I wouldn't go against vertical tabs. Maybe they can come in handy in touch devices, but again I would test it to see how the user reacts.

Improve this answer
2
  • Could you give an example of 'as they usually are in real life' please? When I think of e.g. a binder with interspersed sheets indicating sections, they are very much vertical.
    – Steven Jeuris
    Nov 8, 2012 at 10:03
  • Oh .. you are talking about those 'filing' cabinets? In my opinion that's a bad comparison. Filing cabinets don't simultaneously show content and tabs, they are just used to search through documents, then to take out the correct one.
    – Steven Jeuris
    Nov 8, 2012 at 10:05
0

horizontal meets the expectations of a user's idea of real world tabs. Vertical are less common in real life, and do not often appear in large vertical groups.

AND, horizontal labels are easier to read, vertical is difficult.

If 'tabbing' vertically, another cognitive artefact should be used to represent the multiple pages/items.

Improve this answer
3
  • I was just about to add an answer suggesting the exact opposite. My real-world experience of tabs is in a document/office context and has featured very many more vertical tabs than horizontal ones! Interesting...
    – Sam K
    Jun 16, 2011 at 12:50
  • Any sources to back this up? I feel this is rather subjective, and I have some issues with the arguments you make as e.g. also mentioned in my comment on Emiliano Horcada's post.
    – Steven Jeuris
    Nov 8, 2012 at 10:07
  • Regarding ease of reading, vertical tabs don't necessarily have to use vertical text. For an example, see the Drupal admin interface. (This is one thing it gets right, in my opinion.)
    – iconoclast
    Aug 25, 2014 at 4:03
0

Horizontal navigation
pro: takes up little vertical space and all space around it will be useful for other items
con: can only fit a limited amount of items in one line (you want to avoid breaking your horizontal navigation into multiple lines)
Sub menus will be always be a bit messy.

Vertical navigation
pro: you can add as many items as you like and sub items can have clear relations
con: It can be confusing to place items under your tabs, (best would be to leave it empty)

(answer from duplicate thread: https://ux.stackexchange.com/questions/19862/tabs-on-the-left-or-on-top-of-a-page/19866#19866 )

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.