1

In the current project I'm working on we need to connect items in different webshops together. These items are the same but they have different article numbers and different descriptions so the association between the two needs to be done manually by the user through our interface.

What would be the best interaction for the task? Are there any best practices from other applications?

Connecting webshop items together My initial idea is to utilize drag and drop. The user would drag items from B to A and thus connecting the items. Although the interaction is intuitive it may be time consuming and straining so I would also also like to have a faster way of performing the task for advanced users.

For novice users: drag & drop.

For advanced users: ?

Any thoughts and advises are appreciated!

Improve this question
3
  • 1
    Sounds like a tedious task: are there really going to be novice users who are going to do this? (only when you'd crowdsource such effort, something like drop 'n drop would be a good idea imho) Or will it be a temp workforce that will fix this, that you can instruct to use a highly efficient way of entry?
    – murb
    Oct 9, 2017 at 14:14
  • I could describe it as an "purchase control" software. I.e. the user wants to connect a couple of items from one webshop to another but each time it will not be that many. Although the procedure it self may be carried out several times after another for each particular purchase. I'm also looking in to having the dev team saving connections so in the future we can suggest connections for other users based on earlier users selections.
    – Carl Opic
    Oct 10, 2017 at 11:23
  • 1
    Are the titles, pictures, or prices same between shops?
    – xul
    Aug 20, 2021 at 9:02

2 Answers 2

Reset to default
0
  • Dropdown next to Item A to assign Item B from options. That is probs accessibility friendly as well.
  • Numbered options on column B. User then has a text field inside each A to type a number (or select from dropdown).
  • Context menu on right click on Item A that allows you to choose the item in B from a list.
  • If multiple B items can be dragged to item A. Allow multiple select and the use of checkboxes.
  • Ensure changes are autosaved in case connectivity drops or something goes awry. Imagine someone just about to finish their list when Chrome suddenly crashes.
  • Allow for animation mechanics that make it easy to drag and drop to desired position. e.g Make sure a gap appears underneath each option when the user drags an item close to it.

Or if you want to be super fancy. Check this demo from Codrops on drag and drop interactions. Some less usable than others.

Improve this answer
0

To decrease the cognitive load, I would present only one item at a time from list A, and ask the user to find the equivalent in list B, select it then click on "match", and repeat with the next item.

If there are no equivalent, you need to add a "no match found" button to skip the association and go to the next item.

It works only if there are no duplicates in the master list.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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