So far, material design has been a big hit for those who work with Android applications and web UIs. It was started by Google several years ago with the purpose to create “a visual language that synthesizes the classic principles of good design with the innovation and science.”
Sounds good, right?
It sure is, material design is the latest attempt to make user experience as comfortable and effective as possible. Google has done a fantastic job with it: minimum design elements, unique and good-looking components, vivid colors, smooth animations, and user-friendly environments – material design has it all.
In among this is the floating action button (also referred to as FAB), a circular button well-known by all Android users and another distinct element of material design. Floating above the interface of an app, it promotes user action, says Google.
Essentially, FABs can be characterized as call-to-action buttons because they are trying to convince the user to complete a certain action (e.g. begin uploading or adding content). They are usually placed in the lower right corner of the screen. It’s very difficult not to spot these buttons, and that’s because they are designed to stand out; helping a user to perform one of the most popular actions within the app.
However, that’s where a problem emerges.
What is wrong with FABs?
While FABs present a fine and reasonable approach to completing an action, they are very hard to ignore. As the result, they can be a bad move for overall UX.
Here are some of the most important reasons why, in my opinion, FABs might not always be a smart choice.
They stand in the way
As previously mentioned, FABs are generally placed in the lower right corner of the screen. In most cases, they are located above the content of the app, thus effectively blocking some part of it. By taking up space on the screen, the button acts as a banner that blocks a small area of the screen.
One could make a good point by saying that a FAB is really small and not too much of the content is getting blocked. However, take a look at the Google Photos app, where the button has the potential to block almost a half of an image thumbnail.
Although this is just enough for a face or two. To get past it, the user would have to scroll down. But what if that piece of content is the last one? Then it becomes impossible to scroll, and the user must add content in order to make it visible.
Or imagine this scenario: “I couldn’t see the date after I received an email from my professor,” says a student. “It was the last one on the list and had really important information for an upcoming essay paper, but the FAB button blocked it.”
So, it is sufficient to claim that FABs, although very small, could block content and ultimately reduce the quality of the user experience.
Their prominent design interrupts full immersion
FABs are designed to be prominent and stand out. However, in many cases, this overrides an important characteristic of UX – immersion into the app’s environment.
Again, Google’s Photos app demonstrates this. When opened, it goes immediately to the user’s gallery, where one can assume a user simply wants to view their photos. And although the search functionality presented by the FAB is useful, it doesn’t feel like the primary function of the app.
The FAB distracts from the immersive photo viewing experience by taking up space on the screen and blocking elements of some images. That doesn’t look very hot.
In this case, the FAB doesn’t need to be so prominent.
They actually might not be useful
Explained by Google itself, the floating action button encourages a user “to perform a promoted action.” However, the developers might be forgetting something: What if the user doesn’t perform that action frequently?
The app has a FAB in the lower right that is placed to help users compose an email faster. However, as suggested by recent surveys, although almost a half of all emails are viewed on mobile devices, very little are composed using them. In other words, people prefer to view emails on the go.
Plus, even if the user wishes to immediately answer an email, they can do it within the conversation meaning the FAB is bypassed.
Material design is certainly here to stay, but some of its elements just don’t work as well as they should and I believe the floating action button is a good example of this.
UXers must not dismiss the importance of an app’s content alongside its functionality and be sure that the use of a FAB will not disrupt either. What are your thoughts on the FAB? Let us know in the comments or shoot us a tweet @usabilla.