web-dev-qa-db-ja.com

「行を追加」して複数の値を入力するのに最適なux設計

不明な制限の複数のエントリを許可するXingで次のメソッドを見たことがあります。 enter image description here

+と-が混乱しているように見えるので、私はより良い方法を望んでいます。さらに、これらのフィールドの保守性の高さ（クライアント側の信頼性、検証、サーバーでのダブルチェック、ajaxセキュリティチェック！...リストに行く）

だから私は次の方法を思いつきました、それは問題です、これは2番目のバージョンですが、それでもユーザーにそれを使用する方法を知ることができません、彼らは理解するのが難しいと主張しますか？ベストプラクティス、アイデアはありますか？

初めて値がなく、ボタンに「値を入力」と表示されます。値を追加すると、次のようになります。 enter image description here

Enter anotherをクリックすると、次のようになります。 enter image description here

website-designforminput-fields
24
Ayyash

言及していない選択肢は、必要に応じて行を自動的に作成することです。下部に常に1つの空白のフィールドがあり、入力するとすぐに別のフィールドが表示されます。このように、「追加」ボタンは必要ありません。既存のエントリを削除するためのボタンのみが必要です（または、ユーザーがそれらからすべてのテキストを削除することでそれらを削除することができますが、あまりにわかりにくい場合があります）。

これの現在のWeb上の例は Google Forms のフォームエディタです。

また、私はあなたのオリジナルデザインが − そして + ボタンはAppleのMac OS Xでよく使用されます。アドレス帳エディタとすべての「検索条件」構築UI（Finder検索/スマートフォルダ、メールルール、iTunesスマートプレイリスト、iPhotoスマートアルバム）。これらのボタンには「-」と「+」というラベルが付いており、通常、スクロールリストボックスの下端に結合されたツールバーに配置されるか、各項目の右端に繰り返されます（特に「スマート____」ルールでは後者）編集者）。

13
Kevin Reid

私がこの問題をどのように解決したかを示すために回答を追加することを考えました

最初の状態はデフォルトの空の状態で、「x」で削除されます Default state

次に、ユーザーが任意のキーを押すと、[さらに追加]リンクが表示されます

Add Another

[追加]をクリックすると、2番目のフィールドが表示され、プロセスが再び開始されます。私は、フィールドの1つが空になっている場合は「さらに追加」を非表示にして、常に空のスポットを埋めるようユーザーに強制しました。もちろん、空のフィールドを残して[送信]をクリックしても、空のフィールドは無視されます。

ユーザーがすべてのフィールドを削除すると、代わりに「何かを追加」リンクが表示されます

Empty state

2
Ayyash

Xingの+/-記号は、特に最後の行で、両方の記号が並んでいるため、事実上混乱します。値を増減するということですか？最初の行のみを入力した場合、送信する前に「-」をクリックする必要がありますか？

値を追加するボタンと削除するボタンの両方が非常に明確であるため、あなたのほうがはるかに優れています。これは、私が見た中で最も使用されているソリューションでもあります。

注意すべき点がいくつかあります。

  • 彼のコメントでケビン・リードが示唆したように、最後の行が編集されているときに行が自動的に表示される可能性があります。ユーザーがタスクを実行するために実行する必要がある作業が少ないほど、ユーザーエクスペリエンスは向上します。ユーザーにワンクリックを回避させることができる場合は、それを行います。

    JavaScriptを有効にしていないユーザーのことを忘れないでください。あなたはまだ彼らのために「+ Enter another」ボタンを持ちたいと思っています、そうでなければ彼らはただ一つ以上の値を入力することができないでしょう。

  • ポップアップの[キャンセル]ボタンは[+値を入力]の近くにあります。ほとんどのウィンドウとポップアップはすでに右上隅にある閉じるボタンを使用しているため、ポップアップの右上隅に配置すると、間違ったボタンをクリックするリスクが軽減され、より直感的になります。

  • ポップアップは「EO 11」フィールドから分離されていません。混乱しています。本当に新しいエントリを追加するのですか、それともEO 11を編集するのですか？「+ Enter value」の「+」は、実際に新しい値を追加するヒントですが、それについて考える必要があります。 。

  • ポップアップを入力せずに値を編集することはできますか？クリックして「BP2003」と書く方が、クリックして「BP」、<Tab>、「2003」、<Enter>と入力するよりもはるかに短くなります。また、数字が文字に関連付けられている場合（つまり、EO11はあるがEO12はないが、BP12がある場合）、オートコンプリートがより便利になる場合があります。

0
Arseni Mourzenko