Lars Damgaard
strategic user experience designer
June 3rd 2013

The ergonomics of the three line navigation pattern: left or right

Providing good, clean and simple navigation on small screens is still a big challenge for interaction designers, especially when working on large websites with complex content hierarchies.

I have discussed this topic earlier, but this time I will focus on the three line navigation pattern. You know, the little icon that looks like this ☰ and has established itself as a new visual standard that more and more users can understand and interact with intuitively, particularly on small screens.

The symbol is usually positioned in the top right or the top left side of the screen. However, among interaction designers, using the top left corner as the location seems to be much more prevalent than using the top right corner. This is weird when you think about the way we interact with our smartphones.

How people use their smartphones

According to this study that I stumbled upon here the other day, people are pretty likely to:

Top left corner is hard to reach. Top right corner is easy to reach.

Add to this that the thumb is a pretty short finger and you have yourself a situation where putting an important interaction element in the top left corner is ergonomically the most difficult spot to reach on the entire screen, still assuming that users hold their device in their right hand, using their right thumb to navigate.

ytournel_iphone
This is even more true if they have an iPhone 5, where the journey to the top left corner feels even longer.

In some cases, it will probably be argued that this it should be hard to reach navigation, because content and not navigation is what matters when working on small screens. However, this is a false assumption in my view.

Follow the thumb when designing for mobile

From an ergonomic perspective, putting the three lines icon (or any other navigation symbol for that matter) in the top right corner on small screens is more natural, when taking the actual, physical use of small screen devices into consideration.

Or put differently by words of Luke Wroblewski: When it comes to designing for mobile, it makes sense to follow the thumb.

Thanks for reading.

Related to what you were just reading
December 6th 2012

Are mobile users less interested in music, tennis and books?

Navigation on websites that have lots of content is tricky in the era of small screens. Proven design patterns from the old desktop world that we usually rely on in order to organize content, do not work very well in smaller…

Read more