Sticky command bar: Best practice

[kevh-c]

Hey all — I'm following up on feedback from last weeks open hours and would love to discuss best practice and approach for the command bar fixed to the bottom of a bunch of Console pages. Example screen:

Feedback from open hours was to make this a button however it feels very dominant and out of place to have multiple primary actions on this screen. Please see other explorations with the action aligned in different places below.

Feedback from my teams crit pod has also brought up that it is common practice to use a destructive button link because it is not a primary action and is still easily discoverable. Given that this isn't a primary action it feels out of place to treat it as such.

I'd love to get some consensus on this.

[travisterwilligar]

Some thoughts:

• I think placement of the button on the far right is definitely better, but this is still quite prominent and I worry is a distraction.
• In past usability testing, I've asked candidates to show me how they'd delete a messaging service via the red link in the command bar. I had 100% task completion.
• In the spirit of "refine to the essentials", I would encourage us to consider the treatment of a secondary action here. A secondary destructive button would be an easy fix (I know is on the roadmap)

[aayushpi]

Hi @kevhealy-git - thank you for your detailed and thoughtful question. I'm glad you're collecting feedback from a diverse set of perspectives to inform the final design solution.

Couple of thoughts here:

1. The general guidance for Paste is to limit the number of primary actions on a page. However, there may be cases where you may need multiple primary actions. One place that we're seeing this often is in the command bar. A hypothesis that we have for this is that it serves dual roles of being a form footer for submission and cancel actions, as well as a container for page level actions. This leads to a number of issues such as:

• Preventing teams from having multiple forms in a single page (not an ideal setting, but having the flexibility to do so will help)
• Making tradeoffs to evaluate which action is primary becomes a concern. For example, is a "save" more important than a "Pause Messaging Service" action? Is a "save" more important than a "Resume Messaging Service" action?

In the long run, you can do both (if you want to). For now, I'd say:

1. If you choose to follow the recommendation of @travisterwilligar, please add a confirmation modal with a destructive primary action that confirms the action.
2. A Delete styled link button could work in the interim. We'll have a secondary destructive that's probably preferred in the long run.

[travisterwilligar]

@aayushpi I agree with confirming the delete with a dialog. I think we should always do that when deleting/removing something that's non-ephemeral.

[kevh-c]

100%. Like the attached.

For me — and getting a general sense from this discussion — it is a hierarchy issue. A secondary destructive will most likely help. Once we have that in the library I'll have a play with it. I'll keep this thread open until I can get some concepts in if that is ok @aayushpi

[aayushpi]

That's wonderful. Thank you for the investigative, thoughtful work here.

[aayushpi]

Following up! Looks like we'll be shipping a secondary destructive button at the end of this sprint. You should plan to use it! @kevhealy-git @travisterwilligar

[kevh-c]

@aayushpi @travisterwilligar That's great — I'll keep an eye out.

[aayushpi]

@kevhealy-git Secondary Destructive Buttons are out: https://paste.twilio.design/components/button#destructive-secondary-button