(Excelからコピーした)クリップボードからデータを貼り付け、データに関するいくつかのメタデータフィールドに入力するフォームを変更しています。
以前のデザインでは、クリックするとユーザーのクリップボードからデータを取得するボタンを使用できました。貼り付けでは検証が行われ、データが有効な場合、ボタンは「フォームの送信」ボタンに置き換えられます。
このような:
ただし、Chrome(これはサポートしたい))では、この種の不正アクセスをクリップボードに許可しないため、ユーザー自身がCTRL + Vまたは右クリック->データを貼り付ける必要があります。
多くのデータ行になる可能性があるため、ユーザーが入力しているデータをユーザーに表示することに特に関心はありませんが、データの貼り付けが直感的ではありません。
現在私が持っているのは、「データの貼り付け」ボタンの代わりに、データがまだ貼り付けられていないことを示すものです。ユーザーがページ上の任意の場所でCTRL + Vを押すと、データがクリップボードから取得されて検証され、有効であればインジケーターが[フォームの送信]ボタンに置き換えられます。
主にユーザーがメタデータフィールドの1つにメタデータをコピーして貼り付けようとすると、Excelデータの貼り付けがトリガーされ、無効であることを通知するという主な理由で、私はこのソリューションにかなり満足していません。ユーザーが遅くなることはまったくありませんが、混乱を招く可能性があるため、これはそれほど悪いことではないでしょう。
可能なオプション:
データを貼り付けることができるテキストボックスを追加すると、上記のメタデータフィールドに入力するときと同じように、そのときに検証が行われます。
データボタンをクリックして貼り付けたままにしますが、Ctrl + vキーを押すように指示するポップアップのようなものを表示します。しかし、これはユーザーにとって不必要に面倒です。
最後に、このようなデータを貼り付ける理由は、ユーザーが望んでいることです。通常、ここでは、必要なデータ以外のデータが含まれているExcelスプレッドシートからデータをコピーしています。その一部を別のファイルに入れてアップロードします。既存のデスクトップアプリケーションをこのWebアプリケーションに置き換えるため、可能な限り元のデスクトップアプリケーションに近づけることがプラスであり、このため、このデータアップロードの方法を追求しています。
データが存在しない場合は通常のテキスト入力をそのまま使用し、貼り付け後にデータのプレビューを表示することを検討してください。
これを行うと、他のテキストフィールドにデータを貼り付けるのと同じ方法で、ユーザーにデータを貼り付けるように求められます。このアクションは単純なユーザー入力であるため、ブラウザによってブロックされることはありません。
データが表示されたら、短いプレビューをレンダリングします(最初にx行を表示)およびy列)。ユーザーが間違いを犯したり、フィールドを削除したい場合に、ユーザーが何らかの方法でそのフィールドをクリアできるようにします。
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム