Should I present payment options in an accordion?

by Igor-G   Last Updated September 13, 2017 11:16 AM

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?

Tags : forms payment


Answers 7


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.

Alexey Kolchenko
Alexey Kolchenko
November 08, 2013 11:47 AM

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?

Sean
Sean
November 08, 2013 15:27 PM

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

Mark Bubel
Mark Bubel
November 08, 2013 21:55 PM

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.

Mike M
Mike M
November 08, 2013 23:01 PM

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

jingtao
jingtao
November 09, 2013 05:33 AM

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.

uxfelix
uxfelix
November 11, 2013 11:25 AM

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.

Nicolas
Nicolas
September 13, 2017 10:53 AM

Related Questions



the perfect credit card number field

Updated September 06, 2016 08:06 AM



Payment Received/Outstanding Interface

Updated June 18, 2015 23:07 PM