Almost every site or app has navigation, and how we style it affects the user in a big way. A horizontal navigation is often (but not always) your safest bet.
Navigation is a pretty big deal for user experience designers. Every site or app we create needs some kind of navigation system. This is to get the user around what’s on offer.
I often say that Information architecture (i.e. how we structure a site) is the backbone of great user experience. What also matters though, is how we present that navigation structure on a visual level.
When it comes to styling navigation, designers have many options. There are many sites that take unique and innovative approaches to their navigation. For today though, I’ll focus on the two design patterns most common across the web.
- Horizontal navigation - putting your navigation across a single row. Usually at the top of the page, in the header.
- Left-hand navigation - putting your navigation in a vertical list. As the name implies, this is usually down the left-hand side of the page.
These two approaches each have their own benefits and drawbacks.
For many modern websites though, a horizontal approach is often the way to go.
Times have changed
Several years ago left-hand navigation was much more common. Back then, fixed-width layouts were the norm. We didn’t tend to think of web pages in widths other than 960 or 1024 pixels.
This thinking made sense at the time, of course. Smartphones hadn’t yet emerged, and most web browsing was relegated to conventional desktop monitors. When mobile was considered, it was generally through a separate mobile version of the site.
In those heady days we were also limited by quality. Displaying high resolution images was an impossibility without trashing performance. On top of that, we also gave much less thought given to content readability and white space. We were gripped by fears of ‘ the fold’, cramming as many columns into our layouts as possible with little regard to readability.
Nowadays we’re seeing some very different trends. Many popular sites have ditched left-hand navigation bars entirely, embracing a horizontal approach.
A great example is the BBC’s news & sport websites. Back in 2013, they presented their navigation as a long list in a left-hand sidebar. They have since replaced this with a much more streamlined horizontal version. This has allowed them to give the content much needed breathing room, and really improve readability.
The advantages of horizontal navigation
It allows full use of the page width for content
Left-hand navigation immediately eliminates a large part of the of the page width. It spends valuable real estate in our layout that could otherwise present valuable content.
Removing left-hand navigation form the equation gives us more space to present meaningful content. This means we can show larger text, bigger images and more interesting layouts. It gives us the space to communicate information, without it feeling cramped.
It discourages bad information architecture
A left-hand menu lists items vertically. This means there’s no limit to the number of sections it can contain. With this style, a designer can put as many items in as they want. This may initially seem like a great benefit, but it can also make us lazy.
When it comes to planning navigation, the space constraints of horizontal navigation force us to focus on what the user actually needs. It makes us prioritise.
Because the navigation needs to fit on a single row, we’ve got to keep things concise.
It’s more in-tune with how people read on the web
Back in 2009, the Nielsen Normal Group conducted some in-depth research into how people read on the web. Eye trackers revealed that people tend to read web content in an “F-Shaped” pattern. Keeping your navigation in a horizontal position up in the header plays well to this.
Because people read from left to right, this is the natural way to list out your site contents. It also benefits the content, too. As the user scrolls, they scan down the left-hand side of the page. Removing navigation from this valuable space means that users can easily skim content headings.
A horizontal navigation means we can free up the content area. It allows for easier reading (and skimming) of information.
It allows for more visually striking ‘full bleed’ visuals
A popular trend in web design is to break out of content area, and use the full width of larger screens. ‘Full bleed’ refers to images and visual elements that fill the whole screen.
These can be very effective, especially where high quality design assets are available. A horizontal navigation means that we can use whole rows, making better of big screens.
The drawbacks of horizontal navigation
We’ve already discussed how the space limitations of horizontal navigation forces you to prioritise choices in your information architecture. Normally this makes a for better site. As always though, there are exceptions.
For some sites and apps, having a large number of top-level sections is absolutely unavoidable. It might even be a key feature of the product. A vertical list of items is also easier to update and change over time. This gives more flexibility for content additions without having to rethink the whole layout.
The instant messaging application ‘slack’ is a good example of this. Users navigate between channels using a left-hand navigation bar. Because the number of channels available to a user changes constantly (and there can be a lot), a left-hand approach is ideal. It means that the number of channels can grow and reduce without affecting the overall layout. For the guys at slack, this was undoubtedly the best solution.
Designing with a horizontal navigation bar certainly isn’t the only way to do it. As always, the right answer always depends on the specific needs and requirements of your own site.
That being said, there are some clear advantages to this approach. For most modern and information-heavy sites it’s a safe and effective way to present your navigation. Given the current trends in web design, I’d say this is a safe ‘best practice’ for now.