Have you noticed how much easier it is for our thumbs to reach the bottom of our phone screens, rather than the top? Whilst phone sizes continue to increase by the year, on-screen navigation remains fairly unchanged. Yet, wouldn’t it make more sense for bottom navigation to be used, much like app design, over the more traditional top menu? Let’s find out.
The industry’s standard
The use of hamburger menus in mobile design has been the industry’s standard since around 2001 when it was popularised by Ethan Marcotte’s book, ‘Responsive Web Design’. Since then, responsive mobile experiences have opted to hide the navigation elements via the hamburger menu at the top of the screen, to minimise clutter on smaller devices. Like desktop navigation, mobile menu buttons have traditionally featured at the top and over time it’s become the go-to place people expect to find navigation.
The need for change
It’s always a challenge to change something people have become accustomed to, but, if the easier navigation outweighs some initial confusion, it shouldn’t be too long before users start to enjoy the benefits. After all, think about how angry everyone gets when Facebook or Instagram change their interface, followed by how quickly people get over it.
As designers, we aim to make the user experience as easy as possible, by constantly evaluating how our design decisions influence the user; what encourages interaction and what deters it? So, when we consider that most people use their thumbs when navigating a mobile screen and how much bigger phone screens have become, having navigation at the top starts to become less logical. Let’s take a look at the thumb placement of users on smartphone screens.
This indicates that placing actions at the top of the screen discourages interactions from the user, by making them harder to reach without adjusting the phone or hand placement. Evidently, we are all that lazy, so why have one of the most used buttons where it’s most difficult to reach?
The smarter solutions
The solution is as simple as moving key actions down the screen. App and mobile operating systems have been using this logic for years, mainly with a tap bar approach or simply having your most useful apps at the bottom closest to your thumb. (Side note: if you haven’t arranged your most-used apps towards the bottom of your home screen on your phone, do it now!). A tap bar prioritises three to five of the most common actions and lists them in a row. It’s likely you use these daily, however, tap bars are limited and don’t support secondary navigation items. That’s why hybrid solutions with tabs and a burger menu are best suited for sites with huge amounts of pages. For mobile navigation, the single burger menu positioned towards the bottom is still the best balance of flexibility and uncluttered UI (user interface) for most sites.
As some mobile web browsers have their own bottom navigation, it’s key that the website navigation is clearly contained and visually separate from the native browser controls. One solution we’re seeing more and more is a floating navigation bar or button that contains a menu icon and logo (home link). It might feel like it’s initially in the way, but people tend to use the top of the screen to track their reading, so it actually makes it easier to digest content by having the menu out of the way. Plus, there’s always the option to have the bar disappear when scrolling down and then reappear when scrolling up.
It’s clear to see why dropping mobile navigation to the bottom of the screen makes sense but it’s not a common practice yet. Whilst early adoption might cause some initial user confusion, the benefits of usability are certainly worth it and we believe it will eventually become standard practice.