3

I have to design a form with one field being a quantity that represents the number of available items of a given product. I want to allow the user to modify this quantity in 2 different ways, in the same form: they can set directly a new quantity, or they can specify an amount to add/substract to the original quantity.

I thought two input fields could define the operation in the following way: one is for the amount to add/substract, and the other is for the result. If the user modifies one the other gets updated. In the end the value submitted is the value of the "result" input field. Negative numbers are allowed. One quick implementation of this for illustration:

https://jsfiddle.net/ra7uxr3x/

Am I on the right track or is there a common pattern to do this in another way? Maybe it shouldn't be possible to use the 2 modes of operation at the same time, so the user should be able to select from an "exact mode" or a "delta mode"?

  • Use a "spinner button" with an extra field to enter the increment – Ideogram Aug 9 '17 at 15:27
3

When a user opens the inventory form, it could look something like this:

enter image description here

When a field is updated:

  • The modified field should indicate that it's been modified from the original value.
  • The Save button should be enabled.
  • Other fields should be disabled (to prevent users from entering into a confusing state).

The top part of the image shows what would happen if they changed the quantity. The bottom part shows what would happen if they modified the "Added" field.

enter image description here

Separating the fields into Added and Removed makes it clear what the user is doing without having to use confusing +/- notation and aligns with what happened in real life. The terminology should reflect the terminology of the end-users (could be Received/Sold, depending on the situation).

Also, you must allow the users to discard the changes (not shown here).

  • A slight modified version of this is what works best for our needs, thanks! – Luis Aug 16 '17 at 9:23
2

Your solution is interesting, but I fear it may be too confusing.

You will need to play around with the look and implementation, but how about something like this:

addSubSet

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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