Full page wizard CTAs

[amyodea]

Hey Paste team!

Had a QQ on the full-page modal and the pricing cards.

On the full page wizard, we are using the pricing cards (with CTAs) on each card the user clicks one to move forward with that pricing plan. But we need to have a back button to bring the user back to the following step, where is the correct positioning for the back button? Having it at the bottom of the page to the left feels floaty. Can send a Figma link in Slack if needed.

Thanks in advance!

[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.

---

Hi there!

For your full-page wizard that incorporates pricing cards with CTAs, and where you're looking to include a back button to navigate to the previous step, it's important to consider the overall user experience and accessibility. Based on the Paste documentation, here are some considerations and recommendations:

Button Placement

In a multi-step flow, especially for directional actions, it can make sense to have the primary button right-aligned. However, this layout can feel odd, particularly since the primary button (in your case, the CTA on the pricing cards) can end up being far from the form or other interactive elements. For the back button, having it on the left could be considered "safer" as it won't accidentally submit the form or progress the user to the next step unintentionally. This aligns with general UX principles where the primary action advances the user, and secondary actions, like a back button, are placed in a less prominent position.

Fixed Buttons

The Paste team generally advises caution with fixing actions to the bottom of the window, as it can lead to users inadvertently making selections they haven't fully viewed or considered. Most wizard cases, including potentially yours, can be handled without fixed buttons. If a fixed button is absolutely necessary for your design, it might be worth exploring a custom solution that fits your specific use case while still adhering to the principles of good UX design.

Modal with Left Action

For modals, or in your case, a full-page modal-like experience, the Paste documentation suggests keeping the "Back" button as a left action. This is consistent with the general recommendation for modal footers, where the "Back" button is placed to the left of the primary action or CTA. This approach helps maintain a clear hierarchy and flow for the user's journey through the steps.

Given these considerations, placing the back button towards the bottom left, but ensuring it doesn't feel "floaty," could involve visually anchoring it within the layout. This might mean aligning it with other content or using visual cues to group it with related actions while still distinguishing it as a secondary action.

For more detailed guidance or to explore specific design patterns, feel free to share a Figma link in Slack. The Paste team is always here to help collaborate and refine the design to ensure it meets user needs and adheres to best practices.

For further reading and examples, you might find these resources helpful:

• Button placement and modal guidelines: Paste Modal Component
• General design system principles: Paste Design System

Hope this helps, and looking forward to seeing your design come to life!

I also did a search, and I managed to find these other Discussions that might be similar or related to your question. Give them a read to see if they answer your question. If they do, head back here and update this discussion and mark it as answered, pointing others to the related discussion:

• CTA/Submit alignment - Answer (updated: 10/28/2022, similarity score: 86%)
• Wizard accessibility considerations - Answer (updated: 08/31/2023, similarity score: 86%)
• Modal with Left Action - Component in Sketch vs on Paste site (updated: 11/13/2020, similarity score: 86%)

[roxanagomez]

Hi @amyodea yes please share the Figma file with us so we can take a look at it. Thank you!

[roxanagomez]

This was all resolved over Slack. Let us know if there's anything else we can help with!