I have three different radio buttons, each one of them contains a submenu with three further options.
User can only choose one option in the submenu. So it seems that i have a radio button menu within another one. What approach would you follow?
Maintain this structure and indent the submenu?
Create tabs for the main menu options?
Another approach?
Sounds to me like a dropdown menu with 9 options :-).
Did you have a look at the Acer drivers download page? I think that approach could be a good example to consider. http://www.acer.co.uk/ac/en/GB/content/drivers
What happens is: 1) you click one option in the first box. 2) a second box is filled with new options, of which you could select one option again. 3) a third box is filled with selectable options.
If you make your screen smaller, it shows how responsive it is and what it would look like on mobile screens. The 3 boxes are merged together, and 3 tabs are shown at the top of the screen. When you select one option in one of the steps, you see a new tab activating, and the widget brings you to the next box.
I would go with your first option ... Maintain the main structure and indent the submenu. If you wanted to make it cleaner, you could also make the 'sub' choices only appear once the user has selected the top level radio button.
Nested radio buttons can be confusing to users. Another alternative is to use a drop down list and a radio button group. Depending from the value of the drop down list, the respective radio button group is displayed.
You can try the following without using radio buttons since the user can only choose one option each time. When they choose the last option, the filter can apply to all menus. Hope it helps.
I would go with drop down menus instead of radio buttons. Have only the first field active, then create an if-else statements and have the appropriate sub drop down menu load and unlock. But you could do the same with radios, personally just not a big fan of how they look.
