Double primary button situation

[pamelahu]

During wizard explorations, do you know how to account for a double primary button situation? We have “next” as a primary button but we want “send a test message” as one too:

[TwilioPasteBot]

Disclaimer: This is a very experimental bot using OpenAI's GPT-4. The answers may not be correct, a human will review the answer and update it if necessary.

---

Sorry, I don't know how to help with that.

---

Here are some similar discussions:

• Wizard accessibility considerations - Answer (updated: 2023-08-31T17:07:27Z, similarity score: 0.85)
• "Did you get that SMS" flow and yes/no button styling (Office hours: Sept 29, 2020) (updated: 2023-09-06T17:59:28Z, similarity score: 0.83)
• Wizard accessibility considerations (updated: 2023-08-31T17:07:27Z, similarity score: 0.83)

[serifluous]

Hey @pamelahu ! For this part of your question:

"We have “next” as a primary button but we want “send a test message” as one too"

Is this based on research/testing, or is it more trying to stick with consistency in having "Next" as a primary button?

In general, you want to use only one primary button per page, and whether that's the "Send test message" button or the "Next" button will depend on what you learn through testing ends up helping users get through this flow the best. fwiw you might also learn that 2 primary buttons here is best after all—if you do, let us know!

It's hard to tell without seeing the rest of the page layout and flow, but my personal hunch is that making the "Next" button a secondary button is probably understandable enough to move people forward while still focusing their attention on the main content. You can also set the steps of the Progress Steps component to be buttons/anchors as an extra way of letting users move to the next step.

Tagging @andoyle here too since he's starting to think through some of these more detailed form & wizard layout situations.

And I sent this in Slack already but just repeating it here for reference:

• Use Paste Progress Steps
• Swap out the gradient for something more aligned to the new brand style, like some of the light-colored circles and shapes in the new illustrations https://library.twilio.com/guidelines/guide/9846225e-b2c4-4cca-9079-dd275f6cdcf2/page/1d0fca68-b518-405a-bfae-1935d603217e

[andoyle]

Thanks for tagging me. Interested to know more about this, as I've seen this double primary button in some other flows. My assumption is that people think/research shows users are drawn to the 'Next' primary button, miss the main page purpose and continue (without sending a message in this instance).

If this is the case, then I would look at the page hierarchy first to make the main purpose stand out from the rest of the page. This could be putting the "Send a message" content in a Card or using a Callout above the inputs.

I have some other suggestions about this page, if you want to ping me the Figma link on Slack.

[TheSisb]

Not sure if you're disabling the Next button until a test message is sent, but that may help direct the designs as well.

[pamelahu]

The previous design had the "Next" button as a secondary button but the team found that people weren't perceiving it as a button/it wasn't getting enough clicks. For now, I have the "Send test message" as a secondary with an icon to hopefully make it stand out more! I'll see how it goes with users! & I Slacked you Andy - open to other suggestions! I wanted to avoid disabling buttons out of fear that users will miss the "Next" altogether and just leave the page! Appreciate the feedback! [image: Screenshot 2023-10-18 at 1.21.04 PM.png]

…

On Mon, Oct 16, 2023 at 10:04 AM TheSisb ***@***.***> wrote: Not sure if you're disabling the Next button until a test message is sent, but that may help direct the designs as well. — Reply to this email directly, view it on GitHub <https://urldefense.com/v3/__https://github.com/twilio-labs/paste/discussions/3546*discussioncomment-7293133__;Iw!!NCc8flgU!dCyLkW0ITf2-KRBqDIssAkKZiMN8E-Cno51VjCVHfPh0yud4FA2cg6_siGAF9x8ygFar6Fs4tn-SvH2GTS-N$>, or unsubscribe <https://urldefense.com/v3/__https://github.com/notifications/unsubscribe-auth/AEN6JRBSF3UBSYYKMCWHG7TX7U5HNAVCNFSM6AAAAAA57OGZA2VHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM3TEOJTGEZTG__;!!NCc8flgU!dCyLkW0ITf2-KRBqDIssAkKZiMN8E-Cno51VjCVHfPh0yud4FA2cg6_siGAF9x8ygFar6Fs4tn-SvOjw4YLe$> . You are receiving this because you were mentioned.Message ID: ***@***.***>

-- Pamela Hu Product Designer, Twilio.org [image: Twilio] <https://www.twilio.com/?utm_source=email_signature>