Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

mockup

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?

share|improve this question

6 Answers 6

up vote 4 down vote accepted

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.

mockup

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

share|improve this answer
    
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.

share|improve this answer

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?

share|improve this answer
    
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

share|improve this answer

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.

share|improve this answer

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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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