4

The user has 3 options/features to choose from, but here is the problem:

  • Each feature can be selected separately/on its own.
  • Feature A can be selected/combined with feature B.
  • Feature B can be selected/combined with feature C.
  • Tricky part: feature A can not be combined with feature C.

The user needs to know that they can select each feature individually AND that they can combine two features if they want (except for A and C).

Here is a little diagram: enter image description here
Are there any good visual ways to accomplish this?

4

If your goal is to show all the permutations of the options, then you may have to look at a diagram like what you have. However, I expect that is rarely the goal.

If it is simply to show people what options they can combine, I would do the following:

Most people will choose the most important feature to them first. So once someone has selected feature A, grey out the features that are not available in combination with feature A, and allow them to select additional features. Let's say they choose B now. You would then grey out all features not available with feature A and B together.

You would need a button to reset / start over like this, but it encourages playing, and will let someone easily understand what options they have based on the options that they are most interested in.

This mockup illustrates the concept, but is not meant to be a design guide.

enter image description here

1

A simple way of doing this would by using check boxes

mockup

download bmml source – Wireframes created with Balsamiq Mockups

In this approach, the users can select what ever features they want. The thing to note is that if the user selects Feature A then Feature C is disabled and hence the user cannot select it but Feature B is available for him to select. The same permutations apply for other cases too.

1

To avoid showing every option available, I would allow the user to select a specific item first and show them the available features afterwards. I would also have instructions to match.

There's multiple ways of doing this, but I used your example.

enter image description here

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.