Need a pattern to choose 1 or both of 2 options (+ edited for clarity)

Question

I have a screen which allows the user to capture bank account information (+ the account information is for someone that the user wishes to pay, either now or later - this is a banking context, not e-commerce) and then choose what to do with that information. The options are either pay or save or both. (+ the user may not be paying at this point so a solution that requires immediate payment will not work)

In my prototype (used for concept testing) I have represented these as 2 checkboxes. The user must select 1 or both. The interaction is clumsy and I'm looking for a more elegant solution.

The immediate requirement is for Web (desktop and mobile) but there may be a requirement for native app as well.

Any suggestions would be appreciated.

Answer 1

I would go with a mix:

A checkbox, a button and a link/less prominent button.

Benefit:

• You can save the users preference, so in most cases he just has to click the single default button.

Answer 2

Perhaps the following can get you thinking about the interaction flow.

The way I see it, you have a collection of existing options, or the option to add a new one. This list is accessible via the [Saved Options] button. This will trigger the modal window as shown in the second mockup.

Saving a set of payment options is an available feature, but not required for a user to continue, so you can have that logically grouped with the data input rather than near the page-ending, finalizing controls for the page (i.e. the [Pay Now] button in this example).

The [Save Payment Options] button should be a button because it triggers an action immediately--adding to the Saved Options list--but doesn't navigate away from the page.

Clicking [Use Selected] from the modal can just prepopulate your form for you.

I'm not sure what fields you're dealing with, but hopefully this will help get you started.

^{download bmml source – Wireframes created with Balsamiq Mockups}

Answer 3

I would like to suggest very different way so that user cannot get confuse, also it will not look like a threat as it is a sensitive information of user.

Simply show only one button "Pay". Once the user will fill the payment information and click on pay, then only show the popup "Would you like to save this payment method as your preferred option" and show 2 option "Not Now" & "Save & Pay".

Thank you!

Answer 4

I think you can accomplish all of it without overloading the user with options up front. I would consider giving TWO buttons: just "Pay Now" and "Save and Continue".

If the user chooses to save, that happens and they are satisfied, left at the same place in the flow. If they choose to Pay, they would be taken into that flow without any interruption, but at the conclusion of the payment process provide them the option to save their payment info for future purchases.

My $0.02

Answer 5

Elect one operation to be the main one. The screen will be about it, and the other one will be also possible. This way the screen won't be clumsy, understanding it will be immediate.

Then let the user do any of the two operations later whenever they want (i.e, pay from a contacts list or save a contact from the history of payments).

That's the same situation of dialing a phone number on the cell phone. Usually it offers three options: create new contact, send an SMS or call to the dialed number.

The interface has a clean design because the call button is proeminent, green, light, with an icon instead of text and is already there when the interface is shown (as you expect to be in a phone dialer); the other options are shown after you dial the number, along with auto complete suggestions, appart from the main option (green button "call"). And if you want to save the number after you have called to it, you can do it from the call history.

Answer 6

My suggestion would be

Suggestions 1 - in this approach of transactions, Pay would be default. - save would be an optional - it's better to give Pay button and add check box to Save info.

Suggestions 2 - while collecting the bank info, add checkbox option to save the info like "save this payment info" - next screen provide option for the Payment - in this approach user would be aware of deciding the best option and it's clear approach

Answer 7

This answer has been updated.

If this choice is the primary action for this screen I would use buttons labelled with the available options instead of checkboxes. The buttons should read pay and save payee, pay, save payee. You would also need to throw in a cancel button if the screen doesn't have an exit mechanism.

However by offering three options, you are combining two operations that should probably remain separate. To make the interaction less clumsy you could separate these two operations. I think this flow might help:

1. After information is captured provide pay now and pay later buttons.
2. When the user selects pay now inform them that the payee has been paid and provide them with save payee and done buttons.
3. When the user selects pay later inform them that they can choose to save the payee (possibly also include steps to pay a saved payee). Again provide them with save payee and done buttons.

Answer 8

Additional context might help shape answers for this.

Assuming this is for a pay situation, I agree with Mattynabib's answer, above. Is your interaction is happening at a checkout?

If not, I might recommend saving this "pattern" for that interaction/pay time. That's when folks are used to (more comfortable with) indicating whether to save their personal / banking info.