2

According to Material Design Guidelines, Google states that on any page the primary action of the page can be promoted in the floating action button.

But what if on different pages, we use similar floating action buttons for different proposes?

Both actions on both pages are adding, but the item that is added is different so the functionality is kind of different, but yet it's adding and I can't think of a different icon like "plus icon" to be placed on the fab. Keeping in mind that the pages may be blow by blow, is it a bad practice to do so?

Improve this question
1
  • 1
    If the common action is "adding", then a common icon ("+") seems reasonable. If it isn't obvious that the "thing to be added" is different in the two screens, then you probably need to work on that, rather than the choice of icon.
    – TripeHound
    Jul 31, 2017 at 9:44

1 Answer 1

Reset to default
2

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 screen to represent the most common action.

Source: Buttons: Floating Action Button

I don't see a problem with having different actions across pages as long as you make it very clear to your users what the action is. You can do that by either;

  • Labeling the action button, as seen in Google Inbox
  • Showing a material sheet when you press the floating action button
  • Not following the guidelines.

See the images below;

enter image description here

Improve this answer
4
  • 2
    Good advice from Nick and just to add, these are not hard and fast rules, UX should be the priority.
    – DarrylGodden
    Jul 31, 2017 at 8:48
  • Thanks for your response, but the main problem I have is that the actions are similar (both adding an item) and yet different (different items will be added in different pages) so it's like using the same fab for different proposes, and what probably makes it maybe even more confusing is that they are in pages that are followed by each other so it's like going back and forth to different views with the same fab and again different functionalities, albeit the pages have totally different UI which I think should make the confusion less.
    – Sarah Akhavan
    Jul 31, 2017 at 10:32
  • 1
    In that case I would make it very clear what type of item you're adding by having a good page design. Show a list of the items, for example. That way it is logical to add that kind of item when you click the floating action button.
    – Nick Groeneveld
    Jul 31, 2017 at 10:39
  • @NickGroeneveld Thanks, the page design explains it well (I mean they are completely different pages but lead to one another). So I hope there won't be any problem with this approach. Thanks again in advance.
    – Sarah Akhavan
    Jul 31, 2017 at 10:52

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.