Floating Action Buttons (FAB)

Introduction

In this post we’re going to give you a quick overview of floating action buttons (FAB)… a TLDR; if you like. Because this is a quick guide we’re just taking a high level view. I’ll go into more detail in further articles.

What are they?

A floating action button, or FAB, is in most cases an icon displayed in a circular container. More often than not the button will have a shadow giving it a raised effect. They also stay in position as the rest of the screen content scrolls. That is why they are referred to as “floating”.

"Create New" FAB in Google Drive and "IM Chat" FAB on Welcm website

Note, sometimes an FAB may be elongated and even contain text.

"Add to Cart" and "Share" buttons showing extended FABs

What are they for?

Put simply, they are primary action buttons. That means they represent the most important action that can be performed by the user. They are used for important or “constructive” actions rather than minor or “destructive” actions.

Examples of important or constructive actions include: create, favourite, share and start a process.

Constructive or important action FABs

Examples of minor or destructive actions include: archive / trash, alerts / errors, cutting text, controls that should be in a toolbar (e.g. volume control).

Destructive or minor action FABs

Why should I use them?

There are two main reasons to use a floating action button. One is to improve the UX of your app. The other is to increase conversions on your website.

In the context of UX, FABs give your user quick access to the thing they are most likely to want to do on a given screen. For example, in an inbox an FAB might be used to create a new email.

Inbox with FAB to create a draft email

In the context of increasing conversions, you can keep a CTA on the screen at all times. It remains prominent whilst not getting in the way of content. As such it can’t be ignored but is unlikely to frustrate a user.

This is in stark contrast to pop-ups that used to be popular for achieving this goal. For example, an e-commerce site may use an FAB for adding items to the user’s cart.