A couple of months ago I got tired of navigation on my phone. Most websites go with the tried and true hamburger menu (which I personally have no problem with) up in the header bar (either on the right, left, or sometimes one on each side). This is a fine navigation solution, IMHO. Maybe there are some users who don't understand the menu button, but it does get the job done.

What I'm tired of is having to reach for the menu toggle on my phone. It's just too far away for me to comfortably navigate with one hand. I have an LG G3. It's not a super-sized phone but not nearly as small as an iPhone 5. Somewhere on the medium-to-large size. I have longer-than-average fingers. So if I'm having a hard time navigating across the screen with one hand (I'm right-handed--like 75% of humans) then it must be terrible for a lot of smaller hands (and probably left-handers, too).

I'm on public transit a lot, or in the grocery store, or cooking, or doing any other number of things where I would prefer to use only one hand to surf. So I started thinking about how to make a hand-neutral navigation pattern for mobile that makes the web usable with one hand.

In my experiments, the best place to put navigation for a mobile phone is bottom-center. It allows both right- and left-handed users to access the links equally well. Placing the navigation bottom-left or bottom-right is better than the top but still favors either right- or left-handers. Here's a good example of that pattern in action:

This example does affect a few things. First, it's not as cut and dry as adding a hamburger menu to the top navigation. It might require some media queries or some (display: none)s. But don't worrry. This isn't tricky. Just have a section that shows for mobile and one that shows in the top navigation for desktop. A few lines of extra HTML really isn't going to be a deal-breaker for the user. In fact, you're trying to provide a better pattern for the user so you have to match those benefits with the drawbacks. Here is a version that allows you to see the pattern as it switches from desktop to mobile:

View this site online

In this example I was able to keep the HTML the same and just change the position of the menu through CSS positioning and media queries. On mobile, there is a nice bottom bar that stretches the full width of the device, allowing both left- and right-handed clicks comfortably. The scrolling menu is also full width, making scrolling easy with either hand. On desktop it goes to a more familiar design pattern in the top right corner to get out of the way of reading. There are no special tricks here, just some easy to implement Javascript and CSS with a traditional unordered list menu.

I'd love to hear your thoughts or other suggestions about hand-neutral navigation. Please leave a comment below or show some ♥.


1,299 10 19