I'm working on a Web App UI mostly for desktop (but also working on tablets) where the user has to manage inventories in a modal window.

He needs to select items from a stockpile (i. e. a large list) and add it to different inventory (i. e. another list) but also remove item from the inventory to add it in the stockpile.

Here is what I did so far:

enter image description here

The quantities are displayed in parentheses.

The user is mostly interested by the weight of the item.

Most of the time, he needs between 1 and 10 different items and 1 to 6 units per item.

I'm not 100% convinced by my UI. Do you have any suggestion/patterns to manage this kind of feature?

  • I think you should build up a person and a journey map for this. How does one get to this point in the journey? What do they do after? For example, what does the user bring to your application? A list? Does it have part numbers? Jan 8, 2016 at 16:13
  • You say a tablet is something he wants to use, what about Barcode scanning? Jan 8, 2016 at 16:14

2 Answers 2


IMHO your pattern to switch between columns is not bad UX at all, so I think it could work just right.

That said, some observations:

  • Other option would be to remove the buttons and use drag&drop. Then you won't need the buttons (cleaner interface) and it will be useful specially if you want to offer users a way of moving the items to an specific location on the list (you can't do it just with buttons).
  • As you say weight is an important piece of information, it will be good to keep it not that far from the item they're referring. In small screens it won't be a big deal but in medium or big screens it will be a UX detriment (too many space between related information)
  • If the list will be too long it would be good to add some filter at the top to find the items faster.
  • At least for me it will be more intuitive to add items from left to right, not right to left since the right is usually the place where "results" are, but I don't really know your model so don't take this comment as a concern.
  • Consider alphabetical order on the lists to improve searchability.
  • If the users are going to add a lot of items to an inventory in a same session, I will consider to change the pattern into one that let you do multiselect and then add "bulkly".
  • Also you could just use checkboxes! But the detriment here is that the selected items get a bit "lost" in the list.


download bmml source – Wireframes created with Balsamiq Mockups

  • You may also take a pick at a frequently used pattern for this situation enter image description here

Do enable drag and drop if possible, but don't rely on it fully. Let people select multiple in the list and then move over like in one of the examples. Not just by checkbox clicking but the full line item clicking. Add / remove might be represented with left / right arrows. Just those text labels are not straightforward. Mark the weight consistently. '3.15 and 3.00' vs '3.15 and 3'. Makes for easier scanning.

  • Thank you. Indeed weight would be easier to read with the same format.
    – Alex
    Jan 11, 2016 at 9:01

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.