0

I'm designing an e-commerce product page where the user can select to pay today or pay monthly. The option to pay monthly has several sub-options (18 months, 24 months, etc).

What is the best way to present nestled selection options? Currently, we're using radio buttons for the choice between today vs monthly. Should the monthly sub-options also be radio buttons or should they be checkboxes (only one option can be selected at a time)? I prefer checks for the visual distinction but checks are usually reserved for multiple selections.

Option 1 Option 1 Option 2 Option 2

Improve this question

2 Answers 2

Reset to default
0

I work at a company that has something similar to that. The user can select the type of payment, and then the conditions (according to type of payment selected). We use two combo boxes, without nestled selection. Here is an example:

enter image description here

Improve this answer
1
  • Stakeholders tend to want to see all the options at a glance, while I really like your approach here. I'll present both and see what happens.
    – discodelphia
    May 15, 2018 at 1:45
0

The problem with your second approach is that putting a check on the "Pay monthly" is not making a lot of sense, as you basically choosing between three different options but in two different categories. Using the category "Daily" or "Monthly" as more of a visual grouping makes more sense in my opinion and improves clarity.

Here are some options that I find relevant to your situation:

Option 1: Tabs

enter image description here So to achieve a clear grouping, you could split the two modes (Daily, Monthly) up using tabs. fluidui.com is using this approach. This is a very straight-forward and clear approach. The problem being that you don't have all options visually available for direct comparison, which can be frustrating for your users.

Option 2: Duration via dropdown

enter image description here Another approach would be to split your categories "Monthly", "Daily" into columns in a classic payment plan table, where you let users choose the runtime using a simple dropdown and adding a text "from 24.95/mo" at the top as an incentive. Though I think this way is too much in your case with just three options in total.

Option 3: Plain listing / no categorization by payment frequency

enter image description here You could also just drop the categorization and make the payment frequency clear enough as part of the price-tag. This is especially a valid approach as you only have three payment options but can become prohibitive once you need to add more options.

(Option 4: Separate Steps)

I think it might be a valid approach to split the process up, making the user select the durations in a separate step once he/she decided to go for monthly payment. In the first step, instead of showing the sub-options, you could again have a text saying "from 24.95/mo". That way, your selection stays pure and expectable, but also you are prolongating the process which can be dangerous in such critical situation as payments (bounce rate might increase).

You should also make sure to provide a visual hint towards your preferred payment plan by emphasizing it (eg. labeling it as "Most popular option"). This will reduce the burden of choice for your users and possibly result in higher conversion rates.

Improve this answer

Your Answer

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

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