You have just downloaded and installed an app.

You start using it.

You’ve used it for a while and need to go to a different part of an app.

To do that, you need to use the menu.

Which is at the top…

mobile navigation baby yoda

And just like that, your frustration level has just increased slightly. Instead of making your experience delightful, the app makes you work, and it’s uncomfortable.

And it’s not just you! This is true for the majority of mobile users.

pasted image 0 3

Half of the people use their phones with one hand.

Depending on if they are left-handed or right-handed, the are of comfortable usage changes slightly.

pasted image 0 2

In reality, with increasing phone sizes, the mapping has somewhat shifted:

pasted image 0 5

And where do many apps place the menu? In the “Forget about it” area.

[Sigh]

Fortunately, the consensus is shifting and it’s now a good practice to place the menu at the bottom. Here’s Facebook’s app:

pasted image 0 4

Google also recommends bottom navigation in their Material Design guidelines.

pasted image 0

Unfortunately, most of the ecommerce apps and websites didn’t get the memo yet.

Amazon puts the menu at the top and, to make matters worse, uses a hamburger menu button.

amazon homepage mobile

Nike does exactly the same, it just switches the hamburger and puts it on the right.

nike homepage mobile

Who does it right? The Chinese. Ali Express has a nice menu at the bottom on their mobile website.

ali express homepage mobile

Conclusion

  • Optimize for mobile
  • Remember the thumb size and ever-increasing screen sizes
  • Put menu at the bottom on mobile
  • Don’t put menu at the top (with very few exceptions, e.g., when the app is single-purpose and there’s minimal need to navigate or switch context)
  • Minimize frustration
  • Maximize delight

PS. When putting menu at the bottom, don’t forget to put labels next to the icons. Otherwise, the icons may be too generic or misleading and will be useless. Google learned this about Google Translate, when they found out that 38% of users didn’t know what the icons meant. When they added the labels, the features were used 25% more often.

pasted image 0 1