13

I'm developing a web application using Material UI as a design system. In a page of this application the user can create an article (for a blog). The article can have differents status and for simplicity we can assume that they are DRAFT and IN_REVIEW. At the bottom of the page there are three different buttons for different actions;

enter image description here

  • Salva (save - the purple button): if an article is in DRAFT status this button save the article in its current status without changing it;
  • Elimina (delete - the red button): delete permanently the article and redirect the user on the page with the list of all articles;
  • Annulla (cancel): discard all the changes the user has made on the article and return to the previous page (the list of all articles)

Now I have the need to add another button for changing the state from DRAFT to IN_REVIEW, but I don't want to add a fourth button because I don't like it. I thought to put all the actions into a FAB button

enter image description here

It is correct or there is a better way to do that?

I'm not even sure if the three buttons are correctly positioned...

2
  • Do you have a list of articles that then take you to this page when you select one?
    – Josh Part
    Oct 5 at 15:17
  • @JoshPart correct
    – Dennis
    Oct 5 at 16:00

2 Answers 2

31

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. There's only a color differentiation, so it might be harder to contrast the two when they're side by side.

Try isolating destructive actions:

This is a common UI pattern to prevent slips and mistakes. When the two buttons are spaced apart, the user won't accidently click on the wrong action.

enter image description here

I've also given the buttons some icons to provide more contrast, and to separate from the Cancel button.

One last thing: what a FAB is for: One last part of your question concerned a FAB as a solution. The FAB has its origins as a mobile tradeoff; how to have a visually salient, stable, and easily touchable area of the UI for a primary action (usually an ADD for a list, and an EDIT for a detail).

The problems with FABs, especially on desktop, is:

  • You have an button with no label, where desktop affords you the choice of being obvious and explicit.
  • The stacking FAB is nice for mobile, as it then shows you the labels for each action, but on desktop, it's not obvious what the initial icon or representation may be, and it's a much smaller selectable area as compared to a larger rectangular button with a label. There's also the potential for slips, as mentioned above.

Stateful buttons (if you have them): In some publishing UI (not sure about your use case), the buttons are stateful, meaning that they may disable and enable based on the capabilities and state of the document.

When no changes have been made the Save button can be disabled, indicating the document is up to date, but the Mark for review button might not be, as this action is available. Much of this relationship can get lost in a FAB stack or a split button.

Having all buttons visible also gives you access to tooltips if further explanation is needed.

9
  • Thank you Mike, so in your opinion I should add the fourth button (Submit - to change the state of the article) between the Cancel and Save buttons? The idea to put all the actions into a FAB it is bad because it hide all the actions to the user?
    – Dennis
    Oct 4 at 21:41
  • Hi @Dennis, I forgot to update with that extra button; just did now. So my thinking is that the two primary actions don't destroy anything, so they can live together. Also, I made the button title a little longer and more explicit about what the action is.
    – Mike M
    Oct 4 at 21:48
  • 2
    I like your solution @Mike, thank you so much for the answer.
    – Dennis
    Oct 4 at 21:49
  • @Dennis I also updated my answer re: your thoughts about using a stacking FAB and when buttons enable / disable in an application. Hopefully this clarifies things. Let me know if it doesn't.
    – Mike M
    Oct 5 at 15:11
  • It's perfectly clear @Mike, thank you so much
    – Dennis
    Oct 5 at 16:04
5
  1. 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?).

  1. You have lots of CTA, and for this case, i recommend another section "status or publication" with 3 radio bouton

Radio


  1. If you want to add more CTA (not recommended), you can check the hierarchy principle and color to help you.

> ![enter image description
here][1]


  1. Another solution can be to use a dropdown menu or more for hiding fewer priority actions.

enter image description here


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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