37

Google's material design largely focuses on clean visuals and a good user experience, but there is one feature that I have questioned: floating action buttons.

This is a large button that appears in the bottom right of many of Google's Android apps. The button floats over the top of the content.

To me, I think this looks visually bad and it blocks the view of content. I am used to buttons residing in a bar of buttons, not floating above content. Another drawback is that there can only be one floating button, so only the single most common action can be placed there.

On the other hand, this type of button does provide extra screen space by not blocking content with a bottom bar. It also allows frequently pressed buttons to be placed near the bottom of the screen, closer to the user's fingers on larger devices.

Does this type of button provide a good experience for the user? Should it be used in other apps? Or was this just a bad design decision on the part of Google? Should this kind of practice also be extended to desktop and web applications? Please provide reasoning and even better, studies or articles to support your answer.

Improve this question
6
  • Another potential issue with the button there is that it is close to the phone's back button. I have often accidentally closed GMail when trying to press the (non-floating but in the same location) check mail button.
    – user31143
    Nov 8, 2014 at 5:50
  • 3
    @dan1111 It's actually closer to the multitasking button on stock Android. (Back is only on the right on Samsung devices.) Also, don't you just swipe down to check mail?
    – Ajedi32
    Nov 12, 2014 at 14:45
  • 1
    @Ajedi32 As Samsung devices are by far the most common Android devices, I think that it is fair to state that chances are it will be close to the back button.
    – André
    Nov 13, 2014 at 11:48
  • 1
    @André That's probably true. You have to wonder if Google takes these non-standard OEM customizations into account when they design their UIs. In all of their most recent reference designs (i.e. Nexus devices) the back button has been on the left (and implemented in software).
    – Ajedi32
    Nov 13, 2014 at 14:24
  • 1
    This design could be smart if it pointed the user to some essential activity, but Google is a rare example : the task of correlating the value of the product with the screen real estate has always sent them into a "wild loop." Rest assured, there is no exact science. But to others it could be a lucrative opportunity by replacing other ui elements with the floating button. More pictures of a product that are persistently urging the user to "find out more" has real-time value!
    – Jedi Commymullah
    May 8, 2015 at 0:50

7 Answers 7

Reset to default
29

It's tempting to say that because we're not used to it, it must not be a good experience. I think we mean that change is necessarily a good experience... it's not comfortable, but the end result may actually be better than what we had before.

We are used to toolbars, but how often do we get lost in menus or confused by a row of buttons? The single floating action button is, in many ways, an improvement from a usability perspective. The design of the app must be more carefully considered and the user's possible actions must be boiled down to a single most prominent feature. Assuming that the rest of the screen is for consuming/reading, the button must be for creating. Its placement is important in drawing attention. It can also be hidden when scrolling down if it gets in the way

In some cases, it is appropriate for the button to spin out and expose a few other options, as seen in the Inbox app.

So no, I wouldn't say that material design is a poor user experience. It actually encourages a more carefully designed user experience.

I'd like to say more on this, citing some sources, but I'm mobile at the moment.

Improve this answer
2
  • Agreed. New things are hard. Minimalism is hard. Good Material Design is hard. Google is acknowledging that we can't have a toolbar button for everything (iOS, I'm looking at you). The action button is about a clean, focused space that keeps what you need close at hand.
    – plainclothes
    Apr 27, 2015 at 15:35
  • 1
    +1 What I wanted to add to this already great answer is about the button supposedly blocking a part of the content. I haven't found this in the official Material Design Guidelines yet but I've seen it in quite a few Material Designed apps. When scrolling down, you could hide the FAB and have it pop up when scrolling up. Also, when scrolled to the absolute bottom, you should leave some space for the FAB to pop up without obstructing the view.
    – Vince C
    Apr 28, 2015 at 7:19
19

The good: Fitt's Law:

The bad: The biggest flaw in Google's Material design resides in feedback when you press a button. In the physical world a pressed button recedes into the background; in Google's Lollipop the opposite happens, when you press a button, it floats, which is contrary to what the user is accostumed to. pressed button

Improve this answer
12
  • 13
    Why is this a problem? The user still gets visual feedback that the button was pressed, and I don't see what confusion this could cause. A visual appearance "contrary to what the user is accustomed to" only matters if there are consequences.
    – user31143
    Nov 9, 2014 at 8:40
  • 16
    If that's the biggest flaw, I'd say Google did good with Material Design. :)
    – DA01
    Nov 11, 2014 at 18:03
  • 11
    I think GRVNT has a good point. When you press things in the real world, they move away, and there is no need to increase cognitive load or potential misunderstanding by doing the opposite. If it moves towards the user, it could seem like an unpress (turn off, deselect, etc.). It would be far more sensible to have the button initially raised, and lower it when pressed. This would have the added advantage of separating it from the contentent beneath, which seems desirable in this case. Criticising a google convention on ux.se risks downvotes regardless of how well intentioned your point is.
    – Paul S
    Nov 12, 2014 at 9:44
  • 9
    A design need not be Skeuomorphic, but dropping shadows clearly is. Also, pushing buttons is a well established (20+ years) user pattern on electronic displays (not just mechanical interfaces). I think if someone had posted to ux.se asking "shall I make my buttons pop up when a user presses them?" the answer would be a definitive "NO". But criticise google for doing it, and everyone assumes that google must be right.
    – Paul S
    Nov 12, 2014 at 11:09
  • 17
    Why do people keep upvoting this!? This is just an opinion on some other entirely unrelated aspect of Material Design and doesn't even attempt to answer the question at hand besides just throwing out the name "Fitt's Law."
    – Keavon
    Mar 19, 2015 at 23:18
