Left, Right, Right (Navigational Menus)


Hexagons with light that makes no sense in context with this

If you’ve been following the saga of the changing site layouts over the past few months on both my site here or over at Rubénerd, you may have noticed sidebars shifting from the right to the left, appearing or disappearing, particularly on my site. If you’ve been following from a blog reader, I suggest you hop on over to my site now, but it’s an interesting question to ask: which is better? Left-justified or right-justified site navigation?

This is a terribly old question, of course, with documents leading all the way back to more than a decade ago such as this 2003 article, as well as additional studies from over two decades ago. But just as we’re reading a decades-old textbook in my classes on information design and media development processes, this only shows that this information never is truly completely outdated.

The inverted L

Anyone who’s ever looked into usability has probably heard of Nielsen, who strongly advocates the use of the main site navigation on the left side of the page, in what is known as the ‘inverted-L’ arrangement, where the navigation is located down the left hand side of the page, with the top of the page usually containing the necessary branding elements.

Not using a left-hand navigation constitutes bad design, in his opinion, and compliance with common practice is the most important design factor regarding Web usability. [...] users are comfortable and familiar with this arrangement and, according to [IBM's] studies, a left navigation performs well.

The main argument for the use of this layout, other than it is commonly accepted practice, is that users are more familiar with this layout and therefore more comfortable for users to navigate without getting confused. Again, if you missed that:

Bernard (2001, p. 1163) concludes: "users quickly develop common schemas for these Web objects, which underscores the need to place them in their expected location".

But this hardly makes for interesting layout when they all look roughly the same.

tetris L-block

Alternatives to the inverted-L

At the time of the writing of the paper (2003), there were few alternatives to the location of the navigation menu but more and more recently, navigation placed at the top or bottom of the page is considered better than that placed down the page. For one, it captures the user’s attention first as the first item they see, or if at the bottom of the screen, places significance on the content such that they will immediately reach the navigation once they are finished with the content.

I started off this site using navigation that was predominantly placed at the top of the screen simply because I did not have enough links to justify filling a navigation bar with them, but also for ease of visibility because it was a natural place to locate these links from most of the sites I’d seen. That’s still up for debate…

These days, we’ll probably see the ‘meat-stack’ or the ‘pancake’ at the top of the screen more often, that opens up a menu that sometimes fills the screen until it is collapsed again (particularly on responsive/mobile layouts), or appears as a left or right justified menu restricted to a portion of the page. This again poses the question of: Which side is better?

Why not the right?

Nielsen (1999) [...] theorizes that right-justified navigation areas should result in better user tasking and usability. He believes that placing the navigation menu next to the scrollbar will save users time. Additionally, he claims that a right-hand navigation and the main content area on the left should increase the priority of content.

Perhaps disappointingly, Nielsen’s logic is ‘abandoned’ to continue his advocacy of left-hand navigational menus because this “deviat[es] from the standard” and as such imposes a “bigger cost in terms of confusion and reduced ability to navigate smoothly”. However the 2003 article conducted in Germany where these quotes are from, the study shows no significant difference between the two menus.

What the study does show, however is that users do spend significantly more time exploring the content (now on the left side), before moving to the navigation (on the right).

[Users] initially spent more time reading and scanning the main content on the page [...]. This is logical assuming a typical left-to-right or even a center-left-right eye tracking pattern across the page (Schroeder 1998). The order of initial attention was apparently reversed: a looking pattern of "navigation first, content second" with a left-hand navigation becomes "content first, navigation second" with a right-hand navigation. Overall, [users] did not appear to be lost or confused; rather, they were busy scanning the main content area of the page first.

On a site such as this blog, this is a layout that I would have significant interest in, as it directs users first to the content and then to the navigation to ‘explore further’. But in my implementation, is my use of an additional navigation bar at the top more likely to hamper my aims of directing users directly to the content, or assist them? Or is an implementation like Ruben’s better, as the branding elements at the top of the page seek to be less of a distraction from the content?

That ain't right. Right?

It’s another of those ages old debates of those who write with their left hands and those with their right. As a person who mostly uses their right-hand, I’m part of the majority, and often design for this majority. What are the implications here?

Right-hand users, who make up a majority of the general population, may find a right-hand navigation more comfortable. Right-hand users are said to tend to pull the mouse towards the right of the page when not using it, thus coming to rest near the scrollbar and a right-hand navigation.

Noted, as I do often leave the cursor on the right-hand side of the screen. I also often place YouTube videos at the top left corner of the screen when I’m watching something while working. However placement of all this navigation to the right-hand side of the screen has a drawback which is that the browser’s navigational buttons are often placed at the top-left, increasing the distance between the menu and back button.

Never fear, there’s a potential solution to that. In his never-ending wisdom, Ruben was the first to implement a ‘breadcrumb’ on his website, which I quickly also adopted in my own site design.

Consequently, when implementing a page layout with a right-justified navigation, it is essential to include linking mechanisms that avoid user reliance on the browser's back button. This can include history back links or a clickable path of the user's location within the site's information structure, commonly referred to as a "breadcrumb trail".

This begs the question, however, is the location of this breadcrumb important? If it is additionally placed to the top left corner, of the content, this additionally increases the distance between the menu and alternate navigation links. For purely aesthetic reasons, I decided to align mine to the top right of the content screen instead to make the page look more ‘balanced’, but in doing this, it seems I brought the breadcrumb closer to the navigational menu.

At the same time because it is not in line with the content of the page, it feels like a ‘hidden’ element on the page as part of neither content or navigation column; and thus could be easily missed unless you’re looking for it, or there is specific attention drawn to it.

I’m sure there’s been plenty more research done in the meantime, but it shows that there may not necessarily be any correct way to design an interface, it depends on different factors from what you want to draw attention to and what kind of audience you’re designing for. As a warning to you all though, you can continue to look forward to the navigation and branding on this blog jump around the page for a long while to come. :)

Tetris L-block image from Happy Quilting