2

I want to design the following interaction: user buys 1 ton of sugar and 100 apples, and wants it to be shipped to him in 3 different packs:

Pack 1: 200 kg of sugar and 50 apples Pack 2: 100 kg of sugar and 30 apples Pack 3: 700 kg of sugar and 20 apples

Is there any pattern that could help me design it? It looks a bit like ADD / REMOVE features interaction in old MS Office but it didn't have to deal with amount, only single line labels.

Improve this question
3
  • Are there any constraints - e.g. number / size of packages?
    – peterchen
    Apr 15, 2011 at 14:11
  • Does this help?
    – Vitaly Mijiritsky
    Apr 15, 2011 at 14:26
  • Yes, you can only ship them in 1, 2 or 3 packages. If you ship them in 2 or 3 split is needed. There is no limit of how much each package could weight. You can't split apples in parts.
    – Max
    Apr 18, 2011 at 8:11

2 Answers 2

Reset to default
1

I recently got myself a Humble Bundle, and so should all of you ;-)

Part of that process is for the user to decide how to split the donated money between several entities (game publisher, two charities, Humble Bundle team). I liked the way they convey this decision to the user, scroll down on the first page to find this:

Humble Bundle amount splitting mechanism

You can move those sliders around or choose one of the pre-defined default splits, which in my opinion is nifty by itself :-)

Improve this answer
3
  • Thanks for your answer. I was thinking about sliders when there are only 2 packages to be send, but it is getting harder when the users wants to send 3 packages
    – Max
    Apr 18, 2011 at 8:14
  • Yup, that's going to be a problem - right now, I see no easy and intuitive way of letting the other sliders react sensibly to the change of one. Humblebundle.com seems to have the others change proportionally somehow. In my eyes though, the solution is good enough for Humble Bundle's use case. Generally spoken: if you're cool with having odd values and just want the general concept implemented, it's definitely one way to go.
    – Jan
    Apr 18, 2011 at 9:08
  • Another thought there: maybe the sliders don't work as well for you, but pre-defined splits do. Save the user from splitting their order themselves and offer them a range of sensible, automatically computed splits to choose from.
    – Jan
    Apr 18, 2011 at 9:15
1

Hmm... You have a 'sums to' relation to satisfy.

Grid showing order

It's related to this question, but applied to each row. Have a look at the solutions there, and see which if any you would like to adapt. You're doing that multiple times.

My suggestion would be to let them enter any figures in any of the entry fields. You then flag inconsistencies where the numbers don't add up. You change the appearance of the fields that are inconsistent. You show a warning message explaining underneath.

People are used to seeing this kind of tabular breakdown with a totals column. You make their life easier if they can enter quantities in that format too.

The pattern here is separating data entry from validation logic. Do that and you allow users through 'bad states' on their way to a valid solution. It makes their life easier and gives you more flexibility in validation. You probably already have other dynamic constraints too, like not allowing any pack to be over 800 Kg in weight. The approach outlined here allows you to have such column constraints as well as the row constraints.

An optional Refinement: If you want to save the user some time typing and some arithmetic, entries they leave blank can be suggested penciled in (in grey) automatically, by splitting the remaining quantity evenly.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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