Design Diaries #1: Using the FAB
Incorporating Material Design into one’s app was all the rage when Google debuted the new design with Android Lollipop. The paper and ink analogy was fresh and brought new life to existing apps. The colours, shadows, fonts and iconography came at a time when UI/UX was taking prominence in software development.
Among all the changes Google introduced with Material Design, the most exciting one was the Floating Action Button, aptly nicknamed the FAB. The concept of a persistent action button was previously not thought of. The FAB gave designers a whole new dimension to work with, where they could place certain actions at the forefront at all times.
But, not all went well. Many developers, unaware of the guidelines on using the component, began placing it in all sorts of horrendous places. It was being used for all the wrong reasons. The FAB was destined to become the embodiment of failed design.
Don’t want your design end up like that? Here’s how a FAB should be used.
1. Use it only for primary actions
A Floating Action Button is persistent, and takes up a considerable amount of on-screen real estate. Thus, it is recommended to use one only for the app’s primary action. For a chat app, it should be a “new conversation” option. If it is a mail app, then “compose” should be the one. If your app doesn’t have a primary action, then don’t use the FAB! A FAB in no way makes your app more material; you can get the job done without one too.
2. Use appropriate iconography and colours
A FAB’s icon should match its action. Don’t use the “+” icon if the action is to create a new blog post. A pencil would better suit the task.
Secondly, always use Material icons for the FAB.
The FAB should use the accent colour of the design. More importantly, ensure that the icon is visible, even with displays on accessibility mode. The colour should fill the FAB, and should not be used as an outline colour. Gradients are a big no-no.
3. Position it right
A FAB should be placed on the bottom right of the screen, or along the edge of two material sheets. This ensures that the design speaks of continuity and fluidity.
Also, check if a mini FAB looks better. On smaller screens, the latter is preferred over the normal one.
The Floating Action Button deserves to be used rightly, and make its mark on Material Design. Let’s do our bit to ensure fair use!
Using Makeroid?
Check out our FAB component to make Action Buttons in accordance with the guidelines @ makeroid.io.
Vishwas Adiga
The Makeroid Team
