Pros and cons of horizontal menus versus vertical?

Question

I've long wondered if there should be a preference for using horizontal navigation menus, or vertical ones. I've used both before, on various websites, and can see each having pros and cons.

Is there any concrete data available on this subject? I'm interested in accessibility and usability concerns.

Answer 1

Aside from space issues and the ease of scanning, there are a few other factors you should take into account:

Horizontally-arranged menus (of horizontally arranged languages) means more mouse movement to get from one item to the next.

However, it will be easier to go from a top-level menu item in a horizontal menu to its corresponding dropdown menu than it is to go from a vertical menu item to its corresponding flyout menu. The diagonal problem is greatly magnified in flyouts as compared to dropdowns because the shared edge is so much smaller.

And then there's the issue of targeting speed. Vertically-arranged menus have more "depth" than horizontal menus. That means the user can move his mouse at a higher speed towards the menu, because they have a larger buffer in case they overshoot. Of course, if your horizontal menu is placed along the top or bottom edge of the document (i.e. infinite depth), then this is a moot point.

In the end, I think it's a wash. Go with whatever fits your design the best and then optimize usability from there. You don't want to use a vertical menu if it means creating a huge empty column underneath it for the rest of the page. And you don't want to use a horizontal menu if it means your layout has to be 2000px wide.

Answer 2

Well, I'm a developer/programmer/coding guy.

This means, I always go for some information about design before answer such questions. I like Jakob Nielsen's articles, because they research before posting.

• http://www.useit.com/alertbox/mega-dropdown-menus.html
• http://www.useit.com/alertbox/navigation-menu-alignment.html
• http://www.useit.com/alertbox/alpha-sorting.html

I think those links can help.

Now my opinion. Using horizontal menus are the first option for main navigation, specially if you consider using mega drop downs.

Also, the use of horizontal breadcrumbs, as auxiliar navigation to help users locate themselves quickly.

I like vertical navigation menus, but they tend to be ads-like, what makes users blind to them, so first thing, make sure your vertical menus are NOT like a banner or google ads.

Second, I'd prefer to use vertical menus for "context" navigation, displaying related content, or subsections items.

Answer 3

If you have menu items of one or more words then there is a physical limit to how many will fit into a horizontal menu before a scroll is required. So, for this reason I would tend to favour the horizontal menu for main/top level items.

Regarding accessibility (assuming it's visually OK) there might not be much of a difference, since they could well be marked up the same. An unordered list of links for instance.

Answer 4

I'm going to post the opposite of blunders' answer...

Although we read left-to-right, we tend to scan top-to-bottom. If menu items are arranged vertically, it is easier to compare items quickly if they are above each other.

If you have only a handful of links, horizontal is fine. Keep the names short but clear and have no more than 6-7. Of course, the other option is a combination - a few 'headers' horizontally with hover dropdowns of everything in that category.

Answer 5

The answer is probably that there are times to use both, but as far as eye tracking studies have shown, the eye scans the page in an F shaped pattern, so it is probably best to keep your navigation on the top left, or across the top.

Both could be used in conjunction as well, like a horizontal menu across the top for navigational links (home, about us, contact, etc) and a left menu for categories, articles and the like.

Another point to consider regarding drop-down menus is that they can have SEO implications. Danny Sullivan at Search Engine Land suggests that drop-down menus can dilute link authority by having many links to every page and that a hierarchal menu may pass link juice better. Also, why hide navigation elements from your users in a drop-down where they may miss what they are looking for.

Answer 6

IMHO, I tend to categorize major section as Horizontal menus.. where as descriptive sections of any active major section in vertical menu.

For eg:

------------------------------------------------------------------------------
Home News Product
------------------------------------------------------------------------------

|      About Us          | |                                            |
|      Mission           | |      Here is describing content            |
|      Contact Us        | |                                            |

As Home, News and Product act as major categories I have kept them at horizontal layout, where as About Us, Mission, Contact Us are most descriptive sections of Home Page, so I have kept as vertical menu next the content display portion for easy access.

Answer 7

Pretty simple, you tell me, what is easier to read: ABCDEFGHIJKLMNOP...Z or

A
B
C
D
E
F
G
H
I
J
K
L
M
N
O
P
.
.
.
Z

When you're reading it, think about how your eye moves. With the first example, it's - - - etc. With the second example, it's Z Z Z etc; meaning your eye moves in a Z pattern. With the Z pattern your eye has to think more about the next point of information, than with the first. The closer a piece of information is to the last piece of information the easier it is to use. The more compact information is the better, you can always add space, but some information will only compact so far. For example, I can add more space like this, but it's still shorter in length if your measure the longest end to example 2: A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

I'm sure someone will post research or something, might even say I'm wrong, but fact is the my logic is simple enough that I understand it, it makes sense to me, and I don't need fancy report to tell me that it's right, or wrong... because I'm guessing that fancy report won't make sense, and is just a sample of data based on the structure of the test given...

So, what do you think?