How to display more than three buttons?

Question

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;

• 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

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

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

Answer 1

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.

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.

Answer 2

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?).

---

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

---

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

---

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

---