Engineering
Menus/Navigation handlers in mobile
A look at common menu and navigation patterns for mobile web and app interfaces.
1 min read
Navigation and menu handlers are an important element of mobile apps and mobile websites. Below is a small study I did on my iPhone, and the conclusion I came to: there’s no standard for where the navigation handler sits across apps.
Most websites follow the right-side menu handler, including Twitter Bootstrap.
Starbucks Website’s responsive navigation handler is in the right side.
Microsoft’s Website’s responsive navigation handler is in the right side.
But when it comes to apps, almost all of them follow the left-side menu handler.
Path App’s navigation handler is in the left.
Google+ iPhone App’s navigation handler is in the left.
FourSquare iPhone App’s navigation handler is in the left.
Vine iPhone App’s navigation handler is in the left.
Nike+ iPhone App’s navigation handler is in the left.
Unfortunately, some apps still follow the right-hand side menu handler.
Chrome iPhone App’s navigation handler is in the right.
Apple iOS’s Music app’s navigation handler is in the right.
Nike+ iPhone App’s navigation handler is in the left.
As a right-handed phone user, I always prefer the menu handler on the right side, but there’s clearly no consistency across apps. I’d like to see Apple let users customize the menu handler’s position to suit their preference. For websites, it’s a bit more complicated, though web designers can still make an informed decision based on UX testing, in-lab user testing, and anonymous data tracking with tools like Google Analytics. This becomes especially straightforward when designing for a well-defined target audience.
Related reading
-
Performance Checklist for the Mobile Web
A practical checklist for improving performance on the mobile web, from asset loading to rendering.
-
How to Enjoy Programming in the LLM Era
Why coding feels less fun since AI assistants arrived, what METR's productivity trial and Stack Overflow's trust data actually show, and the personal habits and team practices that keep comprehension of your own system yours.
-
How to Do Product Development: What to Include, What to Avoid
A long-form, evidence-backed guide to product development with industry examples, practical frameworks, and hard-earned lessons.