Toolbar at the bottom of texts/numbers busy screen

Question

I have a screen in my app as shown below. The requirement is to place a toolbar with 2 buttons:

1. One button displaying the currently active list/deck of drugs (it is the one with 'Pediatric Drugs' where he can click to view a list of available decks).
2. A smaller button to add a new drug to the deck/list.

My opinion on this is, I cannot use a darker background with white text(as the screen may appear overly crowded) and also, making it white makes it barely visible or noticed by the user (I also want to hide the button when user scrolls down and vice versa).

Are there any suggestions for better usability of such situation? Please comment.

Answer 1

Buttons have a primary role in the conversation between a user and the system, so I always try and design them in a way that they are very 'obviously' buttons, stand out, and placing them in a place where users don't have to hunt for them.

When I feel my buttons are overcrowding my UI, I try to balance the layout with contrast in colors between multiple buttons. I have just put together an idea for your screen, and not deviating from your primary color is a good idea to not make your screen look overly cluttered.

Answer 2

You are effectively using a Bottom Navigation for the content title: consider using the Toolbar title for the content title and exposing other options in a Tab Navigation below it (replace the search input, moving search into Toolbar as an action if need be) OR as a Bottom Navigation.

For the Add Drug button, you may find a FAB makes this call to action "pop" more, however FABs can also decrease readability of content. If you are hiding the FAB as you hide the current Bottom Navigation, that may not be so bad. By removing Bottom Navigation and using FAB you effectively increase the content area overall.