I have a form in a web application where users may input bank operations. In this form, they have to put an amount, and they can, if they want to, split this amount into different "budgets". A budget split is defined by a code, and amount and a percentage. The problem is that I'm not quite fan of my current implementation of the split part of the form, and I'd like to hear what you guys think I may improve.

Here's the implementation:

enter image description here

(It's in french, but the labels don't really matter here)

How it works:

When the page is first displayed, there is only the first select list, containing the available budgets, and no lines under it. The user first have to select the first budget he wants to input a split for, then click on the "+" button. When he has selected the budgets, he has to input either the amount or the percentage of each split. When he inputs an amount, the corresponding percentage is calculated, and when he inputs the percentage, the amount is calculated. When there is only two lines that have not been filled, an input into one the four cases left will automatically calculate the three others. If on input make the total amount splitted to be superior to the operation's amount, the input is recalculated to match the operation's amount, and if a percentage makes the total percentage to be over 100%, the input is recalculated to make the total to be 100%

But I think that this functionment is not really intuitive, and that the automatic correction of the user's input may be a bad feature from their point of view.

Should I change the way my form works? Thank you, and sorry for my approximative use of the english language.

2 Answers 2


My reply might be a bit too late, but just a thought on how I would tackle your design issue.

What I would have done is to use sliders instead of text inputs for the splitting of a given amount into different budgets. I would ask the user to first select the budgets from a multi-dropdown control. Following that, I would display the corresponding budgets the user have selected below that control.

I would ask the user to slide the controls. When they do that, a tooltip will appear, showing the percentage of the budget allocation, and disappear when the user releases that control. In the case of two budgets selected, sliding one of the slider will affect the other one. In the case of three budgets, once the user has specified for example $6 in the first slider, calculate the remaining amount of $4 and split them equally between the remaining two budgets.

Implement validation checks on the backend to ensure that the amount allocated to the number of budgets tally with the original of $10.

enter image description here.

  • Hi. can you take the textual description out of the picture and write it in text in your answer? It's not very searchable like this, and it's terrible for accessibility. Thanks!
    – JonW
    Oct 20, 2015 at 12:59
  • @JonW I agree. My badness. :) Updated my answer.
    – Kuan E.
    Oct 20, 2015 at 13:06
  • 2
    Thank you for the answer, don't worry it's never too late, since the project won't be in production before April. I like the idea of the multiple slectlist, since it makes the user select all the budgets he want to split his operation with before specifying the values. However, the sliders may be a bit not "precise" enough (since trying to select the right value when you have a bad mouse, which is a pretty common thing, may be hazardous), I will discuss it with my coworkers, but thanks again :)
    – Waterfrag
    Oct 20, 2015 at 13:32

I think you're right that your automatic changing of the input could be confusing and disorienting, as users tend to expect input fields to remain whatever they set them to. They may be frustrated if your automatic calculation changes a field they didn't want changed.

One way to reduce confusion about changing input fields would be to split up the input and the output. You could allow users to enter whatever they like, select it as percentage or amount and have an automatically updating table below that displays both the currently input amount and percent. This would allow you to call the user's attention to fact that the percentages do not add up to 100% without having to change their input, which lets the user remain in control. Of course, you could add a total line or more clear error text in case the percentages get difficult for the user to add in their head.


download bmml source – Wireframes created with Balsamiq Mockups

  • The idea is interesting, but that sounds like I could keep the way my form works right now and just remove the automatic recalculation, and add instead a control on each input to display an error message if the total is not 100%. This way would limit the number of inputs required to fill the form, by not having to select the type of the number the user has to input before fill the form element. What do you think? Thank you for your answer though :)
    – Waterfrag
    Oct 12, 2015 at 9:42

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.