CSV列マッピングインターフェイスの設計

Question

ユーザーが.csvファイルを使用して連絡先（数百万の連絡先を読み取る）をインポートできるようにするインターフェイスに取り組んでいます。

.csvファイルから次のフィールドを抽出する必要があります

• 電子メールアドレス
• ファーストネーム
• 苗字

私が話しているcsvは3列以上を含むことができ、これらの列は異なる列名を持つことができます。例えば

• メール/連絡先/メール
• 名前/ fname /最初
• lname
• ドブ
• 年齢
• 国

したがって、上記のように、異なるユーザーが異なるヘッダーを持つcsvファイルを持っている可能性があります。

したがって、csvからデータをアップロードする前に、csvヘッダーを読み取り、ユーザーが自分のシステム列（email_adrress、first_name、last_name）を自分の列にマップできるインターフェースのような列マッピングを提示するインターフェースを設計する必要があります。

以下は私が思いついたものです。ユーザーがこのUIを理解するのがどれほど簡単か、または難しいかを特定するために助けが必要です。

^{download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム}

提案/アイデアも歓迎します。

Answer 1

あなたのアプローチは、データ操作ツールに関してはかなり標準的です。いくつかの提案は次のとおりです。

1. 意味のあるヘッダーをダイアログに与えます。
2. ドロップダウンリストのフィールド名の下にデータサンプルをいくつか入力します。かなり奇妙なフィールド名に直面する可能性があるため、データサンプルはそれらの目的を認識するのに役立ちます。
   

Answer 2

サンプルがグリッドに表示されるときにいくつかの行を取得し、各列にコンボを追加して、ユーザーが選択しやすくします。

このアプローチでは、抽出の結果を実際に確認できる可能性があります。フィールドの自動検出を追加したり、特定の列を無視したりすることもできます。 ExcelやLibreoffice CSVファイルのインポート（文字列の引用符、追加のセパレーター...）などのオプションを追加して、結果をグリッドに即座に表示することもできます。

グリッドヘッダーは必須ではありません。グリッドヘッダーを使用して、デフォルトを表示したり、並べ替え/フィルターオプションを指定したり、クリック時のコンボに置き換えることができます。

^{download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム}