iPhone X Web Navigation Concept for one-handed use cases

3 years ago from

Hey there! :) This week I experimented with a new website navigation idea for bigger smartphones and especially for iPhone X.

The goal was to create a navigation solution, which can be used with one hand and looks good on the iPhone X as well.

A good solution for this problem is to place a fix positioned navigation bar at the bottom of the website, so the user can reach it anytime with one hand as well. Then the iPhone X ruined this almost perfect solution. :D

Last week, when I played around with the iPhone X simulator in Xcode, I realized that in Safari the indicator for accessing the Home screen is always on top of the web content, which makes all the bottom positioned navigations super ugly.

As a solution, I created a floating menu button at the bottom of the screen, which looks good either on the iPhone X or on older devices. After tapping this 'Quick Menu' button you can access all the necessary navigation elements with one hand or you can quickly access the most important contact information with a tap, for example start a call, send an email or start navigation to a location.

You can see this idea visually here: https://dribbble.com/shots/3851367-iPhone-X-Web-Navigation-Idea

(I know that if you want to tap on any element near the bottom of the screen, iOS Safari will bring up the tab bar after the first tap and then you can interact with the lower part of the website.)

I'd love to hear your thoughts on this concept! Do you think using a hamburger menu button at the top left or right corner on the website is still the best solution or you prefer using a navigation, which is located near the bottom of the screen? If you prefer the latter, how would you create a solution, which adapts to the rounded screen corners and doesn't interfere with the Home button indicator on the iPhone X?

Thank you for your comments! :)