iPhone X Web Navigation Concept
Choosing hamburger menu button or tab bar navigation is an old debate in mobile application design. At the moment, it seems that tab bar navigation is winning thanks to the ever increasing mobile screen sizes.
However, mobile apps adopting the tab bar navigation, most of the websites are still using the hamburger menu buttons as their primary navigation. Even if this navigation solution is not usable with one hand on bigger mobile screen sizes.
Defining the Key Pain Points
Most of the time we use our phones when we’re on the go. During commuting or walking we want to be able to make quick interactions with our phones even with one hand. Often times in these situations our other hand is carrying a bag, a coffee mug or just holding handrail on a bus.
Using a traditional website navigation with one hand, especially on a larger device is quite a challenge, because the hamburger button is always in the top left or right corner of the screen.
The Challenge
Over the years more and more designers and developers decided to put a fixed navigation bar at the bottom of the website. This behaved like a fixed header navigation in case of desktop views, but on mobile it was glued to the bottom of the screen instead the top.
Later, next to the hamburger menu button a few action items appeared as well, like phone, email and direction indicators, which enabled the user to quickly access the most important elements of the website with one hand.
However, on the iPhone X this solution is no longer useable, since the indicator for accessing the Home screen is always on top of the web content, which makes all the bottom positioned navigations distracted and broken.
Execution: Design
As a solution to create an easy-to-use website navigation, which looks good on every mobile device including the iPhone X, I created a floating menu button at the bottom of the screen.
This fixed positioned floating menu button is always reachable with one hand either the user is right or left handed. In order to create a solution, which cannot be affected by rounded screen corners or overlapping Home screen indicators, I decided to go with a button instead of a full width navigation bar. I positioned this quick menu button near the bottom of the screen, but not too close to the edges. This way it’s comfortable to reach and not affected by overlapping UI elements or rounded screen corners.
After tapping on the floating menu button, the user gains full access to the navigation of the website along with quick actions like calling the company, sending them an email or starting a navigation to their address.
(The only downside of this solution is that in case of iOS Safari if you want to tap on any element near the bottom of the screen, after the first tap only the Safari tab bar will appear and the second tap will activate the website navigation. However, this is a trade-off in order to be able to use the website with one hand and if the floating action button is positioned correctly it’s possible to trick iOS Safari and bring up the navigation after the first tap immediatly.)
Execution: Prototyping
During the prototyping process, my goal was to create an interaction, which is quick, short and responsive, while making sure that it’s feasible from a developer point of view as well.
Takeaways
This concept makes website navigations easier with one hand even on larger mobile devices.
However, there are some trade-offs to this concept, like the always visible floating navigation button at the bottom of the screen (which can be built in a way that it’s only visible when the user starts to scroll upwards and disappears on downwards scroll).
If you have another idea how we could make the mobile navigation better and easier to use, feel free to share it!
Thank you for reading! If you found this article useful let me know and I’ll write more in the future. :)
Follow me on Dribbble or Twitter to get notified when I publish something new. 🎉
