is an accordion the best way to display payment method selection on mobile

Question

Working on checkout of a mobile e-commerce app. what would be the best way to display options for payment method? right now the it seems accordion might be a good choice. the content within each block hugely varies (e.g. cash on delivery might just be one sentence while for credit card it would be a form) and how and where would the summary of the selection be displayed. outside the accordion or an the head of the that particular accordion block. overall it seems like a lot of details and content needs to be simplified but visible at the same time within a limited space. any other suggestions than an accordion (already considered tabs but there's too many payment options to show horizontally)

Answer 1

I think it's a great solution. The shortcoming you have to watch out for is the fact that alternative payment methods can become clutter once the user has selected their preferred method. You can counteract this by A) making sure only one payment method can be open at a time, B) fading payment methods other than the one currently selected, and c) including a CTA (next/confirm) within the accordion section rather than making the user scroll past the other payment methods in order to complete their transaction.

Answer 2

I'm not a big fan of multiple choices once the user selected the desired one, so once the user "made his mind", I try to reduce friction as much as possible by "killing" any other non-needed choice.

In this particular case, what I would do is to use a multi step process: first, user selects the desired payment option. Then, user is directed to a page where he/she will see the process for that option and NOTHING ELSE. Thus, I can make a better use of space, there's no "noise" and no accidental touching of the other options. Keep in mind that this approach also requires an easier to manage process in case the payment process fails: simply add another window with a simple message:

Payment has failed #

retry / use another method

Now imagine what would happen if I do the whole process inside an accordion window, my method fails and then I have to use another accordion panel

So, IMHO, the "accordion approach" is not a good method for payment process because you have different screens, hence content is dynamic (causing the problems I mention above), while acordions are meant to be used with static content.

Here you have some info on when and whether to use accordions:

• http://ui-patterns.com/patterns/AccordionMenu
• https://developer.yahoo.com/ypatterns/navigation/accordion.html
• http://www.nngroup.com/articles/accordions-complex-content/ (this one has a mobile section close to the bottom of the article)

As you may see, while there's no mention of NOT to use it in payment processing, you'll notice it is mentioned as one of the situations to use them. Furthermore, there's not mention of using them with ANY dynamic content at all, only static

And finally, something that might be of direct interest for you: http://baymard.com/blog/accordion-and-tab-design (scroll to Better Alternatives)

If the content isn’t mutually exclusive, consider simply listing all of the fields on the page or splitting them out across multiple form steps. Our research shows that good checkout usability isn’t about the number steps but rather how user-friendly those steps are. Whether you have a 2 or 4 checkout steps doesn’t matter that much, what matters is what users have to do at each step, and how they are asked to do it (i.e. are users able to seamlessly progress through the steps).