We're trying to solve a UX problem of assigning one set of objects to another (very large) set of objects in a quick, clean, and lightweight manner.
We have up to 12 different items that need to be shipped to the seat of every county in the US, and the order for these items is created using a web application. To set context on the level of pain experienced, this typically takes place twice a month.
Currently, the user goes through a workflow to select which of the 12 items are included for the order. For this example, let's say there are six items included in the order.
The last step of the order generation is to assign an item to each county seat destination. To simplify the selection process for the user, each county is grouped at the state level. This allows a user to select the state, which will in turn automatically select all counties in that state. The user can then exclude a handful of counties from that state if necessary.
This is currently done using a matrix UI, with the items across listed horizontally across the top, and the destinations vertically down the left side. each intersection contains a checkbox to indicate if the item in the column should be sent to the destination in the row. Initially, groups are collapsed, presenting a user with six columns and 50 rows. With all groups expanded, the user sees 3182 rows.
Having both "selected" and "unselected" items within a group resulted in the need for a tristate checkbox (gray and checked if some items below are checked). This is processed clientside and JS-intensive, resulting in a very heavy front end.
Do you have suggestions on how better to present these options, and to actually make the assignments? We've racked our brains on this and we think we've come up with a very engineering-like method of doing this that doesn't seem like it's the most user friendly.