CTA button group (group of call-to-action buttons)


51
views
1
10 months ago by

Link to audit and desk research:
https://digital.westpacgroup.com.au/confluence/display/CPL/Forms+-+CTA+button+group

1. Upload examples of what you've used for your project (and what worked/didn't work)
2. Comment on the patterns that are posted below (and why you think it works, doesn't work)

2 Answers


1
10 months ago by

Suggested solution (based off existing guidelines):

XS view:

 

 

 

1

I'd be curious about the position of these buttons.

On the native side of the app we often anchor CTA's to the bottom of the screen – creates a nice physical consistency. 

There's an issue though: If the primary CTA is to sit above the secondary, then suddenly the secondary CTA is the one at the bottom edge of the screen. This kinda messes up the whole "tap very bottom to move forward on happy path" paradigm, which is why in the past we sometimes had the secondary CTA sit above the primary.

Happy to hear your thoughts!

written 10 months ago by Lukas  

True, that's a really good point. 

 

On the public site the primary action button tends to be at the top (in XS view) but I can see why it would make sense to have the primary button at the bottom also.

 

We will be testing these patterns with a customer panel, so testing the position of the primary button is something we could test.

 

Thanks for the feedback!

written 10 months ago by Amritah Pathak  
0
10 months ago by

Suggested solution (based off existing guidelines):

MD view:

 

 

 

 

 

 

Please login to add an answer/comment or follow this question.

Similar posts:
Search »
  • Mobile Wallet (AKA Tap n' Pay)
    1. Upload examples of what you've used for your project (and what worked/didn't work) 2. Comment ...
  • Validation - errors
    1. Upload examples of what you've used for your project (and what worked/didn't work) 2. Comment ...
  • Electronic verification
    1. Upload examples of what you've used for your project (and what worked/didn't work) 2. Comment ...
  • Search pattern
    1. Upload examples of what you've used for your project (and what worked/didn't work) 2. Comment ...
  • Off-canvas menu (AKA navigation drawer, hamburger, kebab, shelf menu)
    1. Upload examples of what you've used for your project (and what worked/didn't work) 2. Comment ...
  • Date input
    1. Upload examples of what you've used for your project (and what worked/didn't work) 2. Comment ...
  • Expense splitter
    1. Upload examples of what you've used for your project (and what worked/didn't work) 2. Comment ...
  • Next Best Action (NBAs)
    1. Upload examples of what you've used for your project (and what worked/didn't work) 2. Comment ...
  • Progress stepper
    Link to the audit of existing stepper patterns: https://digital.westpacgroup.com.au/confluence/di...
  • Validation - success
    Link to audit and desk research: https://digital.westpacgroup.com.au/confluence/display/CPL/Valid...