I'm working on the payment software, that allows users to make payments to different businesses.

To make a payment, a user needs to add the business's bank account and the payment method they want to use. We support 2 methods: Local(1 day) and Standard(3 days). To get this information we use a form(shocker!) with an accordion. If the user has info for both payment types they can enter both, or only for one.

At the moment it looks something like this:


download bmml source – Wireframes created with Balsamiq Mockups


download bmml source

I'm not a fan of this method, too many clicks and if the user is not familiar with the terminology or what information is required for these 2 payment methods they will be confused.

Is there a better way to do this. Should I stick with old school radio buttons or display all the input boxes at the same time?


Why not a responsive form using radio buttons? All 4 form fields will be visible straightaway, so let's say if they wanted to pay with a SWIFT number, but didn't know that it's a "same day payment", they can still do so without additional clicks.


download bmml source – Wireframes created with Balsamiq Mockups

If the user has info for both payment types they can enter both, or only for one.

I think you meant to say that an accordion would allow the user to enter details for both payment methods. That would be bad, a payment should be made using only a single payment method (unless if it is a feature of your app to allow funding a payment from multiple accounts).

  • Users are allowed to have 2 payment methods that's a feature of the app. I was thinking about dropping the radio button, and showing both options to the user. – Igor-G Nov 12 '13 at 11:44
  • @Igor-G I understand that they have 2 payment methods to choose from. But are you also saying they can use BOTH methods at the same time for a single transaction? – jingtao Nov 13 '13 at 9:35
  • This step is actually adding beneficiary, the user can choose to enter both methods. So when the times comes to make a payment they can decide what method they want to use. – Igor-G Nov 13 '13 at 10:25

Accordion doesn't bring the semantics of exclusive option choice. That is the main issue. Instead radios do that perfectly.

So you should clearly show the options to users. "Conservative" way with radio buttons will not necessary be the best choice, still it always brings acceptable results with a little efforts and resourses.


I would say that the radio buttons make much more sense over the accordion approach. As you had stated, there are too many clicks.

Although I believe there is another question here. Is this meant for mobile? Desktop? Or both?

  • at the moment this is a desktop application, but Mobile was taken into account. – Igor-G Nov 8 '13 at 15:52

Accordions work best when you have a lot of content to display within a small amount of space. It doesn't seem like you have a lot to show here (two form fields per each method), so it does not make the most sense. And, since this is a desktop app, you should be okay with space.

Another problem I see is when the user gets to this page, one tab of the accordion will be open and one tab will be closed (otherwise what's the point of using one), so the user may see the open tab as the default and only option to choose. Perhaps they may not realize you can click on the closed tab to open and choose that option.

Yahoo!'s pattern library is a great source of information; here's the bit about accordions: http://developer.yahoo.com/ypatterns/navigation/accordion.html


Accordions can be used to delineate steps in a process as opposed to choices that belong together in the same step (i.e, your example of payment type).

Without knowing much about your app, these could be:

  1. Sender Info (if your application hasn't captured already)
  2. Recipient
  3. Payment Amount and Type
  4. Confirmation and Receipt

If you did use an accordion, perhaps you can start with it closed on page load, so the user sees the steps involved, and animate the first step opening.

However you could also just use a progress bar, with a right sidebar stacking the completed info as you go. However, it's not mobile friendly.


What would you think of combining radio buttons with the accordion feature? http://share.axure.com/HIGC8A

The user would benefit of his "knowlegde" about radio buttons and its selective uniqueness during data entry. And you can still use your accordion to save space.


The point of the Accordion is

  • Save space
  • Eliminate completed processes

Maybe you could highlight or check the bar of completed sections Once a selection is made though a user doesn't have a final list of what options were actually selected so in this sense there is a loss of 'situation awareness'. Ideally you would have the 'current list' displayed but on devices with limited screen real estate this would have to be an off screen display which the user swipes in for a quick look

Think of how a real shopping cart works

  • You have Sections (Vegetables, Dairy, Meat, Pantry etc)
  • You have brands within each
  • You add them to your cart which you see steadily accumulate (progress)
  • If you change your mind you can grab it out of your cart (ie Clicking the item in your list opens the accordion so that you can select something else)

If changing a selection impacts subsequent options then the model is linear In this case displaying a path (step 1, 2, 3 etc with icons) and progressing through screens would be a better option.

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.