I'm creating a settings menu where a user can go in and set how they would like to weight data in an app. There are two versions of weighting and a user can select only one or the other. However, I want users to still be able to see the options available in the other version even when it's still not selected.

I'm curious what are thoughts around having radio buttons (selectors) in the tabs enter image description here

vs selecting one of the two of the versions of weighting separate from the tabs. enter image description here

For both version, the set of sliders are disabled when their tab is not selected.

Also I'm all ears if there are any thoughts on alternative ways that are better than these two options.


2 Answers 2


Paper dividers

Tabs in interfaces - just like physical dividers - are clustering controls; not selection ones.

So the interface is confusing. A user may make a selection then click on the other tab. Then what?

With the second option, you disable a tab but the user can still click on it? So to see the other option they need to first make a selection then click on the tab?

I'd suggest you use a selection component rather than a clustering one. You may drop tabs altogether and simply use two radio buttons, with the sliders nested under each, and just disable one set of sliders based on the selection.

Such option takes more space, but you've stated that it's important for users to see both systems.


Some designs for this could include a list of radio buttons with dropdowns below, with unselected options hidden+disabled:


download bmml source – Wireframes created with Balsamiq Mockups

Alternatively, a radio button list, with a single configuration panel below, which changes based on which item is selected


download bmml source

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.