Is a floating, collapsible bottom navigation bar a good pattern on mobile web?

Question

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?

---

Answer 1

Have you considered doing a segmented control nav design instead? That seems to me the more common solution to this kind of problem: https://developer.apple.com/design/human-interface-guidelines/ios/controls/segmented-controls/

As for answers to your questions:

Is this [collapsed] pattern a good idea for a mobile web app? Is it unexpected enough to result in a net loss in usability? --> only usability testing with end-users will answer that definitively; hard to generalize too much...but it doesn't seem overly intuitive to me, just cursorily.

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? --> Yes. Although I'm an "Apple fanboy" in many ways, this habit they have of hiding important controls, e.g., vertical scrollbar, has always been one of my top annoyances with them, and it's definitely not good for usability.

How should I go about testing whether this pattern is effective and clear to my users? --> Good ol' fashioned screen sharing through Skype or GoToMeeting works, and ask users to complete a task. See what happens. There are also specialized tools such as UserTesting.com or UsabilityHub that could be used.