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.

I have a web app and need to add a page where the user must select 1+ sets of 2 groups of items: Animals and Colors. In other words, they should be able to select 1+ Animals, and 1+ Colors. But, the list of available Colors depends on what Animal is currently selected...

Hence, given the following Animals:

  • Dog
  • Cat
  • Bear

And the following Colors:

  • Red
  • Green
  • Blue
  • White
  • Purple

And the following possible options between Animals and Colors:

  • Dog: {Red, Blue, White}
  • Cat: {Blue, White}
  • Bear: {Green, Purple}

I need to be able to allow them to select 1+ Animals, 1+ Colors, and make sure that the possible options (mentioned above) are "enforced" (meaning, they can't select Cat from the Animals list, and then select Red, Green or Purple from the Colors list).

What's the standard interaction pattern, UI component(s) and mechanism to implement this?

share|improve this question
add comment

3 Answers

up vote 1 down vote accepted

I think you need to get away from the strict form elements to help open up to a more usable solution to your problem. Rather than restricting yourself by using standard form elements as a starting point think of the best interface for the job then make the code do it.

The underlying code can still submit via form elements etc. but the overlaying interface can be completely separated from this functionality.

Remember that radio buttons and select boxes are just mechanisms for constraining the user into choosing one of a set of choices, you can build similar input structures using front end technologies and make them display in any way.

An example below shows white cat selected. All the available options are visible to the user and options are repeated where required. Selecting one of the top level options activates the appropriate list for the next choice and de-activates the other two lists. Marks are then also used to show the user where they are (contrast, borders and similar are recommended rather than just colour).

mockup

download bmml source – Wireframes created with Balsamiq Mockups

With this pattern everything is visible and the elements are logically grouped, the repetition of colours is only a problem underneath the bonnet, but not a tricky one to solve.

If you wanted to allow 1..n animals to be selected by any given user you could convert the functionality to allow more than one to be selected. In this case you would need ticks or some other mark that any given thing was selected or not.

In both cases a message would also be helpful to explain what the user should do, i.e. 'select as many animals as you like. you must also select a colour for each animal'

share|improve this answer
add comment

Here's one option you could use, I'm not sure if it's practical to implement in your situation but I think it's fun:.

https://www.dropbox.com/s/3ebyepiuog1f3mx/select.jpg

(I'm not sure why I can't upload an image here.. so there's a link)

If your example is not the actual thing you are designing and you want a simple interface that works for anything (even things that don't lend themselves well to icons like animals) you could do something like this

https://www.dropbox.com/s/tnyl5ci58f22vw7/select_2.jpg

Of course, if you get into a bigger list you'll want to do something a little different.

share|improve this answer
add comment

I hope this answer should resolve your problem. In my opinion you have 2 ways :

Firstly, you can create dynamic lists which colors results depends of radio button (for animal) selected few times ago. As soon as the animal has been selected, your lists with colors available appears. By this option, your content is 100% "responsive".

Secondly, you can make your animals list (dog, cat, bear) with radio buttons, then another list with both of colors (red, white, blue, green purple). Then, you can do a javascript "set". If cat has been selected, only colors available (blue white) appears with a font color black. Others answers are in a light grey. By black color, your available answers are highlight and user is easier distinct the available answers.

Or, of course you can hide non-available answers thanks to js.

I hope I understood your problem and help you in your project.

share|improve this answer
    
Thanks @Adrien Thomas - however they need to be able to select 1+ Animals, and if I display the Animals list as radio buttons, they will only be able to select 1 Animal at a time. The outcome of this UI should be a situation where, say, they have a "Cat list" that contains "Blue", and a "Bear list" that contains "Green" and "Purple". –  user3178622 Feb 11 at 18:37
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.