design patterns or examples of mapping fields

26 Sep 2012 - 4:32pm
3 years ago
3 replies
5905 reads
Amanda Nance

Has anyone seen design patterns and/or good examples of mapping
fields? For example, the user is importing contact information in a
CSV file into a system; they would need to match up the "First name"
field in their file to the "First name" field in the application.

I looked on several pattern library sites and did not see anything like this.



27 Sep 2012 - 8:24am
Larry Tesler

Don't know who your users are but if they are accustomed to Excel, they may feel comfortable with the style found in its Text Import Wizard (File > Import on Mac, File > Open on Windows). Choose "All Files" as the filter. Choose a CSV file. Walk through the steps to Step 3, which I'll call the "Column Selector".

Excel's Column Selector previews the data in each column. That's very useful in identifying what's in each column but may be more than what your team wants to implement.

Excel's Column Selector also lets you specify each column's format. The table has a "Row Zero" that contains the name of the format, e.g., "General". Select a column, then click a radio button to choose its format. This feature is useful in Excel, but may or may not be useful in your application.

If, instead of radio buttons and formats, your Column Selector provided a drop-down menu listing the application's field names, the user could perform field matchup manually. Row Zero would display the field name that corresponds to the column name in Row One.

Alternatively, Row Zero could contain a drop-down menu of field names. That's a more direct interface but may be less discoverable or harder to engineer.

Whatever the interaction design, the user will appreciate it if the Wizard automatically matches column "first name" to the field named "First Name", "First name", "FIRST NAME", "first-name", "FirstName", etc., before displaying the Column Selector. If the Wizard has found a matching field name for every column in the file, and the matches are correct, the user won't have to touch the drop-downs.

For columns whose names don't match any field names, the Wizard could guess by assigning the first unassigned field name to each column (after which it is no longer "unassigned"). A refinement would call attention to the guess with a color highlight of some sort.

Larry Tesler

27 Sep 2012 - 12:22pm

A 2 column drag and drop might be the simplest.
Each column has its list of fields.
User drags a field from the SOURCE list and drops it on the equivalent field in the TARGET list.
Fields moved from the SOURCE column no longer appear in the SOURCE column
Fields in the TARGET column that have values dropped on them should appear disabled and not be able to recieve other SOURCE fields. SOURCE fields should be able to be moved back to the SOURCE column.

This pattern does not account for mismatches in data type, length, format, etc. Nor does it account for value mismatches if the TARGET fields is expecting a value from a fixed list of values.

Field validation OnDrop could alert the User to these mismatch issues, but it would be up to the User to find a solution I would think. Better to create a web service and have the service do data transforms as needed baed on a set of predefined rules knowing the data expectations at both ends.

8 Oct 2012 - 1:28pm

Thats what I was thinking too... I've done initial design on something like this before but the team decided to just hard-code the fields for import rather than trusting the user to do it.

Syndicate content Get the feed