I was asked in an email recently what my feelings were regarding the placement of a navigation menu on a web site. The person asking wanted to know the latest scoop on the advantages or disadvantages of various menu placements. Is a right-hand vertical menu better somehow than a left-hand vertical menu? How about a horizontal navigation menu at the top of the page? Over the years I’ve made them all at one time or another, though lately most have been vertical right-hand menus. I responded with all I knew about the subject, then admitted the info may be dated. Here’s basically what I offered:
Left-Hand Vertical Nav Menu
The primary advantage to the best of my knowledge is the fact that almost all sites used to have the navigation menu on the left and moving it to the right would stump some users. I say “used to” because I’m not sure if the majority still offer it on the left. I suspect it is, but I’m not so sure. Regardless, not only have I felt the argument against offering a left-hand navigation menu a weak one at best, I guess I had more confidence in my sites’ visitors to have their heads resting nicely on their shoulders, instead of being stuck someplace dark. If it’s clearly marked and obviously styled, and above the fold, the visitor should figure it out. If they can’t manage that, I feel as if I am encountering an accessibility challenge I simply cannot accommodate.
Another advantage, and one I feel is equally weak, is that left-handed mouse users will have an easier time accessing the menu. I doubt it makes much of a difference at all. I say that as a right-handed mouse user because it doesn’t really matter to me either way.
Right-Hand Vertical Nav Menu
An alleged advantage of a right-hand navigation menu, as above, is that right-handed mouse user might be able to use it more easily. I doubt it. Again, to me it doesn’t really matter.
Another possible advantage, another weak one in these times, is that a fixed width site set to 760px will show full content and partial navigation to anyone using a 640px width resolution monitor. Versus a left-hand navigation menu’d site which, when a page is loaded, will offer full navigation with partial content. I think the former is more convenient to most people, but to honest, just barely. And again, nowadays it’s not a real concern.
Overhead Horizontal Nav Menu
I use this menu style least. I feel it offers no strong advantages. Sure it should be easy to see and not confusing to most, and right- and left-handed mouse users will be treated equally (for good or bad), but I can’t see that these things are terribly important.
As I wrote above, I use this menu style least. That’s because I can think of one potentially huge disadvantage: expansion. More often than not, horizontal menus break when the text is enlarged more than a size or two. Some wrap and that’s ugly. Others vanish and that’s an accessibility issue. Moreover, there’s more than one way expansion can apply. How about adding a page or two. If the menu is full already, how does a webmaster gracefully add pages? They don’t. They must settle for ugly, inaccessible, or they must use drop down menus (which can be a problem in its own right), and that may not be practical if the pages they’re adding aren’t children to existing parent pages.
Other Placement Considerations
All of the options above, even when properly listed, require either a table cell to place them (not recommended) or a few lines in a cascading style sheet (CSS) to style them into a position. The latter is highly recommended as that is the most proper way to do it (tables are for tabular data), but what if styles are off or if the site is being accessed by an assistive technology like a text browser or screen reader?
On a proper linear page, the menu, regardless of how it’s styled into position, will more than likely be either be before or after the content. According to some screen reader users I’ve talked to, it doesn’t matter one way or the other, provided a “skip link” allowing them to jump to the menu is offered at or near the top of the page. Others, however, have said they prefer navigation first. Personally I like the former option and if you turn off styles you’ll see my content first. Supposedly this may be beneficial to search, but I’d take that with a grain of salt. In other words, take your pick and remember you cannot please all the people all the time.
How about other placement options? I suggest avoiding them. If the menu is not above the fold, and not on the left, right, or above, I’d venture to say you’re being a bit too creative and are likely taking an ineffective path. Granted, here you are reading this article and seeing no navigation whatsoever, barring the home-linked masthead and footer links (that’s where the jump link will lead), so who am I to suggest anything? Did I make a mistake doing this? Maybe I did. People don’t seem to be bothered by it, but what users actually speak up giving valuable feedback, maybe 1%?! If we’re lucky! The rest grin and bear it, close their browsers out of frustration, figure it out and approve or don’t care, or simply move on like lost sheep.
My Gut Says…
If you’re still with me, you know that I am not suggesting much other than…
- Avoid unusual placements.
- Offer a skip link as needed.
- Use a proper list (not a table).
- Style and place it with CSS.
- Make it clear and obvious.
Other than that I have no opinion regarding navigation menu placement. Of course there are other considerations such as making the links keyboard user-friendly by way of styled focus, but as it pertains to placement, I really don’t think it matters a whole hell of a lot — if it ever did.
What’s the Latest?
What are your thoughts on this subject? What is the latest and greatest sentiment regarding navigation menu placement. What considerations do you make?