The story behind the Floating Action Button in Material Design

How the Target Button Became a Material Design Symbol

According to the Google employees behind Material Design, it is not only a design system, but also a design language and philosophy. The Responsive Digital Building Block Library has grown and evolved since its introduction in 2014, but the Floating Action Button, also known as the FAB, still represents Material in its purest form in many ways.

“Much of Material Design was based on the idea of ​​making it easier for users to navigate interfaces,” says lead designer Bethany Fong. She worked on the interaction design of smaller interactive components that helped to distribute functions on the screen.

The FAB performs the main or most frequent action on the screen. It is thoughtful, approachable and noticeable. In this article, five Google employees from the multidisciplinary Material team share how they created this legendary component.

A system aimed at simplification

When in October 2013 the concept Material began to emerge, the team was solving complex fundamental questions about the system and its relationship with users.

Matias Duarte, VP of Design: We couldn t decide how many actions to submit. How many actions are important to display on any screen? Phone models vary in size, and tablets can fit even more content on the screen.

Nicholas Gitkoff, designer: It all came down to simplification – trying to simplify the system and reduce the number of items on toolbars. Especially with mobile devices, we needed to provide clear guidance so that the user could understand the essence of the product from the moment they saw it.

Matthias: I remember Rich once said, “We came up with a really radical, unorthodox solution. We re not sure if you ll like it, but we think it s very effective. We decided that we only needed one main action; everything else can be hidden. ” And I thought, “This is crazy. Fiction. I like. Let s try to do it. “

Bethany, lead designer: This idea began to evolve towards a floating action button, or FAB, which was supposed to be the most important action in the interface extracted from the action bar. It can be the hallmark of the application, the hallmark of the brand, and it will be easy for the user to understand that he is always doing the right thing.

The importance of discussion

Critical review sessions were held from late 2013 to 2014 – often weekly, sometimes almost daily – to ensure that all team members Material come together to find comprehensive solutions to problems. Thus, they began to shape the principles, tools, guidelines and best practices that would shape the new system, including the nascent FAB…

Rich Fulcher, UX-director: The critical analysis was very important. At first, people answered: “We like it, there is something in it.”

Matthias: Everyone felt that such a possibility existed. Everyone dropped their ego and left their predetermined limitations at the door. They just wondered “how can we solve this problem.”

Zach Gibson, designer: Every week we printed huge sheets of paper, four feet by seven feet wide, on which everyone left comments. Nothing was holding anyone back, I think that s why we were able to get the job done. These reviews played a huge role in the speed of the project.

Jonathan Lee, designer: Several features have been specially selected to differentiate the Material Design framework from other frameworks. One feature was the visual style. A cross between skeuomorphism and flat design, with shadows and a height system to help people figure out where an element is in Z-space. Another feature is FAB.

FAB takes shape

Once it was established that FAB will be the functional focal point of the design, the team began to explore how it might look and fit into the system.

Matthias: The idea of ​​a single action and its visual style emerged simultaneously. When we reduced it to one button, we were able to make that button a much larger click target.

Nicholas: At the very beginning, we looked at options with square FABs and a whole range of different shapes. We then added brightness to draw attention to it and positioned it where it was physically available on a mobile phone. This became the basis for the final version of the FAB.

Matthias: By making it round, we separated it from the rest of the lists – which gave us more usable space on the screen and allowed us to see the lists that were there.

Bethany: We had beautiful grids, but from an aesthetic point of view, one thing was missing – the focal point within them. FAB added it. It sits well at the junction between two sheets of paper and especially well at the T-junction of three sheets. Therefore, it was natural that it would be located at the very top of the paper stack.

Rich: In the first internal presentations to demonstrate the FAB, we used a small wooden disc from a craft shop with an overhead projector, transparencies, and small pieces of paper for various parts of the interface. We needed to calculate exactly how many sheets would give the desired depth and shadow.

Suitable abbreviation

In the end, this button needed a name.

Bethany: We ve tried titles: Primary Button, Primary Action, Primary Action Button, Advanced Action.

Zach: We almost called it a ball, which would be weird.

Rich: We knew that the name should not only make sense to us; if we are implementing this element into the rest of Google, we need to be able to tell the whole story succinctly. Therefore, we wanted the name to be reminiscent of how this button differs from others and how it relates to the rest of the elements on the screen. For a while we described its state as floating, but the name stuck only when we started using the abbreviation FAB. We all liked this option and the team quickly accepted it.

The world gets to know Material

After nearly eight months of revision in June 2014 Material was publicly presented at Google I/O, annual developer conference Google…

Rich: There were definitely times when we went from thinking “this is really important for Android” to “this will make a big difference to Google.” And then we were suddenly told, “You will be part of the main show at I / O.” It was great that we were given ten minutes to talk about our design system, its origins and meaning to users.

Bethany: I think the combination of FAB and the really good motion design we ve built around it has made the biggest splash. The FAB represented our height system well because it was the focal point and also because it cast the largest shadow. Its rationale seemed to resonate with both designers and developers and users.

Future-proof design

Six years later, when Material adapts to support technological advances and platform changes, FAB remains a symbol of a system designed for simplicity.

Bethany: There is an ebb and flow in the development of design systems. They are not like foods taken immediately after AB tests. You have to wait for the solution to seep into the ecosystem and then people will start using it and giving feedback. This can be a very long cycle.

Matthias: It was the right solution to the problem at the right time. It was a natural convergent evolution, and it was beautiful. FAB broke the gestalt of the rest of the screen in a lot of different ways.

Jonathan: FAB has really helped make Material Design iconic.

Bethany: UX designers are always at odds with poorly designed, confusing, overly complex interfaces that lead our users to frustrated (at best) and make terrible mistakes (at worst). I think FAB stayed because it is a show of hope in software – the embodiment of philosophy. It demonstrates how we can give our users one action, one small step forward, that will give them confidence in the app and in themselves. It seems to me perfectly correct to align FAB with creative action in the application, as if we can resist all the destructiveness of this world with small acts of creation. I may attribute a lot to the simple round button on the screen, but I had six years to think about it.