The left-hand navigation sidebar has been a feature of web usability since the year dot. Now it seems to be dying out. What happened? And what are the implications for content?
The left-hand navigation sidebar isn’t seen as much as it used to be. The BT website doesn’t have it. The BBC website hasn’t had it for a good few years. In the world of financial services, the more traditional brands such as Hargreaves Lansdown have kept it. But new players such as Nutmeg don’t see the need for it. In fact, it’s only really e-commerce sites – with Amazon and eBay among them – who still rely on left-hand navigation.
In 2014 a Marketing Week survey found that only 4% of the top 100 consumer brands had left-hand navigation. See a report on the survey.
There are a couple of design trends that might be behind this shift. Here’s how they impact content.
There’s a trend in web design at the moment for attention-grabbing images that fill the width of the page. As a result, there’s no space on the left for a vertical navigation bar. Unfortunately, there’s also little space left above the fold for content. For an example, see the Speedo homepage.
Sticky Content’s information designer Andrew Park says, 'There’s certainly an initial visual impact with these kinds of pages. They’re great for brand awareness. But they’re not telling you much beyond that.'
There’s been argument among usability consultants for the last few years about which way to design for mobile. A dedicated mobile site separate from the desktop site? Or a responsively designed site which flexes across mobile and desktop?
It has to be said that responsive design seems to be winning. The consequence is a mobile-first user experience where all space-consuming navigational conventions – such as the left-hand sidebar – are eliminated. In their place emerge the new navigational conventions of the long scroll – such as concertinas, sticky top navigation (where the top nav floats down the page) and the ‘nav burger’ icon.
NN/g research suggests that mobile-first design is making content more part of the conversation in web design. At the same time, NN/g makes the point that deep desktop content – which generally favours a cascading left-hand navigation feature – doesn’t translate well to the shallow layers of mobile. See the NN/g mobile update.
This probably explains why e-commerce sites – with their depth of product content – still retain left-hand navigation.
All of which suggests that the real value of left-hand navigation was never that it was on the left-hand side of the page. It’s that it offered a way of structuring content across many levels of a site to make it usable.