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!).
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!
This post is first published at androiduiux.com on 22nd July 2015.