Ever since Google introduced Material Design in 2014, the floating action button (FAB) was one of its most recognizable elements. It's probably already a very well-known element, but for those who may not be familiar with its name, it's the button that often appears “floating” in the lower right-hand corner or sometimes in the lower middle of the screen (Figure 1). This article will try to discuss the general usability of the FAB in part one and the effects applying animation could have on it in part two, with trying to back everything up with research.

Figure 1. Floating action button example

Figure 1. Floating action button example

Brief history and characteristics of the FAB

The first traceable concept of the floating action button appears in a US patent from 2010 in the context of computer operating systems. The main idea of the FAB was to improve the user interface (UI) and make it more accessible by hiding the features and actions that do not always have to be visible to the user. At first, they were implemented on elements that could be hovered over. At the hover of the element, additional actions would appear (Figure 2). (1)

Figure 2. FAB shown when hovering over a UI element

Figure 2. FAB shown when hovering over a UI element

With Google’s Material Design guidelines emerging, the FAB came into wide implementation in UIs, especially mobile UIs, and the basic idea and concept were further developed.

The FAB performs the main and primary or the most common action on the screen it's placed on. It floats above all other UI elements on that screen; It’s usually rounded and always contains an icon. It can be implemented in both web and mobile interfaces. The main classification relies on visual appearance and puts FAB into three categories – standard FAB, mini FAB, and extended FAB. Another classification goes from its behavior and divides FABs into two categories – FAB that performs an action immediately, and FAB that contains and gives the user more actions or functionalities (Figure 3).

Figure 3. Standard FAB (1), mini FAB (2), extended FAB (3), and FAB that contains more actions (4)

Usability of the FAB and corresponding research

The main topic of this article is the usability of the FAB and the effect its animation has on it and the overall user experience. Let’s first look into the brief definition of usability and the general usability of the FAB.

According to Nielsen Norman Group, usability is a quality attribute that assesses how easy user interfaces are to use (2), i.e., the usability of a system is the experience a user has while interacting with systems or products, which includes web sites, apps, devices, appliances, and their components (in this case, a FAB), etc.

As far as the usability of the FAB goes, it's already mentioned that it should be used to access the core and most common action(s) on the specific screen. According to Google’s research, FAB serves also as a guide for users. When the researchers showed unknown and unseen screens to the research participants, most of them relied on the FAB to find out the main purpose of the app. (3)

One of the main roles in the usability of the FAB is the FAB icon. It must be concise and recognizable by most users to avoid the so-called mystery meat navigation as well as to avoid unnecessary cognitive load of the user. If, for some reason, it’s impossible to use an icon alone, the extended FAB with additional textual explanation can be applied. (3)

Actions that the FAB triggers must be positive and important, such as “create new”, “share”, “play”, etc., which means negative or one time actions such as “delete”, or “archive”, or “copy” cannot be applied to the FAB. It can also perform an action on the current screen, or it can create and lead to a new screen. (4) However, it’s not necessary for every screen to contain the FAB. On some screens it's hard to determine what the core function or action is. In that case it’s obvious that the FAB is unnecessary and that the screen or app can work without it. A good example is an app for viewing, searching, and sharing photos – it’s hard to tell which of these functions is the main one.

On the negative sides of the use of the FAB, some authors and professional UX/UI designers argue that the FAB is a failure and it has no benefits for user experience design and that it’s often overrated and not used the way it's imagined to be used. The Gmail example can somewhat support this thesis. Research has shown (5-7) that users mostly use Gmail for viewing and replying to their emails and not for creating new emails. They also argue there are other negative sides of the use of the FAB, like hiding some functionalities of the app (figure 4), making them inaccessible (like shown on the contacts app example on the figure 3) or that they take up too much space and take away the user’s attention. However, it should be admitted that these theses are still not backed by serious research and that they neglect the 80-20 UX rule (using 20% of functionalities 80% of the time). They also overlook that users won’t be using the app only for taking actions, but for viewing its content as well.

Figure 4. FAB hiding additional options on the last contact on the list

Following Google’s Material Design guidelines should make use of the FAB greatly beneficial for the user’s experience like one study has already shown using an A/B testing method. Participants were divided into two groups. Both groups were given an app for adding daily tasks. One group had a FAB and the other did not. After the research, each of the groups was shown the app of the other group. Most participants pointed out that completing the task with the app using the FAB was more intuitive, simple, and easier. (8)

References: