Is the Floating Action Button Bad UX Design?
State of Digital | Industry Savvy

Is the Floating Action Button Bad UX Design?

on / by Tom Jager

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.

patterns_actions_fab_qualities1

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.

Google-Foto-Android-Editing-non-distruttivo

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?

gsmarena_001

The golden rule of UX design is to provide elements that are popular among users and eliminate those that are rarely used. However, it seems in the case of the Gmail app, Google focused on something that is rarely used…

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.

Conclusion

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.

UX Fundamentals: The Concepts, Process and Proving the Value

Article by

Tom Jager

Tom Jager is a professional blogger. He works at Awriter and has a degree in Law and English.

Share your thoughts

  • numpty

    One of my biggest gripes with FABs is their positioning… they’re generally placed at the bottom right of the screen, which, for a right-handed person holding the phone normally in one hand, is a pretty awkward spot to reach.

  • Theracoon

    The overlap problem could simply be fixed by adding a bit of chrome to the bottom of a page when a user reaches the end. They should have though of that.

    • Totally. One of my 10 key findings for touch research is that people like to (are better at, etc) read and touch the center of the page. Always pad the bottom of the content so the last item can go up off the bottom of the page. Simple, easy and solves issues like this, like virtual keyboards in the way of forms, etc.

  • Don Droga

    Um. Have you done any usability with your intended users? No? Then shut up.

  • My research indicates they work great. Just like menus do. Surprising, right? It is all because whatever the pattern, if you use it wrong, it goes to terrible very fast.

    All your bad use suppositions were just that: misapplying the pattern. Most of all, if there’s no action important enough for a floating action button, don’t have one.

  • Miguel Horn

    I don’t know what a button it is as I just don’t understand many other terms here :) I am a complete noob and just want become a graphic designer , thanks for your post and I think you just got +1 grateful follower – me :)

Pin It on Pinterest