We are payment company and we offer two payment types - Priority and Local. First user has to create a Beneficiary that they want to pay, there they have to select the payment type. When they are ready to make a payment they need to select what payment type to use.

In some instances the information required for Priority payment is the same as for Local payment: To make a Priority Payment in US we need:

  • Account Number and ABA code
  • OR
  • Account Number and SWIFT code

To make a Local Payment we need:

  • Account Number and SWIFT code

What would be the best way to do this without confusing users? Also if user selects Local payment and fills out the information we will offer both payment types. At the moment I'm using progressive disclosure:


download bmml source – Wireframes created with Balsamiq Mockups

  • What do you mean by "if user selects Local payment and fills out the information we will offer both payment types"? – Matt Obee Aug 13 '14 at 10:55
  • So the user would save this information and then when they decide to make a payment to this account, we will offer both payment types. eg Would you like to make a payment using Priority or Local payment type – Igor-G Aug 13 '14 at 10:56
  • I just learned that BICs are known as SWIFT codes or IDs elsewhere. #i18n It’s really just a bank ID and from the little I just read it seems they can easily be distinguished because ABA RTN is always 9 digits and SWIFT/BIC is either 8 or 11 characters. So unify the text field. – Crissov Nov 11 '14 at 14:32

You should combine the repeating fields and show them only once, for example in the case of Priority service you can show the Account field only once and let the user decide if he/she wants to enter SWIFT Code or ABA Code.

Here is what I would do:


download bmml source – Wireframes created with Balsamiq Mockups


Basically you only have three input fields - where the user only needs two.

First, I would add some short help - an explanatory text in a modal, a hover icon (see other questions and answers for that) - to explain what the difference in terms of cost is, but leave out the difference regarding the needed codes. I would make sure to keep it short, but complete. Get to the point in the shortest sentences, but don't avoid depth.

Interaction with the form

Second, the form already can decide what the user needs: If he checks local, you can easily just disable the ABA Code field, hinting the user what information is needed. If he switches back to priority, you can again make it available.

When the user then clicks into the ABA Code field and start typing, you can just disable the Swift Code field. Enabling it again could happen by deleting the text in the already filled field.

Learning from mobile

On mobile devices it's still hard to type (on a touch screen without physical feedback). So on mobile devices you always will find great hints on how to simplify a users life when it comes to "type less".

If you want to be nice, add a (x) delete icon inside on the right hand side in the field, so the user can easily just dismiss his edit. This is a common pattern from mobile devices (for e.g. Google Maps) to avoid unnecessary typing (or holding the delete button on a touch screen).

Another thing that you can learn from Google Maps is the "switch button". When you want to enter a route, Google doesn't care if you have correctly entered the start and target points. You can just hit a "two arrows" button on the right hand side between them and the values get switched. You could offer the same interaction as well: When the user enters the Swift Code and he clicks the button, you switch the text to the ABA Code field and disable Swift. Make sure to blink (or hint in another way) the "priorty" checkbox so the user knows what happened.


There have already been redesigns of payment gateways that work with known real world interfaces, namely the card itself, to help the user to quickly find the needed information.


I like the previous answer, but I would go with something like this:



[] Priority - [] ABA code

[] Local

Then, if you press priority and ABA, then the second input becomes an ABA code. Another alternative would be:



[] Priority - [] Local

Then according to what's typed in (assuming that the two are different enough or have different checksum algorithms) I would just shield the user from having to choose.


Use auto-detection of code format if possible:


download bmml source – Wireframes created with Balsamiq Mockups

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.