Responsive web app, bottom tabs for secondary navigation or primary actions?

Question

I'm building a web app that I need to be fully functional for all devices, so I've built it from the ground-up as a mobile-first responsive web app.

I already use a hamburger and left nav for main navigation, because there are too many main pages to put down on a bottom nav. One of the major pages, Transactions, has sub-pages that I use tabs at the top for:

The status "Prospect", date "Aug 1", and icons are buttons on the top-right for common actions the user does. The status and date are buttons that bring up form fields so they can easily change those values.

However, when I scale the site down to mobile, there's obviously not enough space at the top for all these items, so I leave the tabs and move the actions to the overflow menu:

However, the user now has to click the menu to see the values for the status and date, and that's useful info they want to see all the time.

I'm thinking about adding a "bottom nav" section that has the main actions such as state and date changing.

That way the tabs remain at top where they are, and when you're on desktop, you have the 2 quick buttons at top (status/date), but when you're on mobile they move to the bottom and resemble 2 tabs (even though they are just buttons).

I can't think of another interface to present all the relevant information. If I put it in the main scrolling area, the user loses the data once they start scrolling, and this toolbar will be mostly the same across all 4 tabs (only main section is different).

Does anyone have suggestions for how to present the information, or if using the bottom section for "actions" like I'm thinking is a good/bad idea? I'm loosely basing my UI off Material Design, but am all about a better experience for my users rather than strict adherence to the specs.

Update: 2017-08-16 11:45

Another possibility is using a second toolbar, which would always be present on desktop but on mobile the tabs toolbar would hide on scroll down and show on scroll up (convention on mobile).

This enables desktop as well as mobile users a lot of power by having immediate access to all the major actions, but also saves some real-estate on mobile by hiding the tabs on scroll.

Answer 1

You've done a great job, Dan, with the UX, UI and developing a responsive web app. The desktop-view hierarchy works well and is intuitive. It was promising to read your first sentence that claims that you built this as a mobile-first responsive web app. But it appears you didn't fully solve the mobile platform first. (poke in your ribs)

Using a bottom nav is much needed in your case because there are so many layers of navigation. But the bottom nav is actually a Top-level navigation, not the 3rd level of buried content. I know, I know; it's the bottom of the page and there's a visual top-down hierarchy. But mobile phones have been using bottom nav bars at the Top-Level navigation since the iPhone debuted. Even Google Material design has succumbed to this navigation rule.

Here are some great, recent reads:

https://material.io/guidelines/components/bottom-navigation.html

https://www.smashingmagazine.com/2016/11/the-golden-rules-of-mobile-navigation-design/

Therefore, I would be worried about putting your two buttons on the bottom row in case users are conditioned to think the bottom rows are a level higher in hierarchy and NOT a sub-navigation.

In fact, what you have designed now is not bad although those two buttons have hidden values. Is there any research that ranks what's important for users to see? And in what order? Maybe you don't have to guess so much and let a quick User Testing survey answer the questions for you.

But if you want to add a bottom nav, IMO, you can get many levels of navigation if you let the bottom nav be the top level only. And then you can use a combination of pages, tabbed content, hamburger menu, and slide out drawers for nested content.

What do you think? Will your stakeholders go for it?