Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Suggestions/ideas are also welcomed.

share|improve this question
add comment

2 Answers 2

up vote 2 down vote accepted

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.
    enter image description here
share|improve this answer
    
Hi, can you please elaborate on your point no 2. Thank you for answer –  Yasser Sep 23 '13 at 6:00
    
@Yasser I've updated answer, please, take a look. –  Alexey Kolchenko Sep 23 '13 at 10:48
    
one word awesome !!!!!!! –  Yasser Sep 23 '13 at 11:54
add comment

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.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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