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.

Solution 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.

Solution 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.

Solution 3

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?

Comments

[MrWhite]

You seem to imply that horizontal is always better? I agree for this particular example - very short menu items. But as soon as the items get wordy then it could get very messy if arranged horizontally.

[Cesar]

@w3d: True, but that is a different subject, meaning it's an additional factor that is not related to the core matter at hand. There are a lot of factors you could throw in, but they would not relate directly to the core matter at hand. For example: hello, Hello, HELLO -- sure the casing makes a difference in how easy it is to read, but it's an additional factor.

[Cesar]

"we tend to scan top-to-bottom" is based on what observation, or research? If an observation, please explain. If research, please cite it. "it is easier to compare items quickly if they are above each other." how so? Items must be loaded into human memory for them to be compared, faster they are loaded, the faster they can be compared. Human mind only hold around 7 items in super short-term memory, designing for more than seven items is... well more than humans can handle; cite: working memory capacity - en.wikipedia.org/wiki/…

[DisgruntledGoat]

@blunders: it's based on various things I've read here and there, but I couldn't point you to any specific research. Re: comparing items - vertically is much easier because you compare left-to-right at the same time. If you are looking for specific words you can pretty much scan the first letter or two of each instantly. Horizontally, you must read one, then the other, and process each. I'm sure this is on Jakob Nielsen's website somewhere...

[cinqoTimo]

What he's saying is that it doesn't scale well. Sure, the sub-menus were short when they designed the site, and they only added a few items during the development process - a year later you have a horizontal mess on your hands.

[Lèse majesté]

Good point. I think most sites that have 2-tiered navigation (main and contextual) use a vertical side menu for the latter.

[JoséNunoFerreira]

yes. jakob nielsen does some research into these kinds of problems... :)