Best practice for dynamic form where user can split amount

Question

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:

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

Answer 1

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.

.

Answer 2

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}