Mapping Pane Simplefication

Question

I have a application in which user maps one table column to other table column .

To do this I have developed a screen in html which initially shows two tables in two separate pane facing each other and then to map user can select column and then drag and drop to other target table column .

But User faces problem when column list is huge , below are list of problems :

Problem 1 : User need to scroll first and then drag and drop to target if list is huge.

Problem 2: If mapping connection increases Lines start's overlapping with each other , so its not informative

Problem 3 : First column of source column could be mapped to target column last and to view it need to be scrolled and if not it shows half .

I am now thinking of rebuilding it with different UI using canvas html which can have transition and animation .

Can you suggest some different way to show this mapping which solves above problem .

Current UI sketch :

---

Answers comment

1. Do users refer back to this page for insight, or is this a configuration page, where the output is different than the configuration?

This page for both insight and for creating mapping . so in first view it should give idea that which column is mapped to whom in target table .

2.How many items can there be in each table?

1000 to 2000

3.Have you thought about allowing a simple grid for a Completed View for linked items, so users can toggle between a two column scrollable table view and the column Configuration View with the edges?

Not thought about this , can you give me more idea

Too many lines overlap

If first shown list is mapped to bottom list of target table , which is hidden now and need to be scrolled yet to view . The lines connecting is dense and start overlapping and gives no idea that who is mapped to whom to user . Like suppose 1st column of source column is connected to 200 columns of bottom most columns of target , in this case all lines overlap and thick region is formed which gives no idea which is mapped to whom

Answer 1

If you add filters and allow users to toggle connected (completed work), they can see unlinked items to complete. This can help reduce the number of items they're dealing with while they configure the columns.

A couple of questions:

1. Do users refer back to this page for insight, or is this a configuration page, where the output is different than the configuration?

2. How many items can there be in each table?

3. Have you thought about allowing a simple grid for a Completed View for linked items, so users can toggle between a two column scrollable table view and the column Configuration View with the edges?

Without knowing much more about your use case, I took a shot at trying to filter out some of the elements that might get in the way during the linking.

• If you allow segmented controls, you can filter for only connected or unconnected items.
• A search filter can also allow you to cut down the number of items. E.G. If I know the capital of New Zealand (Wellington), it may be way way down the right column. A quick string search will bring it up so you can link.
• If the Unlinked filters are engaged, once linked, it can fade out, so users have a sense of the linked items being removed from the filter. Subtle animations can keep the users from being surprised.
• If edges become a real issue, you can turn them on / off.
• I put some sorting controls in addition above each column. This assumes as you said, these columns can have many, many items.
• If you turn the edges off, you can use a signifier like a 'link' icon to show which items have matches

Update: I've added a separation between consumption (viewing) and configuration (linking).

With the very large number of items you suggested would be present, a tabular view for quick lookup and export would allow for quicker scanning, and eliminates the edge problem (where linked items are separated by long edges off the viewport height).

You can also add other functions such as export or download, or pair deletion if necessary, in addition to bulk selection if need be.

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