There’s an article on Smashing Magazine that suggests primary vertical (left-hand) navigation is an out-of-date method with many flaws. The author, Louis Lazaris suggests that vertical navigation discourages information architecture and has usability problems.
Check out the article here:
What are your thoughts?
It’s possible that left-hand vertical navigation is out-of-date, but the author’s alternative suggestions are far worse, in my opinion.
Horizontal navigation may work for a small site in a language that uses short words (like English or French). Otherwise it requires a lot of horizontal space (our office site has 19 main nav links with long words like ‘Informationsmaterial’) which leads to accessibility or usability issues.
Drop-down menus have horrible usability and presents many accessibility problems as well. As someone who almost exclusively uses keyboard navigation I’ve encountered two types of drop-downs: those that don’t work at all for keyboard navigation and those that drop down annoying long sub-menus when I’m trying to go past them (with Shift+DownArrow in Opera).
From a usability perspective I actually think that a vertical navigation belongs on the right-hand side (in a left-to-right reading environment). Why? Because that’s where the vertical scroll bar is. If you reach the end of a long page and use the scrollbar to go back up, the mouse would then be in a position well suited to further navigation. With a left-hand menu you’d have to drag the cursor across the screen.
He sure says a lot of strange things.
Readers Aren’t Used to a Left-Side Menu
Yet their eyes go straight for it and it’s been used in web design for over a decade. Like links being underlined (there is no print version of either menus NOR links, so whatever Tim BL came up with 20 years ago seems to be what they say “people are used to”). I mean, could we say links shouldn’t be underlined because you don’t see it in magazines? Magazines are totally different from web pages!
Although the Dan Conaway website (above) has a few usability issues, the use of a horizontal navigation bar allows focus to be placed on the page’s content area and on the call-to-action sections (”Recent Projects”, “Consulting”, and “Ranting”). On this site, the user is drawn to these larger elements, while still being able to find the primary navigation bar at the top of the page.
Only on screens tall enough to show the three big buttons at the bottom. To me, Important Navigation Stuff On The Bottom makes much less sense, unless it’s repetitive menu items in a footer. What if the user doesnt’ think to scroll down? I’ve been dumb enough to fall for that: I thought I was seeing the whole page and for whatever reason didn’t notice the scroll bar.
Re the eye scans:
Even though two of the screenshots above show sites that have left-hand navigation, those elements on the pages did not draw the users’ eyes as often. In fact, the top sections of the pages were more successful in drawing the eyes than were the left sidebars. Therefore, expanding the content area to fill the left side of the screen is usually a better approach, since the user’s eyes aren’t going to bother with the navigation bar anyways.
Gee, could that be because once a user has navigated to the page they want to read, they ignore the menu because it’s not the content they are trying to read?
I can’t tell if those screenshots are people searching an entire site for something or not. Nielsen shows eyescans of folks searching for the US population on the Census site and they go to all the search sections: main navigation, sub navigation, the search bar, pretty much everywhere but where the population is posted (due to it looking like an ad, according to the research). But people seemed to have zero problems finding all the ways to navigate.
I appreciated that he actually linked to the study, as it was interesting to skim through. Here’s what they say about top navigation:
[quote=““the study””]
A common finding throughout this eyetracking research is that items placed in close proximity to major headlines are viewed more because of “visual bleed.” An item close to a prominent headline will receive more direct views (or “fixations”) than an item that is separated by white space or a visual barrier like a rule (or line).
We observed the same pattern with top navigation, which is closest of all the navigation placements to a homepage’s top headlines and also received the most views of the three navigation placements.
[/quote]
So, top navigation wins because it’s next to big-lettered headers, not because it’s simply at the top of the page. At the article level, they state that left-side navigation wins out.
At the bottom, in the summary, they state that their findings mean top-level navigation is ok and that is it not lost to visitors even if it’s just a small thin bar strip at the top as some web designers feared. It does not recommend switching from left navigation to the top.
The Nielsen eye scan in the article asked people to read content, not look for stuff. People will act differently depending on the task. Of course they didn’t look at the elft menu: it’s easier to not look at when you’re trying to read, while a top menu, being close to larger text of a header, will.
The truth is, those two benefits (namely, the flexibility to use longer link names, and the ability to easily increase the number of primary links) may be indicators that a site lacks purpose, is poorly organized, and was designed without much thought given to content or site goals. Boasting about the maintainability of a vertical navigation bar is not a valid benefit if it is accompanied by a vague purpose and poor structure.
Lawlz, let’s see an international site with large menus dealing in multiple, multi-length languages with horizontal navigation being better than left or right. They are not easy, but doing horizontal anything means you need to think extra super long and hard about how you’re going to deal with wrapping.
His list of sites where he considers the use of the left-side navigation as “good” don’t seem much different from the ones that are “bad”… I esp couldn’t see what was better about the Sensis site. Why isn’t he arguing for that site to switch to horizontal menus?
While it’s intersting, and while I usually consider users as morons (we have to, because when we build a page, everything is much too obvious to us), I also consider those who surf the web to know how to use site navigation and where to find it. Sites with mystery menu navigation or cleverly blended into the page with images are a problem, but I wasn’t convinced by this article to change any sites I have with side navigation to switch over to top navigation. I did like the links to studies, so it’s a worthy article to read.
A complaint by an actual user of any of my sites would convince me much much more (tho yeah that’s unlikely… best to do actual user testing with the particular site).
I think it’s an interesting argument… I’ve always used a mix of vertical and horizontal navigation in different sites. I don’t agree with his argument that user’s aren’t “used to” vertical navigation. His point is that there is nothing outside of the web that uses that pattern, but that’s not true. Lots of devices from phones to the Apple TV have used a navigation very similar to the vertical nav on websites. And the web’s been around for 15 years, so people are pretty familiar with them by now anyway.
I do think that in a lot of cases vertical navigation (and horizontal navigation for that matter) can be poorly planned and thus really ineffective. One of my sites is a perfect example… it’s just grown to the point where the vertical navigation has too many links and sections and is hard to find what you’re looking for.
I do agree that rich hover menus from horizontal navigation (see this SP article) are much more “usable” than the standard pop-out menus you see on vertical navigation. That said, there are a few examples of the same types of mega-menus on vertical navigation.
I too have used a mix. I agree with Louis that it should be based on the content if/when possible (sometimes it matters and sometimes it doesn’t) and one of the first sites I ever did used a horizontal menu which was a totally bad terrible decision and I vowed never again to make horizontal dropdowns : ) Though I’ve gone back and made 2 mega dropdowns (keyboard accessible to boot) but the problem in the original site was, like with Tommy, the language: Dutch has really long words.
His point is that there is nothing outside of the web that uses that pattern, but that’s not true.
But even if you go ahead (as I’m tempted to do) and equate iPhones and other web thingies as, well, Web Thingies, the point is that navigation menus are not a part of the print world, other than in the form of table of contents and indexes. Like underlined links. There’s no point in saying that print media doesn’t have anything like it. People are morons, and yet people are geniuses who can learn. The usual user dichotomy: they’re smart, they’re stupid, they know what the want, they don’t know what they want. It’s our job to make sure it’s intuitive to them no matter which state of mind they’re in when they reach our site.
That said, there are a few examples of the same types of mega-menus on vertical navigation.
I like megas on horizontal menus, but I’ve not seen on on a vertical. The immediate problem I can think of is one I saw on a horizontal menu but with a dropdown that included large photos. The photos easily slid past my screen height, so there goes the mouse over to the scroll bar, but then the sub menu is gone, etc. I’d only do fly-outs or megas on a vertical menu IF there was some way to always pad the bottom so that submenus are always reachable by users, no matter the height of their screen.
I left a rather critical comment on the article, which does not seem to have made it to the approved list.
Wonder why…