Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

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.

share|improve this question
add comment

7 Answers

up vote 3 down vote accepted

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.

share|improve this answer
add comment

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.

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.

share|improve this answer
    
Good point. I think most sites that have 2-tiered navigation (main and contextual) use a vertical side menu for the latter. –  Lèse majesté Nov 18 '10 at 17:22
    
yes. jakob nielsen does some research into these kinds of problems... :) –  JoséNunoFerreira Jun 6 '11 at 15:31
add comment

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.

share|improve this answer
add comment

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.

share|improve this answer
    
"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/… –  blunders Nov 15 '10 at 4:37
1  
@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... –  DisgruntledGoat Nov 15 '10 at 13:38
add comment

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.

share|improve this answer
add comment

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.

share|improve this answer
add comment

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?

share|improve this answer
1  
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. –  w3d Nov 15 '10 at 0:26
    
@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. –  blunders Nov 15 '10 at 0:43
2  
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. –  cinqoTimo Nov 18 '10 at 2:07
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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