I'm designing an interface that allows users to import employees into our system using a CSV file. I'm having trouble finding a way to allow users to map their columns to the system columns on mobile devices.

Some additional difficulty comes up because we want to offer users the ability to manually set a value for an entire column. For example, all employees being imported are often "active" (i.e. not separated, fired, on leave, etc.) so it is unnecessary for the user to have a colum in their spreadsheet named "Status" with every row being "Active".

This is what we currently have:

enter image description here

tl;dr I need to find a way to accomplish what is shown in the image on a mobile device. I would also prefer to find a better way to handle manually setting a column value instead of having all that additional space wasted on that.

  • I'm not sure if I'm getting it right but, are you trying to map the CSV columns with the columns of the user's system, and in the same page giving the option to set a value to those columns? Commented Nov 30, 2014 at 19:49
  • @rewobs Yes, that's the gist of it. Sometimes it might not be necessary for the user to have a column named "Status" filled with "Active" for every row. The interface therefore needs to have a way to set a value for that.
    – sweetteef
    Commented Nov 30, 2014 at 23:38

1 Answer 1


If the main issue you are experiencing is width then you could remove the 'Manual' column and include an icon to the right of the drop down that allows the user to switch to a manual input.


download bmml source – Wireframes created with Balsamiq Mockups

Alternatively, you could stack the options so that you gain maximum width for each column:


download bmml source

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.