6

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:

Left nav with top tabs

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:

enter image description here

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.

enter image description here

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?

  • 2
    You're correct not all the pages were built mobile-first...unfortunately this is one of them :) My goal is to keep 100% feature parity between desktop/mobile and as painless as possible with each. I've gone back-and-forth with regards to bottom nav...the issue is that my users will be using desktop 90% of the time, so I want the mobile to mimic their desktop experience to maintain consistency. So if I popped main nav to bottom and then tabs to sidebar, my fear is they would get confused. What do you think if I move the tabs to the bottom and leave the actions at top? – Dan L Aug 15 '17 at 16:07
  • 1
    With regards to feedback, I have a team of users who provide feedback directly on the application. From their feedback, they really want to be able to view and update the Status and Date fields very easily, hence why I'm trying to avoid hiding it behind a menu (and why I'm not sure how to make it work cleanly now!). Thanks for the articles; I'll read them and see what insights they provide! – Dan L Aug 15 '17 at 16:09
  • If only 10% of users may be mobile, then that relieves a lot of worrying. In this case, I agree with you: placing the 2 buttons on the bottom would be better than placing the 4 tabs on the bottom. Keep the 4 tabs near the top to promote a sense of page hierarchy. And those 2 buttons on the bottom (if they are high traffic) may benefit because bottom buttons are easy to reach with the thumb. – jhurley Aug 15 '17 at 17:07
  • 1
    I've updated the question (at end) with another option that uses a second toolbar that I will hide on scroll when using mobile, but will always be present on desktop (maybe even tablet, depending on how users respond). What do you think about this vs using bottom nav? The benefit of keeping everything up top is consistency between desktop/mobile. All my users will be using the desktop version, but 10% or so may also use the mobile version, but I want that experience to be top quality. – Dan L Aug 16 '17 at 15:44
  • Hiding on scroll is a clever way to keep the clutter away. If so, IMO, this first draft of a design may get a little dizzy. Know what I mean? It will be a challenge (at first) to "take in" the design and mentally map where everything is. Include something that hides on scroll is yet another contraption that the user has to retain. How about save that enhancement for later and just give them all the content. Let user research dictate if you need to clean up clutter and add special FX. – jhurley Aug 16 '17 at 17:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.