7

In some cases I could see it blending in with whatever's behind it, which would be a bad thing.

People who are left-handed could still potentially have to change how they're holding their device in order to press the button since it may be out-of-reach, depending on how far they can reach with their thumb.

Improve this answer
6
  • Do left-handed people tend to hold the device in their left hand? I would think they would hold it with their right, so that they can use their other hand for navigation. I am right-handed, and I always hold my phone with my left. This is true even when performing one-handed actions, because I am used to having it in that hand, and it feels unnatural to hold it with my right.
    – user31143
    Nov 9, 2014 at 8:45
  • 1
    I hold my phone in my dominant hand, as it feels awkward otherwise for me. I'd think it really depends on the person, so my post should probably say "People who hold their phone with their left hand" as opposed to "left-handed".
    – ipavl
    Nov 9, 2014 at 15:26
  • 1
    Doesn't that depend on the screen size? I have a "small" phone (iPhone 4), that I hold and control with my right (dominant) hand. I also use an iPad, that (while on the move) I hold with my left hand and operate with my right.
    – André
    Nov 13, 2014 at 11:56
  • @André: It could very much, as well as other parts of a phone's form factor.
    – ipavl
    Nov 13, 2014 at 12:02
  • @dan1111 I'm right handed and I almost always hold it on my right hand. I typically don't need both hands for navigating and holding. Besides using the left hand seems awkward to me, and so do most of people I noticed
    – phuclv
    Jul 8, 2017 at 2:40
4

Object-oriented actions

In all examples of Material Design that implement the floating action button, we've seen an object-oriented concept at play within apps:

  • Email (Inbox)
  • Document (Docs/Drive)
  • News (Newsstand)
  • Direction (Maps)

Arguably the concept of a singular most important action creates a nicely hierarchy of user actions surrounding the key conceptual object that the app handles, and inadvertently (or purposefully) provides focus for the tool.

This is the purpose for which the user arguably opens the app up in a majority of cases, so there is a rationale for having the action in a more or less permanently visible state, and using a visual convention that means you never have to search for that one single action.

Don't rigidly follow the guidelines

"Another drawback is that there can only be one floating button, so only the single most common action can be placed there."

Interestingly that would only appear so if you stuck rigidly to the basic rules supplied. However, Google has been quite creative with their implementation of Material Design in the email app Inbox. See: enter image description here

Hovering over the primary action button reveals contextual/related actions, in a way that is very trainable I think.

Improve this answer
3
  • This seems more like a comment addressing a point in the question rather than something that attempts to answer the question.
    – elemjay19
    Nov 11, 2014 at 21:20
  • Actually, the Material Design guidelines specifically allow a single FAB to transform into a series of related buttons, such as contacts: material.io/guidelines/components/… .
    – Tin Man
    Feb 15, 2018 at 22:11
  • @TinMan good spot. Seems the guidelines have developed since the question was posed in 2014.
    – yellow-saint
    Feb 19, 2018 at 10:15
2

It's hard to say one way or the other. We can list pros and cons and offer opinions but at the end of the day, it's going to be heavily opinion based.

All that said, do be careful of judging screen shots. A big hurdle we in UX have to face is feedback coming to us based on static documentation...wireframes, mockups, screen shots, etc.

None of these provide any of the nuances of the interaction and often those nuances are the make-it-or-break it aspect of the entire experience.

I don't know this but have a strong hunch that the issues you state are lessened to a great extent with actual use. As the floating button is static, and the content is not, that provides a level of contrast that we simply can't "see" when looking at the static images.

Improve this answer
0

I think the use of transparency can get over the blocking content issue you mentioned. I have seen that really work on mobile apps with scrolling windows.

Truth is in mobile design it is really hard to find places to put action buttons. I really like FAB's for this purpose and I think they really work. Unfortunately it means I have to think again when I transfer the design to IOS!

A picture of a Balsamiq mobile mockup with a transparent floating action button

Improve this answer
0

A few pros of FABs:

  • A way to differentiate button importance. It lets the user know what the most important action is, thereby reducing cognitive load.
  • A clear highlight of the most common action. It aids the user in taking the next step (in most cases), thereby reducing cognitive load.
  • Better reachability. There are various places that a FAB can appear, but the most common placement tends to be at more reachable places than the toolbar. Also, unlike a toolbar, it gives the designer more freedom on where the button is placed.

That said, a FAB isn't appropriate for all use cases. You might find that, in some cases, there isn't a clear primary action, or that the button draws too much attention to itself, or that it does get in the way. For example, if I'm watching a full-screen video, I wouldn't want the FAB blocking my view. To see if it's appropriate for you, try it out yourself.

Also, I should mention that a FAB-like button isn't unique to Material Design. It's been used by Microsoft:

Microsoft Photo Viewer

Windows Media Player

IE 11

And also by Firefox:

enter image description here

It's true that none of those overlay any content, but FABs don't have to overlay content. There's several examples in the guidelines where no content is overlaid—e.g. the "My files" app or the media player. And when content is overlaid, Google takes care in its applications to allow it to be shown by increasing the scrollable area to accomodate the FAB.

Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.