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) enter image description here

2) enter image description here

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?

  • Look out for other solutions - this is not a unique problem. For example, Thunderbird allows to map CSV columns to be mapped to their address book structure. Commented May 3, 2017 at 6:31
  • Here a PHP source code tool Csvxlsvisualmapping.com
    – zaGoox
    Commented Sep 10, 2020 at 20:42

2 Answers 2


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 enter image description here

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

enter image description here

  • I really like this solution, the only thing that I am afraid of is how visible the mapping will be if there are 30+ fields for example. Commented May 3, 2017 at 7:24

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

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.