Sticky command bar

[QiiFeng]

Hey, my team is considering making the 'apply button' sticky to the bottom (pls see image blow).

In fact, we have another area in Twilio Intelligence where use the sticky bar. But it looks not aligned with Paste style at all.

Also, I noticed some other Twilio products are using sticky command bar as well, but there is no unified style.

Was wondering if Paste has this component already? Or consider the inconsistent issues above, any recommendations from Design System Team?

[shleewhite]

Hi @QiiFeng!

We generally don't recommend sticky bars like this.

In the first screen you shared, is it possible for the table to autosave? It's pretty uncommon for there to be tables in a pending state at Twilio.

For the second screen, you could move the buttons out of the command bar and use the create pattern for the create button. Also, what does the "try it out" button do?

In general, for long forms like in the other screen shots, we've suggested that people place the "submit" button at the end of the form (but not sticky). If you feel that customers aren't able to find the button:

• Break up the flow into several steps/pages/dialogs rather than throwing every interaction into one page.
• Validate that customers really need a sticky submit button (like Event Streams did in the last screenshot), and make sure it works for their customers in the absence of any better guidance from us right now.

For more context, here is another thread on a similar command bar: #691

[shleewhite]

Checking in @QiiFeng , do you need anything else for this?

[QiiFeng]

@shleewhite thanks for checking in and all the suggestion above, I am very sorry for the late reply.

Actually, for our case, the flow has 2 steps (see screenshot 1):
1st step: Input the word in the input filed and click on add button, then the word will be shown up in the table;
2nd step: Hit apply button, then all the words in the table will be applied to our speech model;

What we expect the customer to do is that once they land on this page, add words firstly and then apply quickly.
There are only 2 steps, I am afraid it is not necessary to break up into pages/dialogues, which probably will affect the efficiency of doing the task.

The reason we want to use the command bar is that:

1. The “apply” action is a page-level action, no matter how long the table would be, it needs to be easy for the customer to notice and trigger.
2. Our product already has several places using the same pattern in our product (pls see screenshot 2), keeping consistent is one of our considerations as well.

I am wondering any consideration for the team to discourage the command bar/sticky actions? Felt many other Twilio products also have similar usage.

[nkrantz]

Just updating this thread to note that we'll discuss these questions in DSYS office hours on Thursday!

[nkrantz]

Hi @QiiFeng! Just following up from office hours today.

• We talked about putting your design (with the sticky command bar, as is) and the design where you implement the Create Pattern and use a modal for the input field (and no command bar) in front of users to get a sense of which works best.
• We also talked about exploring the possibility of adding the "category" as a column to the table, rather than using the vertical tabs to filter the different categories. This would allow you to use the Filter Group Pattern if users need the ability to filter by category. You could use the Decorative Badge (being released very soon, keep an eye on the Badge docs) to give a bit of visual help and scanability.
• Because there's no current pattern for a "swap input fields" button, we'd recommend putting a button with clear text next to the two inputs for now.

Here's the recording of office hours! (check #help-design-system on slack for the passcode)