Vertical navigation and not making users think

It started with an innocuous looking post on Smashing Magazine by Louis Lazaris entitled The Case Against Vertical Navigation. The reaction was generally negative: Kyle Meyer was even prompted to write a rare blog post in defence of vertical navigation.

Louis is wrong. There are a few salient points in his argument (that horizontal menus focus the designer in his or her efforts to label menu items concisely, for example), but each of his reasons is, well, wrong. However, this is a good blog post. Louis has at least written about something that’s fundamental to web design and made the first steps in analysing current thinking and practice. It makes a change from reading about fonts, CSS3 or (ahem) HTML5.

Horizontal navigation has become a convention

Examine the design and style of many of the sites showcased in CSS galleries, and you’ll notice a strong trend towards simplified horizontal navigation

I guess this is true. Of course, CSS galleries are just that – galleries – but I think there is a general trend in web design toward using horizontal navbars and, as a consequence, users will perhaps one day expect a horizontal navbar when they encounter a page. Still, I’m not so sure that real web design (i.e. web design outside CSS galleries) has adopted the horizontal menu quite so enthusiastically yet.

But vertical navigation is more flexible

Kyle’s post explains the compositional aspects of vertical and horizontal navigation far better than I ever could. I’m more interested in how using vertical navigation can make information architecture better. Take two examples:

[caption id=”attachment_1003” align=”alignnone” width=”586” caption=”The Guardian’s horizontal navigation menu is hard to read”][/caption]

The Guardian uses a horizontal menu (well, two horizontal menus: as in everything, The Guardian’s website steadfastly denies that less is more) and is damn difficult to read. This menu would have been better rendered vertically. True, The Guardian’s site could do with a serious structural rethink, but some sites can only be pruned so much:

[caption id=”attachment_1004” align=”alignnone” width=”586” caption=”The BBC’s vertical navigation menu works really well and doesn’t ‘waste’ screen space”][/caption]

The BBC’s news site uses a longish, vertical navigation menu that makes it easy to access lots of different subsections. There’s no reason The Guardian (or many other newspaper sites, for that matter) couldn’t use a vertical menu to great effect. I’m currently thinking about my  work site’s IA, and it’s hard to see the number of top level sections dropping below eight. An old fashioned vertical menu may well help.

I’ve become lazy

I have to admit that I haven’t been thinking much about the type of top level navigation menu I use when building websites. I seem to automatically sketch a horizontal navbar and place something big beneath it (be it an image, some large text etc.) This discussion got me thinking about this visual approach.

But more importantly it’s got me thinking about structure and information architecture. It’s strange how you can almost wilfully ignore information that contradicts your cosy view of things. Even when it comes from God:

It’s a common misconception that limited short-term memory implies that menus should be similarly limited to 7 items. It’s fine to have longer menus (if needed), because users don’t have to memorize the full list of menu items. The entire idea of a menu is to rely on recognition rather than recall (one of the basic 10 heuristics for user interface design). There are many other usability issues in menu design, and shorter menus are certainly faster to scan. But if you make a menu too short, the choices become overly abstract and obscure. Jacob Nielsen, Short Term Memory and Web Usability

Brevity is not an end in itself. Too often I think I’ve aimed to simply reduce the number of options available to users, probably in an effort to not make them think. But over-pruning can have the opposite effect when a group of primary users isn’t presented with an option that best fits its requirements. Sometimes presenting a long list of links is unavoidable. More important than the number of links is the labelling, readability and degree to which they serve the user’s needs. *[IA]: Information Architecture *[HTML5]: HyperText Markup Langauge version 5 *[CSS]: Cascading Style Sheets