Hi all, I'm working on a mobile web app that will feature two main sections (tabs) that the user will switch between often. Because of this, I imagine a classic navigation bar at the top will be frustrating to use as it's hard to reach.
I could find a few examples of websites that use bottom navigation bars, such as Pitchfork and Quartz, but I wasn't satisfied with their implementation. Specifically, Safari's bottom toolbar will capture any tap in the bottom 10% of the screen when collapsed, forcing you to tap twice AND moving your target when you're trying to use the navigation bar. Both of these navigation bars also interact badly with iPhone X and XS because they end up under the Home Indicator.
I attempted to address both issues with a floating navigation bar that automatically hides away whenever Safari's interface is collapsed. It will come back when you scroll up, or when you summon Safari's toolbar by tapping anywhere in the bottom 10% of the screen.
You can try it out here. This fiddle only works on iOS Safari currently.
I'd like to hear what you think in general about this, and have a few specific questions, too:
- Will this pattern feel familiar to users?
- Is the behavior I've implemented confusing or unintuitive?
- How could I test whether this is a good idea?
- I should probably show some sort of indicator when the navigation bar is hidden to let the user know where to tap in order to get it back. Do you have any suggestion for how I could do that?
Thanks for your help!