Make the right FAB

Floating Action Button, or, in short, FAB, is one of the unique UI element in Material Design for primary/promoted action for a particular screen. Since it is a frequently accessed UI element in a given screen, I think it’s important to make the FAB right in every details. However, there are a number of apps doesn’t have the right FAB as specced in the Material Design Guideline, which also included some of the Google apps (I know!).

Huge Inconsistency

After some analysis on the FABs in some apps using the latest L release, I am surprised to find the huge inconsistence in the implementation of FAB. Sure, FAB is may be just a round button, but there is also a lot of specs meant for it like anchoring distance from screen edges, action icon size, ripple effect, elevation and shadow. Most of the time, it’s likely the third-party library doesn’t do the job correctly, but it shouldn’t be too tricky for those apps that only have a standalone FAB (which doesn’t expand for more options, for example).

Let’s see what I have here (there are too many apps to try and I only selected a handful of them which can be tested immediately):

The right FAB

So what’s the specifications for this distinctive button in Material Design? As you can see from the comparison sheet above, Messenger app seems to have the most accurate implementation of FAB.

I strongly suggest to check if the FAB in your app is correctly implemented as the recommended specifications, otherwise the FAB will somewhat feel out of place due to the difference in material properties compared to the other material elements in your Material Design app.

Care about Design Details

Think this is too nitpicking or too small for the user to notice? I would like to use a quote from this Google Ventures article ‘Why you should move that button 3px to the left’:

Getting design details right can create positive emotional states that actually make products easier to use.

After all, as someone (designer/developer or whoever in the product team) who craft the product to the end user, if you doesn’t care about the details, who else will do it for you? So, do the right FAB!

Special thanks to Andhie for making a sample app meant for screenshot purpose with the right implementation of FAB using the Material Design Support Library.

This post is first published at on 22nd July 2015.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.