What is the best UI for allowing the repeated selection of the same item from a list?

Question

In my project, I have two lists of items: on the left, all the possible items for selection, and on the right, those that have been chosen.

Unlike typical scenarios, in my case, the same item can be selected multiple times. Theoretically, this suggests that the item should not be removed from the left list after selection. However, through some testing, it appears that leaving the item in the left list might be misleading.

I am exploring the best UI/UX representation for this situation. Your insights on the optimal approach would be appreciated.

Update: It is a desktop application for managing and monitoring a testing machine.

Answer 1

The type of UI/UX you are using does not correspond to the functionality you need. In fact, if the items in the left list are to remain, the button to return them from the right list makes no sense.

I think you should think about a functionality more in the e-commerce sense: adding items in quantity and independently and with the possibility of removing them once "purchased":

Answer 2

If the order of the selection is not relevant, only which items are selected and how many of each, then it may make more sense to keep only one line for each distinct item, and a quantity.

The obvious example is the archetypal shopping basket on nearly all e-commerce sites:

• If you add an item the first time, it is added to the basket with quantity 1
• If you add an item which is already in the basket, you increase the quantity
• You have options to change the quantity for each item in the shopping basket (- / + and/or input field)
• You have an option to remove an item from the basket (usually a trashcan icon or a cross)
• Option: you can add multiple items at once from the product page by adding a quantity field there

In your case you have a list of items on the left rather than many different product pages, but the logic remains.

On some sites (like grocery shopping) it is common that the full list of items also shows if the item is already in the basket, and how many are in the basket (usually the "add to basket" will convert to a - | 1 | + composite button). You could use the same system on your list.

Here's an example:

You'll notice that on the left side you have the full list. When you add one to your selection, it does not get removed from the list, but the small + becomes a larger - | 1 | +, so visually you can instantly see which products you have already added, along with the quantity, and the option to add more or remove some.

On the right hand side you have standard shopping basket with only the products selected, each with their own - | 1 | +. This implementation does not have an option to remove an item from the basket with one click if the quantity is more than 1, or to change the quantity directly at this point (by manual input of the new quantity), but others may have it.

Of course in your case you may have only text and no images, so the layout of the "from" list may be very different, but I believe it's important to keep the visual difference between items already added and those which haven't been.

A small variation on this other site:

Here when quantity is 1 the - button is replaced with a trashcan (and the quantity is actually an editable input), but it's otherwise similar. The important point is that there is an obvious visual difference between items already added and those that haven't been (though it's probably slightly less obvious here).

Answer 3

What about removing the right column and the buttons, replacing them with just "Add" and "Remove"? Then add a counter to the items in the left column:

"Add" will increment the counter of the selected item, while "Remove" will decrement it.

If ordering of items is important, keep the "Up" and "Down" buttons to re-arrange items.

Answer 4

I have an identical UI, and after reading this thread, I simply moved the left arrow button to the right side and made it display as a remove button.

This particular API with the dual columns is used both for select and remove from the left column and for select multiple without removal and the button is displayed as a left arrow or the remove button depending on the task.