web-dev-qa-db-ja.com

ウェブ向けの最も直感的な複数選択コンポーネント

私の対象読者は、コンピューターにあまり慣れていないユーザーなので、使用しているUI要素をできるだけ簡略化するようにしています。

たとえば、ドロップダウンメニューを避け、代わりに大きなラジオボタンを使用するようにしています(可能な場合)。

次に、複数選択オプションリストを指定する必要があります。チェックボックスを使用することもできますが、プロパティが多すぎます。そのようなアクションを許可する単純なコンポーネントはないようです。

いくつかのオプションがあります:

通常の複数選択<select>要素

Regular Multiple select <select> element


チェックボックス付きのカスタムスクロール可能ボックス

Checkbox list


チェックボックス付きの複数選択ドロップダウン

enter image description here

それらのどれも私にとって十分に単純に思えません。 1つ目は、ユーザーにctrlを押して複数選択するように要求するので、私が信じている最悪のものです。他に考えているオプションはありますか?この問題についての研究はありますか?

22
Mortalus

複数選択入力のチェックボックスを使用します。これは、最初のGUI以降の実装の標準であり、UXの標準的な手法でもあります。チェックボックスの使用を確認するNielsenの記事: http://www.nngroup.com/articles/checkboxes-vs-radio-buttons/

チェックボックスは、オプションのリストがあり、ユーザーが0、1、またはいくつかを含む任意の数の選択肢を選択できる場合に使用されます。つまり、それぞれチェックボックスは、リスト内の他のすべてのチェックボックスから独立しているため、1つのボックスをオンにしても、他のチェックボックスはオフになりません。

そして、良い方法で実装する方法に関するあなたの質問については。

小見出しを使用して、チェックボックスの長いリストを論理グループに分割します。これにより、選択のスキャンが速くなり、理解しやすくなります。リスクは、ユーザーが各サブグループを個別のオプションセットとして表示する可能性があることですが、これはチェックボックスにとって必ずしも致命的ではありません。いずれにしても、各ボックスは独立した選択肢です。ただし、ラジオボタンのリストは常に統一して表示する必要があるため、小見出しを使用して分割することはできません。

13
rk.

変更 datalistsを試すことができます。幅広いオプションから選択する代わりに、手動でそれらを入力する必要があります。

彼らは検索し、あなたはいくつかの結果を示し、彼らは結果をクリックし、クリックされたアイテムはリストの隣にリストされます。何を検索するかについてのヒントを与えたい場合や、他のユーザーからの以前の選択に基づいて1つまたは2つの提案を行った後で、いくつかの提案を事前に入力することもできます。

検索する代わりに、単にWordクラウドのようなすべての可能なオプションをリストすることもでき、それらはアイテムをクリックしてそれらを選択することができます。例:異なる背景色)。ここにはいくつかのユーザビリティの問題がありますが、おそらくほとんどが経験豊富なユーザー向けです。

1
KMBredt