web-dev-qa-db-ja.com

平均的なユーザーは、標準のHTML複数選択ボックスを理解していますか？

ユーザーに1つ以上のアイテムを選択させたい場合、HTMLの正確に正しいフォーム要素は<select multiple>。

コードは次のようになります：

<select multiple id="sel">
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
    <option>Option 4</option>
    <option>Option 5</option>
</select>

これは次のようになります。multiple select widget。

ユーザーは次の方法で複数の要素を選択できます Ctrl または Shift アイテムをクリックします。

これはブラウザで使用される標準ウィジェットですが、これはこの種の入力を表示する最良の方法ですか？ユーザーはそれを理解していますか？

指示を追加することはできますが、私の意見では、そのような指示が必要な場合は、おそらく悪い設計です。良い代替案はありますか？それを置き換えるJavaScriptウィジェットでしょうか？

website-designformshtmlmulti-selection
21
Adam

つまり、平均的なユーザーはそれを理解していません。

チェックボックス付きのすべてのオプションを表示するか、チェックボックス付きのドロップダウン（ 例 、機能ドロップダウンを参照）などのおしゃれなものを試すことができます。ただし、これはテストする必要があります。

Philがお役に立てば幸い

20
Phil

これはディスカッションで頻繁に発生しますが、決定的な代替案がまだ見つかっているかどうかはわかりません。以前のUXExchange/StackExchangeの議論はいくつかのアイデアを与えるかもしれません：

リストから複数選択するのに最適なUIは何ですか？

例/チェックボックス付きのドロップダウンメニューのベストプラクティス

4
JonW

http://www.suumit.com/projects/bsmSelect/examples/index.html

つまり、複数選択の「推奨」機能の私のお気に入りの実装です。あなたが説明するように、それはリストではなくドロップダウンベースです。選択はチェックされていません。これは、6つの値のようなリストに対して処理するのが非常に困難です。一度にチェックしたすべてを確認することはできません。入力フィールドに選択を配置することは、私が見たかなりの数よりも優れています。入力フィールドのスペースがすぐに足りなくなるため、これは役に立ちません。

「3つの選択」を実行するものをいくつか見ましたが、これも役に立たないものです。何を選択したかを知る必要があります。私にとって、これはユーザビリティのすべての基準を満たしています。

  • ユーザーが選択したものをすぐに確認できるようにする
  • ユーザーが選択したものを引き続き表示できるようにする
  • 間違った選択を削除できるようにする
  • 部分一致を入力してリストを「フィルター」できるようにする
  • 基本的な埋められていないコントロールで画面の面積を最小限に抑える
3
Mike Earley

フィルは正しいです。同じウィジェットを使用することもできますが、CTRL/Shiftキーの使用を削除します。チェックボックスが不適切であることが判明した場合、それはかなり自己文書化するソリューションになります。

1
KemanoThief