多くの人は、HTMLのアイテムを複数選択する方法を知らない＆lt; select＆gt;コントロール、だから＆＃8230 ;?

Question

私は、毎日コンピューターを使用している人、HTML選択ボックス/リストで複数のアイテムを選択する方法を知らない人をたくさん知っています。ページでこのコントロールを使用したくない：

Please pick 3 options:
<select name="categories" size="10" multiple="yes">

では、ユーザーフレンドリーな代替案を提案してください。おそらく10個のチェックボックスがあります...または、クリックして選択すると色が変わる色付きブロックに各オプションがあるだけですか？ 20個のオプションの現在のリストが最終的には50個になると考えると、これは面倒になります。

どのように選択しても、（Javascriptを使用して）検証するのは苦痛です。少なくとも1つのアイテムを選択し、3つ以下のアイテムを選択するようにします。選択したオプションの数を検出することではありませんこれをユーザーにわかりやすい方法で伝える方法の詳細！

編集： ここでstackoverflowのようにタグを使用できると思いますが、ユーザーが技術的でない場合（そしてそれらの半分はそうなります）、これらはあまり適切ではないと感じます。

Answer 1

手動でアイテムの選択/選択解除を行うJavaScriptのonclick動作を備えたアイテムの手動リスト（単純なリンクとして言う）を使用できます。基本的に、cssクラスを2つの値の間で変更し、送信中にこれらのcss（または他の属性）をチェックして選択を決定します。

これにより、ユーザーは標準のCtrl + Click要件ではなく、クリックするだけでアイテムを選択し、クリックすることで選択を解除できます。

Answer 2

過去に使用した代替手段は次のとおりです。

1）少数のアイテムには、チェックボックスリストを使用します。 チェックボックスははるかに直感的で使いやすいですが、多数のアイテムでは問題になる可能性があります。それでも、アイテムの数が増えている場合は、次を追加できます。

<div style="overflow: scroll" />

固定高さ。

2）非常に多数のアイテムの場合、特に実際に選択されているアイテムが少ない場合は、実際に選択されているものを確認することが難しくなります。この場合、2つのリストを横に並べて、アイテムを別のリストに移動することができます。

3）アイテムの数がそれほど多くなく、数個より多い場合、社内でビルドするチェックボックス付きのドロップダウンを使用しました。これは、小さなスペースしか占有しないという利点があります。 これのようなものが役に立つかもしれません。

Answer 3

使用可能なリストボックスと選択したリストボックスの2つのリストボックスを使用することをお勧めします。リストの1つでアイテムをクリックまたはダブルクリックすると、そのアイテムが他のリストに移動します。便宜上、2つの「移動」も含めます。同じことをするボタン。このアプローチは、平均的なユーザー、Webアプリケーション、デスクトップアプリケーションで驚くほどうまく機能します。

Answer 4

3つのドロップダウンを使用する頻度の低いユーザーの場合、最適に機能する可能性があります＆gt ;:

<select><option>Capa Verde</option></select>
<select><option>Holiday</option></select>
<select><option>Competition</option></select>

別の方法として、クリックすると固定される一連のボタンがあります。ただし、最大3つのオプションの制限を伝えることは困難になります。

各写真を個別にマークする必要があり、カテゴリの数が限られている場合、写真のすぐ上にカテゴリのリストを表示できます（複数の列に表示される場合があります）（もちろん、アイテムを読み取り可能にし、クリックする余裕があることを示します）、ユーザーがワンクリックでタグを選択および選択解除できるようにします。キーボードフレンドリーではありませんが、何らかのポインティングデバイスなしでWebを使用することはほとんど不可能です。この場合、空間位置を使用してカテゴリと写真を接続します。

2つのパイル（使用可能および選択済み）などのさまざまなオプションがあります。

少なくとも「廊下」をすることはできますか？ユーザビリティテスト？

ユーザー用語での実際のタスクとユーザーは誰ですか？

Answer 5

特に後でアイテムを編集できる場合、複数選択は嫌いです（CTRLを押さずにクリックすると、すでに選択したものが失われます）。私の経験の中で最良の2つのオプションは次のとおりです。

1. 3つの個別の選択オプションがある（3つに制限している場合）。ここでの利点は、「3つまで選択」という指示があることです。ユーザーエクスペリエンスを維持し、少しのJavaScriptを使用すると、2番目のドロップダウンから最初の選択を削除できるため、混乱がなくなります。
2. チェックボックスを使用します。チェックボックスの利点は、おそらくデータベースとよりよく一致することです。さらに、情報はユーザーにとって非常に直感的であり、オプションをどのように提示するかについて少し考えると、ユーザーエクスペリエンスはかなり安定します。例チェックボックスを意味のある領域にグループ化します。