20

It is now very common to find top horizontal menus in websites. Some reason of that might be habits and Jakob's law.

In web applications you might find a menu on top or on the left side equally. Most of the time it seems to be a combination of vertical and horizontal menus though. With no constant reason.

Apparently there is no real convention for that matter. Hence the following question:

What reasons/factors are relevant when choosing orientation of menus in web applications?

We are talking about navigation menus - leading to other pages - not action menus - modifying the current page.

The question is not about tablets or phones. It is okay not being exhaustive. Personal methodologies can also be answers.

3
  • 1
    Ooops! Question already asked and answered: ux.stackexchange.com/questions/21229/… and ux.stackexchange.com/questions/1965/… Commented May 14, 2013 at 9:39
  • 1
    In my opinion, the research mentioned in earlier questions and answers was from 2003, the article from usability.gov was in 2006. After research there have been changes in the industry based on how people behave (based on technology and experience). Does anyone think, there can be any chance to rethink about it again? I'am not challenging the researches but just want opinion whether we should see the study as 'to be followed' or we are seeing websites 'changing' and need to think on this again. For second option, the question seems valid for discussion.
    – Spicerjet
    Commented May 14, 2013 at 14:35
  • 1
    After reading the answers, I agree with you. Come on people: dive in! Commented May 14, 2013 at 14:50

3 Answers 3

17
+100

Horizontal menu's don't readily support more than one level. Nesting or indentation are difficult to achieve, leading to many hard to use solutions widely documented in many articles and here on UX.SE. I'm no big fan of the Windows 8 website for instance, at the third level deep it just becomes weird.

Web documents are usually laid out for scrolling vertically. People are more used to scrolling in this direction and both hardware interfaces (mice, trackpads) and current HTML/CSS standards are designed to primarily support scrolling vertically. This makes that the width of a web document is usually fixed, while the height is free to grow with content. Horizontal space quickly becomes a problem.

There usually is very tight limit to the amount of items a horizontal menu can harbor, especially if you need to accommodate a 1024 pixel wide screen while using a 16 pixel font-size. Users can change font-size on the web, for instance if they have limited eye-sight, which increases this problem. There are hardly any real solutions to this space problem. Wrapping a horizontal menu over multiple lines is also problematic, e.g. if only one item wraps to a new line it breaks the visual unity of the menu. Wrapping also makes it near impossible to have multiple level and interferes with drop-down menus.

In the context of applications another issue supports choosing a vertical menu for navigation: UI elements (e.g. button bars) for interacting with the current page are usually laid out horizontally. This matches most common desktop applications, except perhaps PhotoShop and Illustrator (and similar), but they just put buttons everywhere :). Also, buttons need to be visible, to make sure all available functionality is visible to the user. While people are used to scrolling vertically, most displays actually offer more space in the horizontal direction. Also, actions can usually be offered by using icons (especially if they're common like "save" and "delete") rather than words, which saves a lot of space in horizontal direction (but hardly any in vertical direction).

Having a horizontal bar also offers the possibility of fixing that bar to the viewport (i.e. have it stay put at the top of the screen even when the user scrolls). This is by now common behavior in web-based mail clients, and many web apps like Facebook, Twitter, etc. While you could fix a vertical button bar, vertical space is more limited and could also quickly become problematic. Facebooks horizontal bar sticks to the viewport, while the vertical menu scrolls with the page. This is a strong advantage to a horizontal menu, so you could opt for your most important navigation to go there.

So, in many ways horizontal menu are preferable. If you can make yours work for the screen and font sizes you need to support, go for it. Just make sure you visually differentiate with button bars etc.

However, vertical menus scale better in both length and depth, so if you need to offer lots of items, go vertical.

Also, you can use both. Top level navigation horizontally, sub-levels vertically and on the left. Or mix it up with a mega-menu.

2

Horizontal menus and vertical menus are needed to aid information architecture - otherwise there is a danger to end up with the menu like the one on old Amazon website (could not find image unfortunately).

Typically, horizontal menu would be used at higher level, perhaps even horizontal subnav, but you definitely would not want to have a third layer of horizontal subnav - hence vertical one is required. At that point you might enlist other nav options such as tabs, filters etc.

If the site does not have deeply nested pages, all the things you mentioned apply - e.g. it might depend on the actual content - blogs lend themselves well to vertical ones as there is space on the sides for the list of folders/tags.

Another aspect to consider - will your menu keep growing? if so - vertical is better suited. Again - blog example is appropriate here.

Good luck

1

I think it would be fair to say that the user interface has to be designed for the content first. It is much harder to take into account of things such as the user environment, hardware devices and habits because these are much more variable. On the other hand, with content it is much more feasible to take into account of the types of elements, the number of items and the interaction/behaviour.

To answer the question, I would say that the trend is that horizontal menus appear to be more acceptable for displaying a large amount of content (as with mega dropdown menus), whereas vertical menus don't seem to be used for this purpose as much. Otherwise, generally you would start with the content (with some information architecture design analysis) and work your way through some or all of the points listed that are applicable.

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.