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…
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.
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.
In reality, with increasing phone sizes, the mapping has somewhat shifted:
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:
Google also recommends bottom navigation in their Material Design guidelines.
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.
Nike does exactly the same, it just switches the hamburger and puts it on the right.
Who does it right? The Chinese. Ali Express has a nice menu at the bottom on their mobile website.
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.
