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?

  • 1
    Does this question answer your query, or is your issue not covered by this post? ux.stackexchange.com/questions/17789/…
    – JonW
    Apr 23, 2012 at 11:21
  • @JonW Thanks for the suggestion. It almost covered my question. The challenge is the number of parts can be over 10 and input should also be able 'by keyboard'.
    – Rene
    Apr 23, 2012 at 12:05
  • @Rene: Did you read all of the answers there? I think they cover your situation, too.
    – dnbrv
    Apr 23, 2012 at 12:52
  • None of the answers deals with a text-only interface. They all are graphical interfaces (primarily mouse based, or with illustrations to exemplify the relative amounts). I do not think this question significantly overlaps. Apr 23, 2012 at 16:32

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

  • Thank you for this clear example. Eventually I made the design with "immediate" input fields (to be consistent with the existing GUI of the app).
    – Rene
    Apr 23, 2012 at 17:48

Your Answer

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

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