📣 Learn Design Systems Online in 8 Weeks with Dan Mall. Last call to sign up! →
Trending designs to inspire you
Work designers are riffing on
Interviews, tutorials, and more
Prompt to flex your design skills
Find your dream design job
An exclusive list for contract work
Get new leads in your inbox every day
Introduce yourself to new clients with Pitch
Learn product design in just 16 weeks...
Learn UI Design Basics and Figma Fundamentals...
Scale Design Systems in 8 weeks...
Land your dream job! You'll have a career support specialist to review your portfolio...
Level up your skills with our interactive courses and workshops…
Portfolio creation made easy
Fresh leads in your inbox every day
Build your team’s pipeline or profile
Find, contact, and hire designers
The #1 job board for creatives
Board for freelance & contract work
Hey there 👋
This week I experimented with a new website navigation idea for bigger smartphones and especially for iPhone X.
iPhone X has an even bigger screen than the iPhone 8 Plus, although the actual size of the device is smaller thanks to the thin bezels.
Based on my experience, most of the websites still use a hamburger menu button at the top left or right corner, which is really hard to reach with one hand.
It's even harder to navigate on a website with one hand when you're walking or going somewhere, and you just quickly want to get an information (like contact details) from a website.
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. 😂
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.
For a better visual understanding please check out my attachment.
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.
(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! 🤔🤗
Don't forget the smash that 'L' button before leaving and have a wonderful day! 👊
Edit: you can read the case study about this concept here.