Web Site Navigation Menu Placement
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?
John Faulds responds:
Posted: August 5th, 2009 at 9:52 pm →
I generally go with a horizontal main navigation because I often use a left or right column for secondary navigation. I generally either have menus that don’t fill the full width and can stand up to a bit of text resizing and/or use image replacement (I know it’s not the best solution accessibilty-wise but I do try and make the font-size quite large anyway).
Tommy Olsson responds:
Posted: August 6th, 2009 at 1:07 am →
There’s another – quite weak – argument for a right-hand vertical menu: if a user has reached the bottom of the page and uses the mouse to move the scrollbar slider back up to the top, then the menu is close at hand should the user wish to navigate to another page. With the menu on the left-hand side, the user has to move the cursor across the whole page width to get to it.
Like you said, I doubt that it matters very much, as long as the menu is visually styled so that it’s easily recognisable for sighted users, and semantically marked up for users with assistive technologies.
Andy responds:
Posted: August 6th, 2009 at 3:42 am →
We redesigned a big public sector website in November 2005 and decided (that is, the Web team decided) to switch to a vertical right hand navigation. You wouldn’t believe the grief and opposition we were met with for this idea. To me it’s common sense - we read from left to right, and the content is the most important element on a web page, so put the content first. User testing and eventual release proved that users were comfortable with it and it wasn’t the maverick idea the bosses thought it was.
Personally I prefer horizontal top navigation, although potentially there’s the issue of running out of space if there’s too many items. But I think this limit can help, as it forces you to think more carefully about the site structure and navigation - i.e. what is visible and what can be revealed on hover/focus in drop downs. Vertical nav means you’re always able to add another item to the list without the risk of breaking the layout - but is that’s not necessarily a good enough reason to add it!
Mike Cherim responds:
Posted: August 6th, 2009 at 5:49 am →
@John: I think you did a pretty good job with yours. I’ve always liked your site and as far as horizontal menus go it’s a good implementation.
@Tommy: You know, your “quite weak” argument has more merit than it seems at first blush. As soon as you wrote getting all the way across the screen what came to mind was one of those touch pads (which for me are not natural or easy to use).
@Andy: Bosses can be funny like that. That’s another good one, by the way, the whole left-to-right thing dictating content first. It is logical. As such I’ve always wondered if one should put nav first in the source if it’s a left-hand menu site.
Andy responds:
Posted: August 6th, 2009 at 8:14 am →
@Mike
Another natural advantage of right-hand nav - as it allows you to place the navigation after the content in the source quite easily. That said, I guess if you’re using skip links for screen reader & keyboard users, the actual position of the elements in the source doesn’t matter so much. But purely from a coding point of view, marking up with good semantic structure becomes easier when using a right-hand navigation.
Also worth pointing out that the blogging tools out there have contributed to the increase in right-hand nav layouts, particularly those that are divided into three columns (content, widgets/’latest post/comments/tweets’ and navigation). There’s a mind-boggling number of wordpress themes to choose from these days, and I’d say the majority of these have adopted the right-hand nav approach.
John Faulds responds:
Posted: August 6th, 2009 at 8:47 am →
Funnily enough, I wasn’t even thinking about my own site when I wrote that as it’s been a while a) since I redesigned and b) even had the time to do much work on updating it!
S Emerson responds:
Posted: August 7th, 2009 at 11:58 am →
The advantage with a left navigation system is that if the visitor has a small browser window it will still be visable. All web pages, when loaded, show the top left of the page by default.
Going with the above, a horizontal menu at the top of the page would also advantageous, from a usability point of view.
Megan responds:
Posted: August 7th, 2009 at 1:18 pm →
James Kalbach did a study back in 2003 on the usability of left vs. right navigation. They didn’t find any major differences between.
My opinion is that it really depends on the type of site. If you want a more content-focussed layout, then right side would be a good choice. If navigation is more important it should go on the left. Top is good in any situation (and also has the benefit of leaving more space on the screen for other elements) but, as others have said, only works if you can fit the labels in that space.
Mike Cherim responds:
Posted: August 7th, 2009 at 2:14 pm →
I think your opinion on the matter, Megan, is spot on and well-reasoned.
Elliott responds:
Posted: August 11th, 2009 at 4:01 pm →
Hey Mike,
Good to hear from you! I have been finding good feedback from several recent site designs by using a mix of horizontal across the top of the main sections of the site with a right handed, deeper navigation menu system.
The top portion allows people to quickly get to the main parts of the site, while the deeper nav on the right allows more of a “sitemap” feel for depth. I haven’t had many complaints yet, however it would really depend on the site layout and amount of navigation needed.
Mike Cherim responds:
Posted: August 11th, 2009 at 4:19 pm →
Thanks Elliott.
Luigi R. Viggiano responds:
Posted: August 26th, 2009 at 6:46 am →
What do you think about the single menubar shared by applications like in OSX? (I know this has nothing to do with the Web, but I still think you could give us an interesting point of view)
Mike Cherim responds:
Posted: August 26th, 2009 at 8:24 am →
Unfortunately I’m not familiar with OSX, but if you’re talking about something along the likes of multifunction or soft keys I don’t see an issue with it if done smartly. I guess the idea would be to make sure the users didn’t get confused by the changes. And keeping the able to navigate anywhere would of course be important.
Glenda Watson Hyatt responds:
Posted: September 2nd, 2009 at 4:27 pm →
Mike,
Thanks for detailing the pros and cons of nav bar location. I’m developing a site for a client who wants it similar to Whistler for the Disabled, which makes me cringe in terms of accessibility! I’m using your beast-blog theme, the only accessible one I’ve found so far. If the client is unhappy with the right-side nav bar, I will point her to this post. If a horizontal nav bar becomes a must, is it difficult to modify the theme? I’m just beginning to get into theme design; there’s nothing like on-the-job training!
I would like to add a font size control option tho. Can you point in the right direction for getting started, please?
Mike Cherim responds:
Posted: September 2nd, 2009 at 5:27 pm →
Hi Glenda. It’s not very hard to move it. You’d take the code out of the sidebar and put in in the header.php file. Then all you’d have to do is style it. I might be able to help with that using this simple tabs experiment. Regarding a text-size widget, I’ve never been a fan of them, but I did create a fairly accessible one in the font sizer experiment. Hope those help. The navigation can also be moved to the left size fairly painlessly if you need that.
Regarding that Whistler for the Disabled site…. ewww. That site is for the disabled?! It’s horribly lacking.
Glenda Watson Hyatt responds:
Posted: September 2nd, 2009 at 5:54 pm →
Thanks Mike, I will “play” later tonight! Out of curiosity, why your dislike for the text-size widgets? I’m always amazed how its the able-bodied who like that feature - it increases the interactivity of the site. Whatever.
Once I finish this site, I might offer my services to Whistler - the host of the Paralympics 2010! Will “they” ever get it?
Mike Cherim responds:
Posted: September 2nd, 2009 at 7:05 pm →
Hi Glenda. It’s not that I don’t like them per se, they’re neato, but it’s so easy to enlarge the text using the controls offered with the browser that it adds unnecessary clutter to a page. There are three options for many people! The keyboard, the browser chrome’s graphical user-interface (GUI), and the mouse scroll wheel, if so equipped. Unfortunately, and what makes the most sense to me, is the pro-argument for these widgets claiming their necessity stems from people not knowing that they have these tools at their disposal, or that they lack the savvy to use them. These are sad truths. An accessible site doesn’t stem from junk-on-a-page. In fact, junk-on-a-page can prove to be an impediment to some, especially if said junk wasn’t carefully and meticulously crafted to take the needs of the plethora of user-types out there into consideration.
I’ve always been one that prefers people learn to use the tools given to them, so I don’t have to do it for them; they may assume control. In my efforts, I’ve written about these things in hopes of teaching the unknowing. Unfortunately, those who need this stuff the most aren’t the ones who read my blog. They don’t care about stuff like that.
Alec Mavity responds:
Posted: September 6th, 2009 at 10:52 am →
IV always opted to place the menu on the left hand side of page, perhaps this is because im left handed who knows, but to me it feels right on the left hand side and would feel kinda difficult to navigate being on the opposite side.
I really like the idea of having the menu across the page with drop down menu’s, this would probably suite me best, I suppose one thing of interest is people who are lef handed, does they think the same as I do, might be something to consider especially since 1 in 3 people.
Mike Cherim responds:
Posted: September 6th, 2009 at 11:33 am →
How South Paws feel about this matter is definitely something I’d like to hear as well, Alec. You’re certainly right in that they make up a large percentage of the population.
dfo gold responds:
Posted: October 29th, 2009 at 5:43 am →
I really like the idea of having the menu across the page with drop down menu’s, this would probably suite me best, I suppose one thing of interest is people who are lef handed, does they think the same as I do, might be something to consider especially since 1 in 3 people.
Rich McPharlin responds:
Posted: November 18th, 2009 at 11:40 pm →
When designing a site, we almost always use the left hand top of column menu.
Simply for the reason that this is where people expect to find it. You need to view your visitors as simple and scared of anything out of the ordanary, therefore giving them what they are used to in terms of navagation and styling will reduce the number of FUD’s (Fears Uncertaintys and Doubts) lift conversion and imporve visitor return rate.
Cheers
Rich
Andrew responds:
Posted: December 6th, 2009 at 9:22 pm →
im usually against of any left or right hand side navigation areas. i usually like to place my navigation area underneath the banner (header). That way it gives me more space on the middle of the page to work out with the content but i guess its upto the designer’s preference and way of work. I used to work with a lot of banner banners and fancy buttons with interactive content and functions. Although i find flash navigation banners more interesting and dynamic, i try to eliminate it as much as possible as search engine spiders are yet to be able to read flash content and text, likely will do in the near future.
Feel free to share your opinion regarding this. you can email me back or post a response and i will check back with you
Mike Cherim responds:
Posted: December 6th, 2009 at 10:03 pm →
I’m out of the business now, but last I heard was that Flash was becoming more accessible all the time.
Xicom responds:
Posted: December 9th, 2009 at 12:51 am →
I always go with horizontal menus on the top of the page. It always give a clean look to the page and attract the user on visit of the site. By horizontal navigational menus we got really a much space to make really a attractive header and other banner type of things.