4

I have a radio group and each value has sub-inputs, for example:

enter image description here

User chooses "Cat" and gets cat-related sub-inputs, there can be any number of sub-inputs.

But the issue with this layout is that "Horse" in the closest to sub-inputs, so user might assume that sub-inputs are related to "Horse" and not to "Cat".

So I change classic radio buttons to horizontal bar:

enter image description here

BUT they problem that text in buttons can be quite long, which creates multiline radio-buttons, which look not nice.

Any idea on what type of control to use in this case?

I choose animals as an example, in reality everything is a bit more complicated.

  • Why would someone who selected Cat would think that this is related to Horses ? Have you tried increasing the font and weight of the selection ? – Cristian Negraia Nov 28 '18 at 9:15
2

Grey out the sub selection until the primary selection has been chosen.

This is done for choosing towns in a state, etc.

Dunno what this is called. Or if it's "best practise", but it works, and is used everywhere useful. Definitely a known convention.

2

Why don't you change the layout slightly while keeping the original controls like you proposed. Have a look at the following mockups:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

You simply add balloon-like sub-menu next to the selected animal. And this sub-menu is dynamic.

What you can also do is to start with none of the radios selected and sub-menu fully collapsed (hidden).

With this solution you go left-to-right order in filling in the characteristics of your object while each set of characteristic is in the form of the list. This way your main group titles can be lengthy, in fact as long as they leave some space for the sub-menu. Furthermore, multiline radio buttons don't look that bad if you wisely play with the spacing between each button.

1

You can use the Expose within radio buttons pattern, so the groups are segmented under (and in close proximity to) the selection.

LukeW discusses this pattern in his classic book Web Form Design

Like most things he writes about, he's researched and tested this method:

Because this solution displayed radio buttons and the selection dependent inputs in very close proximity to each other, it also acheived near perfect satisfaction ratings. The "expose within radio buttons" also hid irrelevant form inputs from people until they needed them.

If you use this pattern, it will be clearer to the user that the radio button they select will have its own independent input set.

Here's an example from codepen:

enter image description here

You'll have enough room for long labels and a form group, and the animation that opens the sub inputs tells the user they belong to the choice they just selected.

  • That is horrible. Please never use this. The animation is really disorientating. Keep your UIs as static as possible. – bace1000 Dec 2 '18 at 8:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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