UX for specifying & showing mutual exclusive pairs in a group

Question

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?

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.