Is a floating, collapsible bottom navigation bar a good pattern on mobile web?
I’m working on a mobile web app that has two pages (tabs) of equal importance. As the user will switch between the two frequently, I’m worried that displaying a classic navigation bar at the top of the screen will prove frustrating and harm the experience.
I’ve found a few examples of mobile websites with bottom navigation bars (Pitchfork and Quartz) but these are problematic on iOS:
- When Safari’s toolbar is collapsed, taps on the navigation bar will be ignored and will instead summon Safari’s toolbar back into view. This makes the navigation bar a moving target and requires a second tap in order to use it, adding friction to the experience;
- On iPhone X and XS, when Safari’s toolbar is collapsed, the navigation bar is rendered behind the Home Indicator, looking visually unpleasant and inaccessible. Click here to see an example.
I was able to work around both of these issues by implementing a navigation bar that is floating, and collapses away at the same time as Safari’s toolbar does. The collapsing is helpful as it means the navigation bar will be out of the way of the content, won’t clash with the home indicator, and won’t require the user to tap it twice to use it.
You can experiment with this proof-of-concept here (this only works on iOS Safari). You can see a gif of the proof-of-concept in action at the bottom of my post.
While the proof-of-concept seems to behave satisfactorily, I have a few concerns I’d like to ask about:
- Is this pattern a good idea for a mobile web app? Is it unexpected enough to result in a net loss in usability?
- Is it confusing to keep the navigation bar hidden while Safari’s interface is collapsed and, if so, should I use some sort of indicator to show the user how to summon it?
- How should I go about testing whether this pattern is effective and clear to my users?
