A Fab Defense of the FAB

The floating action button (FAB) is a component unique to Material Design. Introduced in 2014, FABs are are distinguished by a circled icon floating above the UI, and are used for a promoted action.[1] As such, they act as the primary call to action (CTA) for a particular view.

The design of the FAB in Material Design is based on the premise that users perform a certain action most of the time, and therefore it should be accorded an elevated status in the form of a persistent, high-level button.[2]

The consumption of content is just as important (if not more important in some instances) than reaching goal actions in an app. By nature of the FAB’s design, there is the potential to block content or remove the user from the experience by having a visual element persistently and intrusively interact with the UI in a negative fashion. Poor implementation of the FAB has the reverse effect on the UX, possibly resulting in failed goal achievement.

However, a well-considered implementation of the component can play nicely with the UI and enhance the UX. A FAB takes up less space than any other alternative—namely a raised or persistent footer button—a particular boon considering screen real estate is at a premium in the mobile landscape. “FABs are designed to stand out. They are colorful, raised, and grid-breaking. This is a deliberate use of cognitive dissonance to draw a user’s attention.”[3] When there is one clear intention in the view, the FAB properly promotes the CTA.

In the illustrated example of the B&H app’s cart, the FAB has been given the promoted function of starting checkout—a logical action based on the established goal of completing a purchase. The current implementation has the CTA at the end of a very optically-busy reading pattern. Furthermore, the FAB competes with the graphic weight of the header image, and eye wanders to where it doesn’t belong. By moving the FAB to near the app bar, the CTA is visually promoted in both the F and Z patterns,[4] and stands to be seen faster and more frequently by the scanning user. The added, positive side effect is the issue of blocking content has been solved; the only content that has any potential to be blocked would be images which should not be the primary focus of a user in this view. There is room for deeper user engagement through the adaptation of another component of the Material Design, FAB morphing. This makes the checkout process stand out even more by animating, and thus drawing attention to, the consecutive step.

The UI will also have considerations to enhance the UX. Men—B&H’s largest user share[5]—find the color yellow to be distasteful[6], and should be reconsidered for the primary CTA. The contrast between the app bar and the FAB further highlights its prominence as the sole CTA in the view. Cleaning up the way the list is displayed, creates a stronger grid and order which makes the FAB’s divergence from the grid more visually unique.

The FAB enhances the UX by encouraging a more carefully designed experience. In the well thought out revision to our implementation, the concerns regarding goal completion should be mitigated through new positioning, aesthetic modifications, and increased engagement.

[1] “Buttons: Floating Action Button – Components – Material design guidelines,” Google, https://material.io/guidelines/components/buttons-floating-action-button.

[2] Teo Yu Siang, “Material Design: Why the Floating Action Button is bad UX design – Tech in Asia – Medium,” Medium, https://medium.com/tech-in-asia/material-design-why-the-floating-action-button-is-bad-ux-design-acd5b32c5ef#.co364lyj7.

[3] “mobile – Do material design’s floating action buttons provide a bad UX? – User Experience Stack Exchange,” Stack Exchange, http://ux.stackexchange.com/a/81457.

[4] “Using F and Z patterns to create visual hierarchy in landing page designs – 99designs Blog,” 99designs, https://99designs.com/blog/tips/visual-hierarchy-landing-page-designs.

[5] “Demographics: Gender – Analytics 360,” Google Analytics, https://analytics.google.com/analytics/web/#report/app-visitors-demographics-gender/a48894505w79212463p81912380/%3F_u.date00%3D20160101%26_u.date01%3D20161212.

[6] Jerry Cao, “The Ultimate UX Design of the Perfect CTA Button – Designmodo,” Designmodo, https://designmodo.com/cta-button.