2

I am developing app, my home screen looks like below (using both navdrawer and bottom nav simultaneously)

a

I used bottom nav, because I wanted to give user the easy access to the higher level locations quickly(ie: one click from the home screen). Used navdrawer to place other higher level destinations.

But I have not seen this pattern (using both bottom nav and nav drawer simultaneously) in other apps? Is this good UX?

Improve this question
0

5 Answers 5

Reset to default
4

In the image below, Facebook uses the hamburger menu on the far right within the bottom navigation as another option.

https://uxplanet.org/the-ultimate-guide-to-the-hamburger-menu-and-its-alternatives-e2da8dc7f1db

Improve this answer
3
  • 2
    I wouldn't consider the FB app to be good design. It has all sorts of bars all over the place.
    – 習約塔
    May 13, 2019 at 19:48
  • Just wanted to show an option. It can be improved upon for sure.
    – Kirsten F
    May 14, 2019 at 20:31
  • 1
    FB as an example of Android best practices? Paddling!
    – straya
    Jun 12, 2019 at 10:42
3

At least, Material Design does not recommend it.

Avoid using a navigation drawer with other primary navigation components, such as a bottom navigation bar.

https://material.io/components/navigation-drawer

Improve this answer
2

You can have upto 5 buttons on the bottom bar. Unless it is really needed, you may try sticking to either one - preferably the bottom nav bar because of visibility and ease.

Improve this answer
1
  • iPhone users are familiar with bottom bars because they are frequently used. On Android, it seems to be less common, though it does appear, especially in apps ported from iOS.
    – 習約塔
    May 13, 2019 at 20:02
1

I've seen apps that have both top and bottom bars. In one, the bottom bar buttons are useless. In another, I use them frequently, but would prefer a different interface.

You can do whatever you want, but I don't see the point of having both top and bottom bars when one or the other is sufficient. Avoid overloading your interface with multiple bars, and make sure the buttons are useful and likely to be frequently used.

Why choose to use one or the other? It's not for "visibility". They both stand out, unless the rest of the interface is cluttered. It depends on when you expect users will want to access the buttons. Bottom buttons are easier to tap when using the phone one-handed (both intentionally and accidentally).

Some options to consider:

  • Use a dropdown nav bar that shows and hides itself when scrolling, as in some mobile browsers.

  • Use both top and bottom bars, but hide them when they aren't needed, as in some eBook readers.

  • Move the sidebar/menu button to the bottom bar. Remove the top bar.

    bottom bar

  • Add some buttons to the right side of the top bar. Remove the bottom bar.

    top bar

  • Use "tabs" with swiping (or clicking) to move among them.

    tabs

Improve this answer
3
  • thanks for the images, 3rd approach is good, but 4th not suitable, since action bar items are usually used for quick actions ex: delete, share. 5th is not good according since according to md guidelines tabs are used categorize things under same group, not for distinct destinations.
    – user158
    May 15, 2019 at 9:56
  • about 1st: is on top off the screen so reachability is bad and cannot show many options. 2nd: using two bars complicate things
    – user158
    May 15, 2019 at 10:01
  • 1
    My personal preference is buttons at the top. If you really want to "know" which is "best" you have to implement multiple designs and run an experiment. I'm just presenting multiple design options.
    – 習約塔
    May 15, 2019 at 10:08
0

It is fine to do, in fact it is smart to do: exposing the top 5 actions that exist in the NavigationDrawer alleviates the risk that Users who never discover the NavigationDrawer will find very little use from the app.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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