11

I am contemplating whether to use the material design Floating Action Button vs. Menu with different Action options and I noticed that Google in Google sheets, for example, has removed the button in favor of a top menu. Any thoughts on this ?

This is how it used to be with the button only With button

This is how it is now without the button (it is not shown only on scroll) Without the button

3
  • 10
    Your underlining skills need to be improved.
    – Uwe Keim
    Oct 26, 2015 at 9:30
  • Can you please explain? Oct 26, 2015 at 9:32
  • 10
    If you're going to blackout filenames, then use an opaque drawing tool...
    – Midas
    Oct 26, 2015 at 12:56

3 Answers 3

9

I suspect Google did some user tests and found that people can't find how to create new documents. The Floating button is fairly new and not used much on desktops at all. The bottom right corner of the screen is the last place you look for when creating a new document. Historically it has always been in the top left corner (File > New Document).

To answer your question, don't follow Google just because. Think about your users, use cases and they decide the best way forward.

6

The Floating Action Button does exist in the screen you posted. However, to offer a wide selection of templates in spreadsheets, the Top Menu has been included.

If you do, however, scroll down enough to get the Top Menu out of your screen, you'll see an FAB fade into the layout.

Proof:

Google Docs on launch.

Google Docs Image 1

Google Docs after scrolling past the Top Menu:

Google Docs Image 2

As you may notice, it's only an easier way for users to select a suitable template right when they begin. Else, if they scroll down, they will still have the option to create a new Document.

P.S. Tapping/Clicking on the FAB brings the Top Menu into View again, to select a template.

Google Docs after clicking on the + FAB. Overlays background with White (90% opacity) and slides down Top Menu.

Google Docs Image 3

Most users visit Docs to create a new document. So instead of increasing them a click/tap, the UI already shows them the available templates they could choose from, rather than having to click on the FAB.

FAB is important, however, its use is fairly subjective on larger screens, especially Desktops where you're not exactly positioning the Cursor to the Bottom Right. Similarly in Tablets, you're operating with two hands and likely using the index finger to tap, which isn't in a fixed position. Whereas, in the case of Mobile phones, you're generally holding your phone with the right hand which gives your thumb the perfect travel to touch the FAB with a single handed operation. Hence, it's still visible on launch in phones while saving screen estate but not on Desktop and Tablets.

2
  • 1
    Tablets are sometimes held in two hands using the thumbs to interact. Ipad even supports a special keyboard to do so. When using a tablet like this the buttons seem perfectly placed. see example
    – Martyn
    Oct 27, 2015 at 0:17
  • 1
    Tablets when held with two hands, the thumb tends to be far higher than the button's position. That will require one to reposition the hand to reach the FAB. The travel is unnecessary. Sure thing, this may vary from how one holds the tablet and might be easier/difficult for users depending on their thumb positioning. Oct 27, 2015 at 3:22
1

The Android guidelines state that not every screen necessarily needs a floating action button and that it should be used for one promoted, primary action that the user might frequently need. If you think your action meets these criterias you should use it.

I guess Google just made a special case here to show the user which different creation options are available, but I don't think this is supposed to remove the floating action button in general, especially since the button is still fairly new itself. It is used in many apps already and thus users recognize it pretty well, so I think you're good if you use one.

Btw, I still have the button and not this black top menu on my mobile app. Maybe it is only for tablet?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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