Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

enter image description here

In this design, a user can have the following views:

  • One child from parent 1 and no child from parent 2
  • No child from parent 1 and one child from parent 2
  • One child from parent 1 and one child from parent 2
  • No child from parent 1 and no child from parent 2

I believe being only to view at most one child from either tables calls for radio buttons, but since "turning off" radio buttons is not possible, what's the best way to allow the user to hide the child from either/both categories? My best idea was to include a "hide all" radio button on top of each table.

Any ideas? Or is this the right approach?

Note: The add, edit, and delete buttons are on the top left of each table because, in the rest of the app, that's where the buttons are.

share|improve this question
add comment

5 Answers

up vote 5 down vote accepted

Why not just use a dropdown with three values

  1. None (or select) which is the default value
  2. Child 1
  3. Child 2

The dropdown gives an affordance that only one value can be selected and would not cause confusion. Right now your radio buttons dont look like a radio group and users might get confused about why they cant select both options.

share|improve this answer
    
Will be going with this answer. Thanks, Mervin. –  Vinson Feb 13 at 19:47
add comment

I can't comment yet, so I have to make this an answer. I am confused with the use of the radio buttons - but mostly because I can't see the context in which this screen in used. Can you explain what this screen does or wants to achieve - something along those lines.

share|improve this answer
    
Each parent are categories (for example: food groups). Each child is an image, but only one child's image can be shown at a time from each parent. If parent one is "Wheat", and parent two is "Fruit", then only one child of wheat and one child of fruit can be shown at any given time. –  Vinson Feb 12 at 17:34
    
The a dropdown as proposed by others is best –  Jennift Feb 13 at 6:46
add comment

Are you displaying more information on selection of one of the choices? If so, a dropdown with a preview would be the best solution:

drop down with preview

Otherwise, a drop-down menu with choices would be the best:

drop down

Maybe provide a bit more context?

share|improve this answer
add comment

"Hiding" the child may not be the best solution, as it may not be apparent to the user that the act of hiding is setting that option to "no child". They may interpret it as just hiding the option from view.

Best option would be to include a third child option, which would be to set the option to "none".

share|improve this answer
add comment

If you want to display all options to the user and not hide them in a drop-down, consider this:

Radio buttons

You're then displaying the option to "hide" in a place closer to the other options, making the ability to "hide" more obvious that in the wireframe posed with your question. You'd also be using the radio button design pattern as it's intended to be used - i.e. user can select one and only one option. Having it as the top option also ensures it's always in a consistent place for the user.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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