I recently undertook the redesign of the Reptilestore.ca website. I have some previous connection with the Reptile Store in Hamilton, having designed their Reptile Store Summer Camp website, as well as designing the logo for said camp. Steve Featherstone, the director of the camp, is a good friend of mine and when the Reptile Store was sold to Jon Kendrick, Steve approached me with the task of redesigning their outdated website to bring the new brand – ReptileStore.ca – into the modern age.
I sat down with Jon and Steve back in April to hash out some of the ideas they had for the new site. One of the first things Jon asked for, was a vertical-style navigation. Although I argued against it for about 30 seconds, I eventually gave way with two thoughts in mind: 1) having not designed a vertical nav for quite some time, it could be a new challenge for me and 2) why was I arguing against it? Were the merits of a horizontal navigation really that much stronger than a vertical one?
I tried to think through the process I undertook of a horizontal menu – spacing of elements, height of each item, location from main content – and tried to apply it to the creation of a vertical nav. Some of the thinking points still applied, but some seems irrelevant. My main task had to be getting the users’ attention. The first thing a user had to see was that vertical nav, so that they didn’t assume it was somewhere else. It had to be in their face.
In the end, I presented the design you see above to Jon as a final product. Each nav element is very large; each element is iconized; each element can expand into a set of sub-menus, allowing the user to see at a glance, which items belong to which main nav element.
Horizontal vs Vertical Navigation Menus
There have been a slew of articles written about vertical navs, how to design them “properly”, and why they are inferior to their horizontal
brethren. Seriously, a slew. Smashing Magazine detests them.
For sites with a large readership that have a more conservative following – such as the CBC, the New York Times, Yahoo, the BBC, Apple or MSN.com – the consensus seems to be to stick with the tried and true method of horizontal navigation.
However, a quick troll through the “Top Sites” on the web (according to Alexa) reveals a vastly different story. Of the sites that Alexa currently lists in the top ten, seven of them employ some form of vertical navigation, either as their primary nav or as a hybrid: Google (#1 on Alexa), Facebook (#2), YouTube(#3), Yahoo (#4), Wikipedia (#6), Windows Live (#8) and Twitter (#9). (To be fair, Facebook only recently employed a vertical navigation system with their use of the News Feed and Chat windows stapled to the right side of the browser window.)
What Do You Think?
Whether you are a designer or, as my sister coined, a “regular internet” user, what do you prefer to use? Do you even notice? Do you feel like you have to hunt around for the navigation on certain sites? Or are your eyes naturally drawn to well-designed navigations, regardless or their orientation? With the proliferation of mobile devices and tablets, are we forced into one or the other?
