Drag and Drop vs Double Click behavior

Question

I'm working on a web application for a client which is essentially an inventory management system for a shipping/warehousing entity.

One vital part of the system is the ability to add products to a shipment. I currently have an unordered list that contains available products and an empty unordered list inside a form which associates products to a shipment.

With regards to user experience, what is the best method to add products from one list to the other? What are the benefits of using drag and drop, and what are the benefits of other events such as double clicking etc.? What is the quickest way to associate a product with a shipment?

Answer 1

When I was working on similar system, we decided to use drag'n'drop, but with some extra options. Initially, there was one column with wares and drag area (we called it "buffer"), that changed into column with entities after user dragged wares into it from the first column.

^{download bmml source – Wireframes created with Balsamiq Mockups}

There were such solutions embedded:

1. Item can be selected (and added to current selection) with simple click on all row area of it, not only text — it made simple to aim with cursor
2. User could select the upper group of items and drag it into buffer — and all wares got into it (as plain list)
3. User could select multiple wares and groups and drag them into buffer — so all wares selected and contained inside selected groups again added into the buffer.
4. The initial grouping of wares inside Store was made to simplify multiple additions — initially client supposed it to be a plain list, but there is rarely no way to embed any grouppings and spread entities among them. We decided to group wares at first by supplies from plant (producer of wares) and at second by type. It allowed to move similar products faster and track, which products are more expired and which are less. So try to embed your own grouping, because it is really difficult to click through every item.
5. Also clicking (without any Ctrls/Shifts) on item automatically added it to current selection. It saved us from situation when just one mistaken click can reset all the selection. To reset selection it was necessary to use special button (not shown in the left column). Because the operator of the system was using it constantly in his all-day job, it was normal to correct standard selection behaviour.
6. The operator also got feedback — which items (and whole groups) are already in buffer by making them less contrast in design. So we avoided different confusion of operator.

P.S. Actually "buffer" was changing size in width, because there was another column on the right for other scenarios and unnecessary in making shipment, so in your case the right column can be unchangable by form.

Answer 2

The more action methods you can provide, the better since some user prefer double-click, others drag'n'drop. Some user may even want to use both methods in different situations. My advice: implement both!

Answer 3

Benefit

With drag and drop you can rearrange the items on the list, without the need of buttons.

Considerations

According to the Principle of least astonishment:

exploit users' pre-existing knowledge as a way to minimize the learning curve for instance by designing interfaces borrowing heavily from "functionally similar or analogous programs with which your users are likely to be familiar."

Hence using both methods, will increase the chance that your application will be familiar to a wider range of users.