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:
- Hold their phone smartphone in one hand
- Use their right hand to hold it
- Use their right thumb to interact with it
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.
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.
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 moreResponsive Easter Egg by Alistapart
It’s been three years since @ethanmarcotte wrote his legendary article on responsive design, which sparked a revolution in the world of user experience design and frontend development. The image below is from that original article.
