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. May 3 '17 at 6:31
  • Here a PHP source code tool Csvxlsvisualmapping.com
    – zaGoox
    Sep 10 '20 at 20:42

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. May 3 '17 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

This site is temporarily in read only mode and not accepting new answers.

Not the answer you're looking for? Browse other questions tagged .