Recently, we tested a new, information-provider web site for a well-known brand (the identity of which shall be kept anonymous for reasons that will soon become clear) and were fairly surprised to find the site navigation trailing down the left hand side of the page, rather than sitting horizontally at the top, where we have become increasingly accustomed to seeing it.
To check the current state of play we did a quick audit of the top 100 consumer brands (according to Marketing Week) and found that on larger screens:
- 82% had a top, horizontal navigation
- 8% had a mixture of both left and top navigation
- 4% had left hand navigation (LHN)
Predictably, the user testing showed that the LHN on this site did not perform well, which got us thinking. What has brought about this shift from left to top navigation?
Quite simply, the rise of mobile. In 2013, mobile (tablet and smartphone) share of traffic increased from 22.8% to 37%1. At these rates, it was predicted that mobile share would have overtaken desktop share this summer.
Is it any surprise that the LHN is dying out then? On smaller screens, this side nav takes up too much room, not ideal when page real estate is already at an all time low. This lack of space, and the need for mobile friendly interfaces, has forced designers to find alternative approaches, in particular, the increased use of iconography.
Interestingly the LHN retention on the site in question, and the adoption of a responsive design, forced the designers to show a burger menu at tablet screen sizes, even though there was still plenty of space for a top navigation. This created an unnecessary stumbling block, as our research shows the burger menu is still not understood by a surprisingly large proportion of users.
The irony is that LHNs have never worked well. Having spent many hours over the last 12+ years, watching hundreds and hundreds of users on web sites it has always been clear that these sideline navigations are not very effective on information sites. On website journeys, users are following a scent trail to the content they want. When on this journey, users will initially scan the centre of the page, looking for a link that gives off scent for the content they want. If no such link is found as the page design requires them to use a LHN, users are effectively ‘forced’ to review content in the centre of the page that is not relevant to them. Additionally, if you have a LHN, what do you put at the centre of these ‘navigation’ pages (i.e. the ones you have to trawl through before getting to the meat). If you put in content, it’s unlikely to be relevant; if you put in links, you're just duplicating what is in the LHN, confusing users.
So we reckon you should (in most circumstances) avoid a LHN. This design idea has never been a good one and in age of the mobile it’s just bonkers!
