4

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

enter image description here

|improve this question
  • 1
    The question is a bit broad and abstruse. Can you explain the practical problem that you have? – Bart Gijssens Nov 22 '11 at 14:27
  • 2
    Question is a little unclear. Are you referring to a User Interface pattern for sorting information? Or an interaction? Such as dragging and dropping items into "containers"? – Sheff Nov 22 '11 at 14:41
  • 1
    Thank you for your comments, I rewrote it to make it more understandable – Max Nov 22 '11 at 15:31
  • Thank you for editing the question, now it becomes more clear. But I have another question: Why is it that the computer cannot "auto-load" the available cars? It seems that the computer can calculate the most optimal way to load the cars (e.g. use the minimum amount of cars, use tha maximum load capacity of each car). Why is it that users need to do this manually? – Bart Gijssens Nov 23 '11 at 9:30
  • @Bart: I asked the same question to my client and they just want to have a total control over this distribution process, automation would be pretty simple but then I would not need an interaction pattern :) – Max Nov 23 '11 at 12:26
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?

enter image description here

|improve this answer
0

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").

|improve this answer
0

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

My initial idea

|improve this answer
  • Instead of using the answer feature to update your question, you should edit your question. That way everybody sees it (right now your updated question is at the bottom, where people might not notice it), and this post doesn't get mistaken as an answer to your question. – user4662 Nov 23 '11 at 18:41
0

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".

|improve this answer
0

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.

|improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.