How to simplify an interface for assignment of objects?

Question

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.

Answer 1

Let me be sure I understand you fully. A package made up of combinations of 12 items sent to each county twice a month.

Is there any form of repetition, e.g. counties in texas and New Mexico tend to get these 5 items. Counties in California get the same except item 3. If this happens a lot possibly allowing the users to create these "kits" and assign them makes sense.

Also, if the packages don't tend to change from month to month, save the last period and start with that as the default value.

Add in Filters maybe at the top and allow users to search/display only items that match what they've typed in.

Also providing a group UI would probably be helpful (again only if certain logical groups exist for your shipments).

The best advice I could give would be to ask your users what they'd like to see.

Answer 2

You could do something like this:

^{download bmml source – Wireframes created with Balsamiq Mockups}

The country is selected in a drop down menu for each item respectively. You could further improve this by introducing auto completion, that allows the user to enter the name of the countie manually. This prevents the user from too much scrolling if the drop down list is still very long.

The first combobox acts as a filter for the second one. That is, if you select a state in the first, only counties that belong to this state are shown in the second combobox.

You could allow multiple selection in the comboboxes, for more information, look at this article. They show an example, where you can put a tick before each selected countie within the drop-down list.

Or you might have a look at this article, for more inspirations about multi-select comboboxes.