I'm working on a SaaS/B2B web app that includes forms that allow choosing and later showing mutually-exclusive pairs among a small number of options. Here are some examples:

  • if the customer buys this package, don't let them buy this other package
  • if I'm visiting this region, I can't also visit this other region
  • if I'm inviting this person, don't invite this other person

Here's more context:

  • the total number of options to choose from is always small (2-6)
  • the default is always "no restrictions" meaning no pairs are defined
  • about 50% of the time users choose the default, 25% of the time they choose one pair, 20% they choose 2 pairs, 5% 3+ pairs

There are two UX's I need to figure out:

  • a "view" UX that shows restrictions applied
  • an "edit" UX that allows changes to restrictions as well as other attributes.

For the "view" UX my first thought was to use a grid, like this:

Package              Code       Manager             Don't Buy With         Actions
Southwest            12         Joe Smith           Texas, Cheyenne        [edit]
Texas                89         Alex Carlson        Southwest              [edit]
Dakota               34         Mindy O'Brien                              [edit]
Cheyenne             65         Jane Skilling       Southwest              [edit]

And for the edit form my first thought was to use checkboxes, e.g.

Don't Buy With:    [x]   Texas
                   [ ]   Dakota
                   [x]   Cheyenne

But I'm wondering if there's a better way to show and edit restrictions which better captures the "mutual" nature of restrictions applying in both directions (e.g. when you add or remove a restriction from one item it immediately shows up on its partner).

I thought about integrating checkboxes into the grid (one column for each potential partner), but some of the names can be long and we'd risk overflowing horizontal real estate for our users, especially those using smaller screens. So I discarded this idea (perhaps prematurely).

Any other ideas?

  • is the restrictions and their number fixed or dynamically decided?
    – kmonsoor
    Oct 11, 2013 at 8:52
  • The number of options (and hence the number of possible restrictions the user may add) will vary based on user configuration Oct 12, 2013 at 19:06

1 Answer 1


Consider alternative views and a Cayley table for this.

First, you pointed out that there are competing design needs, and this calls for alternative views. The display for the restrictions and the display to view the edits might look different.

Second, I would consider using a Cayley table to show the permutations of restrictions. It might look like this:

Package Restrictions

             Southwest     Texas      Dakota      Cheyenne   
Southwest  |    N/A    | Don't Buy |           | Don't Buy |
Texas      | Don't Buy |    N/A    |           |           |
Dakota     |           |           |    N/A    |           |
Cheyenne   | Don't Buy |           |           |    N/A    |

This recognizes that there is a mutual relationship between these restrictions and takes into account the use cases where the user needs to check and alter them.

  • 1
    This is a good solution. The only thing I would worry about is that it might be sparse for large number of choices. Maybe think about collapsing columns and rows that remain default?
    – Jeremy T
    Nov 6, 2013 at 17:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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