one of my clients uses the following accordion on his mobile website:

enter image description here

A tap anywhere opens the section and selects the radio button. The chevrons open and close the selection, but only select the radio buttons and don't deselect them on close.

Is this good UX? It somehow feels wrong to me, especially on a smartphone.

Thank you.

  • I'm not sure I got your question. Did you mean that when you deselect a radio button or click on the active option, the chevron inverts and the box collapses, but even then the radio button remains selected?
    – Varun Nair
    May 24, 2016 at 12:46
  • Why is an accordion needed for this scenario? Can you add multiple cards? Why not select the type of card using a dropdown, or even better autodetect the card type based on the 16 digit number?
    – Midas
    May 24, 2016 at 12:49

2 Answers 2


There are a number of UI issues in this approach

  1. The use of radio buttons in titles of accordions : A radio button or radio button group is often used when you are selecting a single value among two values or a collection of values. The use of radio buttons to highlight which all accordions have been opened (not even completed) would confusion as it does not tie in with the mental model of the user and if the user opens the different sections in the accordions all the radio buttons would be selected would would again cause confusion.

  2. The interaction of accordions are driven by a single click on the title which either expands or collapses the accordion. Having two distinctive actions namely the chevron to collapse and expand and also have the radio button to click causes confusion between which action does what and how both actions tie in.

  3. An accordion is an excellent choice when you have a large set of information which is broken down into multiple sections (e.g. a FAQ). To quote this article from the Neilson Norman group

One of the biggest advantages of accordions is that they often allow users to get the big picture before focusing on details, and they can effectively mitigate the common problem of overly long pages.

That said, the use of the accordion in the form here is not useful since its breaking down related information into four discrete steps which could have been tied together under a single step (in this case different payment types)


I can see they are trying to combine selecting a payment type with entering the details by utilising a non-standard "radio button/accordion" widget, but this does not look like a smooth user experience to me either, e.g. it is adding confusion by offering multiple interaction points, and is forcing the user to think too much.

A simple drop-down menu and progressive disclosure would be better than a confusing combined "radio button accordion" because you are simplifying the choices to the person.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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