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:
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?
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?
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:
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.
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.
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).
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
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
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.