Mapping of column fields from CSV file with currently available fields

Question

We have scenario where we want to:- upload CSV file -> then import data from it -> Map data with current fields

I tried few designs:-

1)

2)

But I am still not happy with my designs. As I dont feel those are user friendly. Can someone help me improve it or someone provide some good examples?

Answer 1

You can try really intuitive like Match the following which we have done in our childhood.

i can suggest you few interactions but you have to be precise with visuals as if not properly visualised it may end up bad.

but make sure when you hover on a single item other lines(lines of other elements) will have opacity 50% so that they may not effect visibility

---

Here you just drag the item in the list1 and put it under item2 of other list.

Answer 2

Prestashop has a similar functionality, where you can see your CSV file and match each column with an existing data. The drawback of this solution is that you need to click the arrows to see the next columns. I would propose to use a slider instead.

Things that you might need to consider:

• Lines that the user doesn't want to import - usually the 1st line because it might contain the title of the data
• Give a proposed mapping according to your columns' names
• Skip columns that your user doesn't want to import
• Mandatory destination fields in order the import to happen
• Save mapping, in order to save time for the next process