Fig. 06 / Floating Action Button · In motion
Mobile UI Patterns
Floating Action Button
EXPLAINED SIMPLY:A floating action button is the round button hovering in the bottom corner of an app screen, sitting on top of everything, that does the screen's single most important thing.
A floating action button is the round button hovering in the bottom corner of an app screen, sitting on top of everything, that does the screen's single most important thing. In Gmail it starts a new email. In a notes app it starts a note.
The name is the anatomy lesson. Content scrolls underneath while the button stays put, and the shadow is what sells the float. The idea comes from Google's Material Design, which is why Android apps are covered in them, though plenty of iPhone apps borrowed it anyway.
A floating action button is a bet. The app is wagering it knows why you opened this screen. One button, one action, and the action should be the obvious one. The moment there are two of them, or the plus opens a little menu of six choices, the bet is off and it's just clutter sitting on your content.
It earns its keep on first run, too. A brand-new account with nothing in it usually pairs the empty state with this button: nothing here yet, tap the plus. Some apps move the same job into the middle of the tab bar instead, which is the same bet in a different seat.
You'll also hear FAB (designers say it like a word, fab), floating button, or just the plus button, since it usually shows a plus.
When one action matters more than everything else on the screen, ask for a floating action button. If three actions all feel equally important, that's a decision to settle before anyone draws the circle.