Where and How to Place Floating Action Buttons in Mobile Applications

Let s try to understand how the placement of the Floating Action Button affects the user experience.

Hello ladies and gentlemen! I present to you a new article from the Feature Breakdown series.

As the title suggests, we re going to talk about floating target action buttons (also called FABs) and where we should place them in our interfaces and why they appear. Floating target action buttons have become popular thanks to Material Design, Google s visual design language. According to Material Design, FAB represents the main screen action… It appears in front of all screen content, usually as a round button with an icon in the center.

Below is an example of a floating target action button.

If you are using a smartphone, be it Android or iOS, there is a good chance that you have seen this button in some applications. The FAB is usually located at the bottom, so it s not intrusive and easily accessible by the thumb when using the smartphone with one hand.

Thumb accessible when used with one hand? Hmm, let s clarify this point.

Thumb area

The term Thumb Zone was coined by Stephen Huber in his book Designing Mobile Interfaces. The thumb area is the most comfortable area for one-handed touch. The image above shows the thumb area for right-handed use of mobile phones.

But floating target action buttons are usually located in the lower right corner, which looks like a hard-to-reach area for your thumb. Whereas, the bottom left corner seems to be much more right-handed (70–95% of people in the world are right-handed). This brings us to the next question.

Why don t we place the FAB in the lower left corner?

If the FAB were placed at the bottom left, in line with the thumb area, it would be easier to reach than the bottom right. But we still keep placing the target action buttons in the lower right corner. Why?

The answer lies in how we consume most of the content. Floating action buttons are intrusive, meaning they hide the content behind them. English and Russian are read from left to right. Placing the FAB in the lower left corner hides the beginning of the sentences, which can make the rest of the sentence meaningless. This can render the content below it completely useless.

However, if the FAB is in the lower right corner, you can still read a significant portion of the sentence, and the content in that area remains somewhat useful.

But what if the content is visual?

The user subconsciously views the interface in a certain way. The direction the user takes when using the interface, even for visual content, is largely determined by the user s primary language. Most languages, such as English, are read from left to right and then from top to bottom.

Therefore, placing the FAB in the lower left corner will interfere more with the natural way that information is consumed by the user than if it were located in the lower right corner. Even when the content is visual, the content to the left of the FAB can provide context for the rest of it.

FAB usage guide

Below are a number of points on how to make the best use of the target action s floating buttons:

• Choose a color that has good contrast with the background. The FAB is located on the screen to take care of the primary action. It should be easy for the user to identify. Use a strong color for the FAB.
• You can sometimes use two floating target action buttons if they perform different but equally important actions. If you need to take care of several similar basic actions, you can also use nested FABs.
• Use icons that can appropriately denote the action being taken by the FAB. If this is not possible, use extended FABs to place labels and icons.

Output

According to the Material Design guidelines, there are no strict rules for declaring the placement of the FAB in the lower right corner. It can be placed in the center at the bottom or even on the edge of some components, depending on the use case and interface design. The reason the target action float button is not positioned according to the thumb rule (i.e., bottom left) is that it will be difficult for users to read the information.

Learn more about floating target action buttons in the Material Design Guidelines.

Hopefully this article helped you learn a little more about the floating target action button. Leave feedback in the comments.

Special thanks to

Prerna pradeep for help with content.