Do we really need/want floating action buttons?

Material design is definitely a trend these days. Web designers who deal with various Android apps, web UIs and other related projects, are trying to follow the principles of material design. Introduced by Google around a year ago, it represents the company’s attempt to unify the user experience across different types of devices and platforms.

Material design is based on vivid colors, minimalism, smooth animations and lots of unique, stylish components. One of these components is floating action button (further referred as FAB). Whats is a FAB? According to Google it’s a floating circular button used for a promoted action. It’s like a call to action button that guides the user to perform an action on that particular screen.

Now, there is nothing wrong with FABs, but it’s possible that they can hurt the overall UX of an app. This is an opinion exposed by Teo Yu Siang – a graphic designer based in Singapore. He tried to understand the reasons why using FABs could be a bad UX.

So, here they are:

They are prominent and hard to ignore

Because of the bold visual style of material design, FABs are prominent and hard to ignore. This means that they could make the UX less immersive and affect apps that are intended to provide an immersive experience.

Let’s have a look at a real example.

Google’s new Photos app is a good choice. When you open this app, you’re probably willing to browse and view your photos. The search FAB distracts you from this initial experience. Moreover, Google explains in its guidelines that “the primary action is to touch images in a gallery, so no button is needed” and “not every screen needs a floating action button”.

FABs could actually block content

Although FABs are small circular buttons, this doesn’t mean that they could not block content on a screen. If we look at the same Google Photos app, we can realize that the search FAB blocks around 50% of a certain image thumbnail.

Here is also a case where a FAB is blocking the favorite star and time stamp on a app screen. This is more problematic when the last item in the list can’t be scrolled anymore. This also means that you have to reposition the star button and time stamp to have a proper UX.

We might not use them that often

A FAB is a used for a promoted action, remember? But what if we are not using it that often? Google’s Gmail app is another great example to explore this theory. Its FAB is the “create new email” button. This means that your primary action on this app should be: compose a new email. However, multiple researches have shown that more than 50% of emails are read on mobile devices and users tend to read emails on the go, but not compose new emails (this could be caused by the limitations we have using mobile devices, like virtual keyboards, small screens, etc.).

Getting back to Gmail mobile app, it seems like it’s blocking the star button and time stamp, like in previous example.

So, do we really need FABs?

Not all application that use FABs are reducing the overall UX. These were intended to improve the UX of those apps and there are examples of great implementations.

Google’s Maps application is a nice example of FABs done right. The main action of a user is to get directions on the map, so the FAB is doing just that. This can be considered a particular case, as the content that user is interested in, usually falls at the center of the screen.

It seems like most of the time users consume content using their apps (view photos, read emails, read posts, etc.) and not only perform actions. Consequently, we need to ask ourselves: do we have to subordinate content consumption to action-taking? Is such a trade-off needed or wanted?

Fin out more in this great article by Teo Yu Siang and tell us what do you think.