designing CSV column mapping interface

Question

I am working on a interface that allows a user to import his contacts (read millions of contacts) using a .csv file.

I need to extract the following fields from the .csv file

• email_address
• first_name
• last_name

The csv I am speaking about can contains 3 columns or even more and these columns can have different column names, for example

• mail / contact address / email
• name / fname / first
• lname
• dob
• age
• country

so different user may have csv files with different headers, as shown above.

So before uploading the data from csv, I need to design an interface that will read the csv headers and present a column mapping like interface where the user can map my systems column (which are email_adrress, first_name and last_name) with his column.

Below is what I have came up with. Need some help in identifying how easy or difficult will it be for user to understand this ui.

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

Suggestions/ideas are also welcomed.

Answer 1

Your approach is rather standard as for data manipulation tools. Some suggestions are:

1. Give the meaningful header to the dialog.
2. Provide several data samples under the field name in a dropdown list. You could face rather weird field names, so data samples could help to recognize their purpose.
   

Answer 2

Get some lines as samples display in a grid and add combo to each column to helps people choose.

This approach give you the possibility to really see the result of the extraction, you could even add some auto detection of fields, you could choose to ignore certain columns. You could even add option like excel or Libreoffice CSV file import (string use quotes, additional separator...) and instantly display the result in the grid.

The grid headers are not mandatory they could be used to display default, give sort/filter option or could be replaced by the combo on click.

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