I have a website where you have the ability to select a delivery option but also read more information on each one and potentially have some custom options for each option too. Depending on the options they can become rather lengthy. This is the solution I have come up with.

My solution:

I have some delivery options in an accordion that shows information text text (and potentially other selectable options, lists etc) in them.

To select a delivery option (only 1) I have a 'select' button placed next to the accordion arrow. I also need the option to remove it and show its selected which is starting to get cluttered and it doesn't feel like a good experience. See below:

enter image description here


Does anyone know of any better patterns for this or know how this can be improved?

2 Answers 2


The Primary task is to pick something then press next. Learning more is optional. The affordance of the primary action should be clearer. Moving it to the left side similar to checkboxes/radios with labels helps in my mind. Add instruction so the user knows what to do.


Changing Select / Remove to Add / Delete, the solution is simpler, just combining these four buttons:

  • Collapse ↔ Expand
  • Add ↔ Remove

enter image description here

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.