Bottom app bar for navigation instead?

#1

There are some things up on the top app bar (currently in use in the app) like “Today”, that lets us jump to another date, or the option to open the Navigation Bar, etc; that would perhaps use the added benefit of being within our convenient reach.

Also, our floating add tasks button could also be in the bottom app bar, maybe?

We can also, if it’s within the guidelines, have text on the bottom app bar like a top navigation bar and remove the latter altogether.

Does this seem like an improvement to the current setup with the top app bar? And can this be implemented?

#2

We explored the bottom bar navigation (even before Google announced Material Design 2.0), but, long story short, we weren’t satisfied with the results.

At the moment, we’re staying with the top bar, but given the new all-screen phones with their plentiful “real estate”, we’re open to the possibility of adding a bottom bar at some point in the future.

#3

Here are some of the mockups :

bottom2
f5bc432d712b2466e0d93f09b26a0212095701db.png1125x2001 173 KB

bottom1
99bc2e4cbe528a108c63efce45f13e72b9b380e2.png750x1334 96.2 KB

bottom3
24d11cc98482a0dfcf6f66f87ebb756d670cad66.png750x1334 96.1 KB

#4

Oh wow…

Do you mind me asking what exactly did the team feel was unsatisfactory about a bottom app bar? The way I have it in my mind is that it will be exactly like having a top app bar, but always within your reach.

#5

Oops, the uploads are broken. We’ll look into this as soon as we have some time.

#6

As for the bottom app bar (https://material.io/design/components/app-bars-bottom.html#usage), this wasn’t canon back then when we designed the app. This may be a good idea – especially given all-screen phones, but we’ll wait until this way of navigation will be familiar to users. Another concern is that there’s no counterpart for the bottom app bar in iOS yet, and we generally try to make the app layout the same on both platforms.

BTW, do you have an example of a more-or-less popular Android app that uses the new bottom bar? Does any of the official Google apps use it?

#7

Also, if we look at the Behavior section of the article (https://material.io/design/components/app-bars-bottom.html#behavior), placing navigation controls such as Back arrow on the bottom bar is not recommended, because the bottom bar can be covered by temporary surfaces (see their example pic). And having both a bottom bar without navigation, and an empty top bar just for the Back and Overflow Menu icons seems suboptimal.

#8

…do you have an example of a more-or-less popular Android app that uses the new bottom bar?

New bottom bar as in one with an FAB?

Edit: grammar

#9

…having both a bottom bar without navigation, and an empty top bar just for the Back and Overflow Menu icons seems suboptimal.

I was thinking about having a bottom app bar just on Today view. The fact that they can be overlapped defeats their purpose in the Edit/Create task view. Bottom navigation on the Today view makes sense because there are actions in the top bar that need to be accessed frequently depending on usage (viewing ‘Later Today’ or ‘Starred’ tasks, managing contexts when that is added), and it makes sense to have these within our reach.

I was thinking about having a text formatting bar (no idea what it’s technical name is) in Edit/Create task view. Like with to-do apps like Todoist. Have a bar which will have buttons for adding a Due date, Hide until later (date), Priority, Contexts, Notes, and Save changes; which will be above the keyboard.

I don’t have anything against having a top bar with a back button and “Create Task”/“Edit Task” in Edit/Create task view unless it violates some guidelines; I just need some actions within my reach and this text formatting bar that stays over temporary surfaces fulfils that need.

The same way in which the bottom app bar does for the Today view.

#10

…no counterpart for the bottom app bar in iOS…

Can’t you use the same Material Theme as in the Android app? Maybe with Apple’s icons? Can’t see why the users will hate having actions within their reach. Or does it violate HIG guidelines in some way?

#11

Of course, it’s technically possible to use MD theme on iOS, but we prefer to stay close to platform guidelines, so the apps feel like first-class citizens of their respective platforms.

#12

Google Tasks does, I believe.

#13

Sorry, yea, that should be the way to go.

#14

RE: Google Tasks – thanks! They even have the bottom navigation in their iOS app. I’m currently playing with it on a iPhone X to test bottom navigation on a long screen.

#15

Sweet! Hope you find it worthwhile to implement something similar in ML.

The mock-ups of bottom navigation in the iOS app looked fine to me.

But the bottom app bar should have all the same icons as the top app bar to preserve functionality, but I’m not sure if you can do that with Tabs in iOS (can you have more than 5 Tabs?).

#16

Btw, the FAB should definately be centred. That would make it more reachable.

#17

On the one hand, centering seems reasonable. On the other hand, there’s a potential conflict with iPhone X’s home gesture (swiping up). I guess I should spend more time in Google Tasks to see if that’s the case.

#18

Fr? Did you get any issues? I’ve been using a gesture navigation solution on my Xperia and it’s not given me any accidental clicks when I swipe up.

#19

Haven’t had the chance to play with Google tasks, but I’m using Matterlist on iOS and I haven’t had any “mis-swipes” with our red (+) button.

#20

But that’s not a centred button, is it?