What is the best pattern to distribute items into several buckets

Question

Let's consider the following: A company wants to ship 3 types of fruits (apples, watermelons, strawberries) between two cities. Company has got 3 cars that can be loaded with fruits. Each car has a different available capacity (because they are different type and because some of them may be already loaded partially with fruits).

I want to build an interface that will enable users to distribute fruits into cars.

Do you know a good interaction/design pattern for distributing different kind of items by size and weight into several buckets?

Edit

Thank you for your answers. I think it is more complicated than two examples mentioned because they only cover one variable (amount) but they don't cover the weight and volume of each fruit and therefore the remaining capacity of the car (both volume and weight).

I prepared a wireframe to show you what I'm thinking about. This is not perfect because: - I want to make it universal, so when there are more fruits or more cars the screen will not be cluttered - I'm wondering whether user needs to see all the time the whole capacity of each car and the remaining capacity after user starts to distribute fruits. - The same question

Answer 1

I made something similar with a grid on the left of possible values and on the right are the possible buckets. You click on one of the choices on the left and can use the keyboard shortcuts on the right. (Press 0 to put the choice into "partner") See?

This works pretty well. Is this helpful for your use case?

Answer 2

For each bucket, display a sort of "see-through" object. When fruit is added, display a proportional amount of the bucket filled. (No fruit -> empty bucket, Full fruit -> full bucket.)

Near each bucket, display a % and/or the amount in the bucket (or the remaining space) and the amount allowed (ie. "Space available: 2 of 6", "Space available: 4 of 19").

Answer 3

Thank you for your answers. I think it is more complicated than two examples mentioned because they only cover one variable (amount) but they don't cover the weight and volume of each fruit and therefore the remaining capacity of the car (both volume and weight).

I prepared a wireframe to show you what I'm thinking about. This is not perfect because: - I want to make it universal, so when there are more fruits or more cars the screen will not be cluttered - I'm wondering whether user needs to see all the time the whole capacity of each car and the remaining capacity after user starts to distribute fruits. - The same question

Answer 4

Create a virtual bucket or bin that is visible when pointer is over the Fruit "bins". The bucket should have functionality to add, delete, clear and enter an amount to add or delete of the currently hovered over fruit. It should also list the total weight, volume, etc. of fruit in the virtual bucket. User can then go to each fruit bin and add to the bucket.

Then when they move the pointer over to the cars, they can deposit the fruit into the hovered over cars.

As they do these actions update your fruit and car "bins".

Answer 5

What's missing is the weight you add with each item in the bottom section. While it is helpful that you can reference it on the same page, it would be easier if the information were right next to the controls. But make it adaptive: next to the counter for each, multiply the quantity times the weight. Then add the total weight at the bottom. Finally, show the capacity underneath that, similar to the countdown in a twitter field.

Do the same for volume.

Done.