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'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?

share|improve this question
    
is the restrictions and their number fixed or dynamically decided? –  kmonsoor Oct 11 '13 at 8:52
    
The number of options (and hence the number of possible restrictions the user may add) will vary based on user configuration –  Justin Grant Oct 12 '13 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.

share|improve this answer
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 '13 at 17:09

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.