last day (15 days later) » 

Feeds
Feeds
10:03 AM
0
Q: Material design: FAB icon with several different actions

Arminas GrigonisCurrent situation: Under FAB button, we have several different actions - Edit element Add comment Issue: FAB's icon "+" seems to be inconsistent, not understandable, users get confused because they do not expect to edit an element, under the "add" button. Question: Need any ideas, how we cou...

icons material-design fab
 
Sheraz
Sheraz
Can you use separate buttons ? Also can you attach screenshot of the button in your question
 
Arminas Grigonis
Arminas Grigonis
@Sheraz, sorry forgot to attach the image. Original post updated.
 
Sheraz
Sheraz
Are you using these buttons in context of a mobile design or a web design?
 
Arminas Grigonis
Arminas Grigonis
@Sheraz, this application is widely used for both web and mobile environments. But if we needed to separate, I could say these actions are more used on the web.
 
Sheraz
Sheraz
Can you just use separate button for both actions instead of grouping them together?
 
Arminas Grigonis
Arminas Grigonis
10:03 AM
@Sheraz, I believe this is not a case for us, because considering material guidelines there should not be more than one FAB on the screen. Cough, cough, yes, I do know that there should be at least 3 actions under the FAB, but new actions are already in progress...
Hi Sheraz, thank you for your help. Do you see any suitable solution in our case?
 
Sheraz
Sheraz
I am fully aware that fab button should just be one. But if you consider the fact that both of these actions are not really the main action. So you can consider using them separately.
Also Google Maps use two fab buttons in one screen :P
 
Arminas Grigonis
Arminas Grigonis
Is that true? Cannot find two FABs in google maps. Can you paste me the URL? :)
 
Sheraz
Sheraz
 
Arminas Grigonis
Arminas Grigonis
That could be an argument for PM :)
 
Sheraz
Sheraz
You can see the usage of different action buttons which are not grouped together
 
Arminas Grigonis
Arminas Grigonis
10:09 AM
Interesting, have you ever saw any other (let's say google's) application, using two or more FAB in one screen?
 
Sheraz
Sheraz
Not that I am aware of but it all depends on your use case really
Can you share the screen on which you are working on? Where this button is being actually used?
 
Arminas Grigonis
Arminas Grigonis
Sure, we are using in this screen: pasteboard.co/I5djxIZ.png
Found an exception in material guidelines: material.io/design/components/…
"Occasionally two FABs can be used, if they perform distinct, yet equally important, actions."
 
Sheraz
Sheraz
10:30 AM
"Occasionally two FABs can be used, if they perform distinct, yet equally important, actions." Yes but then you have to decide that whether the two actions you have are equally important or not
I can also suggest an alternate design. Why used the fab button at all? Use simple buttons to perform actions !!
 
Arminas Grigonis
Arminas Grigonis
It is hard to find a place in the current UI to place a different button. Speaking about using two FABs,
 
Sheraz
Sheraz
Let me share a screenshot
 
Arminas Grigonis
Arminas Grigonis
If I click on, let's say, the first FAB - then icon transforms to the "X". What about the second fab? In your opinion, how it should behave?
Awesome will wait for your screenshot.
 
Sheraz
Sheraz
Why bother using the Fab button at all when you can use just use two buttons in the header
 
Gosia
Gosia
10:47 AM
Hi guys, sorry for jumping into your chat, just wanted to add to this conversation:
- totally agree with Sheraz
- if you need an argument for your PM use this from material design guidelines: 'Only use a FAB if it is the most suitable way to present a screen’s primary action.'
and if they ask why it is not suitable use this 'A FAB shouldn’t transform into unrelated actions.' - also from material design and for me add comment and edit value are not really related
2
 
Sheraz
Sheraz
"if you need an argument for your PM use this from material design guidelines: 'Only use a FAB if it is the most suitable way to present a screen’s primary action.'
and if they ask why it is not suitable use this 'A FAB shouldn’t transform into unrelated actions.' - also from material design and for me add comment and edit value are not really related"

This is really a nice argument to present
 
 
1 hour later…
Arminas Grigonis
Arminas Grigonis
12:17 PM
Thank you very much guys, I believe these are valid arguments for not using FAB at all in this case scenario. Will talk with a designer for different button implementation!
 

last day (15 days later) »