Site icon UXMISFIT.COM

FAB – Why Material Design’s Iconic Element is the next Hamburger Menu

Material Design, greatly announced in 2014, introduced many interesting patterns for UI design. Visual framework from Google solved some issues and standardized a lot of elements for mobile and web applications. It is a great tool, but it is not free from mistakes.

Floating Action Button is one of the iconic parts of the Material Design. It even seems to be a symbol of modern mobile apps for Android and indeed it looks pretty on the smartphone screen, but is it good for the application’s User Experience?

FAB – usage and behavior

Google recommends to use it as a manifestation of primary action in the solution. Button has a circular shape and it is floating above the rest of the UI. There should be only one FAB per screen, to represent the most common action of the app. When tapped it animates to expand the functionality. The icon inside may be also animated for interactions. Full specification is written here.

Google’s intention was good

Promoting the most common action in a convenient and appealing visually way is a brilliant idea. Putting it in the bottom right area of the screen sounds considered when it comes to present the app on the bigger smartphone. It is easy to reach, clearly communicate it’s function and instantly accessible for the user.

In the perfect situation Floating Button is a good pattern. That makes users life easier. But the reality is very different. This element may be a pain point for the fresh users who learn how to use your solution. Let’s explain why.

Why FAB design it failed

It looks like that FAB will share the fate of Hamburger Menu. At first the menu pattern was loved for it’s simplicity and visual form with potential to prepare surprisingly delightful microinteractions. Few years later it was criticized as a non intuitive solution that does not engages users in the app. It is very possible that the same situation will happen with the FAB.

The main issues of the Floating Action Button:

Summing up

Material Design is the visual framework that unified the approach to mobile and web design. It is surely a great thing, but Google should not rest on it’s laurels and work constantly to improve it. Floating Action Button look really nice but it may ruin the app’s experience very easily. It is worth to mention that even Google informs to be careful while designing app with FAB: “Not every screen needs a floating action button. A floating action button represents the primary action in an application.” In the end, in most cases we should find the way to present the primary action in a better way. What is your opinion in this matter? If you are a fan of Material Design check out the best free UI design resources here.

Join to the community of UX Misfits on Facebook!