Floating Action Button

The FAB represents the most important action on a screen. It puts key actions within reach.

Motion Functions

Guidance Function

Structural Function

Floating Action Buttons allow users to access primary information on the page. The primary function of a FAB is Guidance and Structure. The FAB shows users where they can access elements of an interface, and the interface is structured. The expansion of the FAB can give more information as to the affordances of the interface.

Buttons can also have a set of secondary functions. Aesthetic functions can be incorporated into the FAB based on how the contained elements expand.

Examples

Floating Action Button Interaction by Mauricio Bucardo

The FAB relies on transformation, masking, obscuration, and cloning principles to achieve the intended functions of structure and guidance. In the above example, the button reveals a layer underneath that contains the possible functions.

Liquid Tab Bar Animation by Dmitry Lauretsky

In this example, the FAB uses the principle of cloning to show that there are four icons that are part of the expanded set to draw the realtionship that they are a subset of the action performed (tapping the FAB)

Share Button Interaction Concept by Oleg Frolov

Here the FAB transforms from a circle to a rounded rectangle and has its children elements offset and populate the rectangle. The movement of the button presents the user wth a relationship that shows that the expanded button contains all the children actions.