How to enter separate amounts then give feedback if the total meets a given amount?

Question

case: During an ordering process, the user should be able to divide a given amount of money into a '1 to infinite' number of pots. So the sum of everything should be exactly the same when the step is finished. There is no 'others' option.

solution? I was thinking of a single line with a input field for label and input field for amount with the possibility to add each time an extra 'line' with a new input field. That field is pre filled with the amount that is not divided yet.

question Is this the best option to go with, or is there a more intuitive solution?

Answer 1

What you describe sounds completely workable. I would suggest a few enhancements to ensure it is user friendly:

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

• Display the remainder every time they update, so that they know how much is unallocated.

^{download bmml source}

• The remainder will go negative when too much is allocated, or alternatively you could prevent overallocation (the above mockup might be what a user sees after attempting to type 20 in the amount, rather than 12.85).

• Also seen above, you need to provide a way to remove entries (red X on the left).

• Clicking an existing entry should immediately allow editing of the name and/or amount. Hovering over an item should highlight it to encourage clicking; perhaps even changing it to a TextBox on hover, to clarify to the user that they can edit existing items. As a somewhat less pretty interface (but just as usable) the existing items could simply remain textboxes as they are added.