In order to make iPhone X better for web browsing, I added a navigation button to the web page

Editor's note: After the release of iPhoneX, the new screen and the iOS system adapted for it presented us with a new interaction. The interaction we are used to is no longer exactly the same on this screen with a notch, and the previous design that was just right does not seem to work perfectly on this screen. Product designer Daniel Korpai discovered the interaction problems on the mobile web navigation of iPhoneX and wrote this article.

Whether to use a hamburger menu or a tabbed navigation is a question that mobile UI designers often struggle with. As the screen size of mobile phones continues to expand uncontrollably, tabbed navigation seems to be becoming more and more popular.

However, it is worth noting that on mobile devices, apps tend to use tab navigation, while most mobile websites still use the hamburger menu as the main navigation tool. It is worth noting that the usability of the hamburger menu design is gradually decreasing on the increasingly large mobile phone screens.

Key pain points

Most of the time, we use our phones while moving, on the subway, in the supermarket, on the way home from get off work, and we often cannot use both hands to operate, as we are carrying a bag, holding a cup of coffee, or holding the handrail on the subway. But often at this time, we need to interact with the interface more quickly.

Most traditional mobile website navigations are either at the top of the page or at the bottom, but the problem is that the mobile screen is too large, and the hamburger menu icon of the web page is often located in the upper left or upper right corner of the phone, which happens to be the farthest position from the thumb.

Challenges

Faced with this pain point, UI and UX designers have not ignored it. Many designers will work with developers to place a small fixed navigation bar at the bottom of the website interface. When browsing on the desktop, it looks like a navigation bar floating in the header of the page. On the mobile side, it is a small quick-access navigation button combination that is fixed and suspended at the bottom of the page.

Later, this attempt gradually evolved into a series of quick access function buttons near the hamburger icon. These buttons represent important and commonly used functional elements of the website, which may be navigation, phone, links to specific pages, etc.

But the problem is that even with this navigation design, usability is still a problem on iPhone X, as the buttons that carry the main interaction of the browser need to be triggered from the top of the interface. At the same time, the built-in menu at the bottom of the web page is actually distracting, and the whole experience is fragmented.

Landing design

So, I thought about designing a mobile web navigation that can take into account all devices including iPhoneX, making it as easy to use as possible and solving various pain points. My method is not complicated, just add a floating menu button near the bottom of the mobile web page.

This fixed floating button is centered and lower, and can be clicked by both left and right hands. In order to avoid being affected by the rounded corners of the iPhoneX screen and the built-in navigation toolbar, I decided to make this button expand into a menu bar across the screen after being clicked. The button is located close to the bottom but not close to the edge, so it will not cover the Home button of the iPhoneX. The location is not difficult to choose.

After clicking the floating button, the webpage menu will expand, and the system's built-in browser navigation menu will be triggered and called. The two are combined into one. Users can not only call various operations for the current webpage in the upper webpage menu, but also click the browser menu below to operate on different webpages.

However, this solution is not perfect. On iOS Safari, if you click on any element at the bottom of the screen, the first click will trigger the built-in menu bar of Safari, and the second click will actually trigger the floating website navigation bar. However, developers can make targeted adjustments to trick iOS Safari into triggering the web page navigation bar when clicking for the first time.

Available prototypes

When prototyping, my goal was to create a short, responsive, interactive prototype that looked workable to the developer:

https://dribbble.com/shots/3851367-iPhone-X-Web-Navigation-Idea

Final Thoughts

This is not a very complicated design project, but in terms of actual needs, it actually solves the tangled pain points. This concept design can actually be easily implemented on large mobile devices. However, it can be explored further. For example, in the browser of iPad Pro, where is the most appropriate position for this navigation button? Designers can also carefully consider whether this button should be hidden when scrolling, how to hide it, and when to trigger it.

I think this is what UI/UX designers need to think about.