31 votes
Accepted

How to display more than three buttons?

You can use grouping, icons and visual emphasis to delineate the most common (and the most destructive) actions. Right now you have the most destructive action right next to what seems more common. ...
Mike M's user avatar
  • 24.7k
10 votes
Accepted

Can it hurt our brand to use our logo as a (floating action) button?

Your users care more about accomplishing their tasks than your brand (or your logo). Focus all your efforts on moving them forward towards improving their lives. They will come back if you are ...
Mike M's user avatar
  • 24.7k
7 votes

Can it hurt our brand to use our logo as a (floating action) button?

The behavior of "clicking brand logo links to homepage" is well established. If you plan to hide action options under the logo it would cause confusion. Since you have a hypothesis to test, I suggest ...
Nicolas's user avatar
  • 5,608
7 votes

What is the difference between Hamburger icon and Ellipsis icon?

The hamburger is usually to open a global-navigation menu, in material design they call this a navigation drawer. The ellipsis are an icon to signify additional controls (more) available for this ...
simonlh's user avatar
  • 431
5 votes

How to display more than three buttons?

First if you are on page i suggest you stack your CTA on left, it's painful for a user to reach their primary action ( i don't think it is deleted?). You have lots of CTA, and for this case, i ...
SylvainBTL's user avatar
2 votes
Accepted

Feedback button clarity

Of the options you provided, "provide feedback" seems like the only appropriate one since the other two are too specific and don't seem like opportunities to provide positive feedback. I would phrase ...
mowwwalker's user avatar
  • 1,735
2 votes

What is the technical name for the "Tap to translate" button from GoogleTranslate app?

Material refers to this as a Floating Action Button (FAB). The transition to a menu shown in your example is considered one of the potential uses Types of transitions Upon press on Android, the FAB ...
Mike M's user avatar
  • 24.7k
2 votes

Is it a bad practice to use similar floating action buttons with different functionalities in different pages

The Material Design Guidelines say that you should use one button per screen for the most common action. What that action is, is up to you. Only one floating action button is recommended per ...
Nick Groeneveld's user avatar
2 votes
Accepted

When should i use a mask behind a FAB button?

This question is unrelated to FAB, you use a scrim whenever appropriate, specifically when you load a modal, dialog or a new sheet of material. Whether it's launched by a FAB, a link or a button, is ...
Devin's user avatar
  • 38k
2 votes

Android FAB with progress indicator

Dropbox mobile did it, it used a progress indicator to show the progress of scanning a document. Here's a screenshot of it. But do note that there isn't a need for the user to click the button. Once ...
Eric Chia's user avatar
  • 679
2 votes
Accepted

How to position a "add to list" button?

Given that your list is in reverse chronological order, it makes sense to put the input (ie what will become the latest entry once you press OK) right at the top. In this case, the FAB and the dialog ...
Leo Wattenberg's user avatar
1 vote

Is there a universally accepted pattern for the placement of floating actions on websites based on their directionality?

You'll need to take a step back here: Why are FABs positioned where they are? The Material guidelines only say The FAB can be aligned left, center, or right. It can be positioned above the navigation ...
Leo Wattenberg's user avatar
1 vote

Extended FAB would get in the way of a listview

Add a blank section to the bottom of the list, so that the last entry scrolls to and sits above the navigation.
Steve O'Connor's user avatar
1 vote
Accepted

Android FAB with progress indicator

Let's think about what could be the potential problems if we include an indefinite progress indicator of the action button. Can symbolize the state of the action button is changing Since the loading ...
Swapna's user avatar
  • 652
1 vote
Accepted

A stickybar with CTA buttons?

The development cost of adding those buttons, now a days, is very cheap so I would implement them and measure if generated the results you wanted. If not, think of an alternative. If you are going to ...
Joao Carvalho's user avatar
1 vote

Is it a good idea to use a Floating Action Button for non-actions?

The term "non-action" may be not the best option for this situation. The transition occurs when the user clicks on the button / link. That is an action there that change the data displayed, even it is ...
Madalina Taina's user avatar
1 vote

Hiding floating action button based on flag

IMO this would violate the material design practices. What I get from your question is that you have multiple actions assigned to FAB based on what selection user have selected. The best practice is ...
Imesh Chandrasiri's user avatar
1 vote

Is there a good use-case for a floating button on top of scrolling content?

It's a specific design pattern, as found in Google Material Design: Floating Action Button A floating action button is used for a promoted action. Shaped like a circled icon floating above the UI, it ...
JonW's user avatar
  • 37.4k
1 vote

Where should a floating feedback button be placed for maximum use?

Have you considered other UI elements (and placement) than a floating action button? FABs are intended often as the primary action on a page. Task completion is the primary focus, feedback is tertiary ...
Mike M's user avatar
  • 24.7k
1 vote
Accepted

Where should a floating feedback button be placed for maximum use?

Are the users supposed to do something with the flash messages, or is it merely giving them a heads up that something happened? In the latter case, try moving it to the top right. It's noticeable ...
Wendy Wojenka's user avatar

Only top scored, non community-wiki answers of a minimum length are eligible