web-dev-qa-db-ja.com

ユーザーがリストから選択できるオプションの数を制限するにはどうすればよいですか?

ラジオボタンは単一のオプション用であり、チェックボックスは複数の選択用ですが、最大2つの選択を実装するための最も理想的な方法は何でしょうか。私は:

  • 2番目の選択後にすべてのチェックボックスを無効にしますか?
  • 送信後、警告するまで待ちますか?
  • 所定の位置にアラートを送信し、送信時に再確認しますか?

それを行うための最も理想的な非侵襲的な方法は何ですか?

9
Ayyash

トラフィックの多いWebサイトでさまざまなソリューションを試しましたが、チェックボックスを使用して、最大数に達したときに残りのオプションを無効にするのが最善の方法でした。

最初に、ユーザーには定期的なチェックボックスが表示されます。最大2つのオプションを選択できることをユーザーに通知するメッセージがありますが、ほとんどの訪問者はそれを読みません。

The list of options before any are checked

ユーザーが2つのオプションを選択すると、残りは無効になります。

The same list of options after the maximum number of items has been checked, with the other options disabled and the selected items emboldened

ユーザーが選択したオプションの1つをオフにすると、すべてのチェックボックスが有効になります。このアプローチは、経験の浅いユーザーにとっても直感的であることがわかりました。

このアプローチはJavaScriptに依存しているため、送信時に追加の検証が必要です。

11
Emil

いくつかのオプションがありますが、それはすべて、ユーザーが選択できる選択肢の数と、ユーザーが選択できる想起の量に依存します(これらのオプションを以前に見たことがあるか、おなじみのオプションか、ユーザーにとって新しいか?)。検討したいオプションがいくつかあります。

enter image description here

選択するオプションが多すぎない場合は、2つの選択オプションの使用を検討してください。ただし、1つのオプションで行われた選択は、他のオプションでは無効にする必要があります。これの欠点は、利用可能なオプションがすぐに表示されないことです。

enter image description here

多くのリストから選択を使用できます。これは高さによって制限できます。オプションがコンテナーの高さよりも大きい場合は、垂直スクロールが表示されます。次に、右側の選択に選択肢を追加できます。これは、最大で約15の選択肢がある場合にのみ使用してください(選択肢をスクロールするのは面倒です)。この欠点として、2つ以上のオプションを選択することができます。これを許可して、モデルにエラー修正を追加します。

enter image description here

これにより、ユーザーは制約内で実験し、選択を行い、選択を絞り込むことができます。

最後に、あなたが回避したソリューション。 2つのチェックボックスをオンにしたら、他のすべてのオプションを無効にします。選択肢がたくさんあり、ユーザーがすべてのオプションをスキャンして選択する必要がある場合は、このオプションを使用します。このようなオプションがたくさんある場合は、オプションを分類できるかどうかを検討してください。可能な場合は、カテゴリの見出しの下に分割して、スキャン能力を向上させます。この欠点として、2つのオプションがすでに選択されている場合、ユーザーは選択を絞り込む前にオプションの選択を解除する必要があります。

「送信が完了するまで待つ」または「所定の位置にアラートを送信し、送信時に再確認する」に関する質問に回答するには、インライン検証を行うのが良いと思います。したがって、2つ以上選択すると、ユーザーにアラートが送信され、 2つしか選択できないことを認識しました。私の最後の例を取り上げ、ユーザーが好きなだけ選択できるようにする場合、これにより、おそらくイライラすることが少ない、前述の欠点が取り除かれます。このオプションを使用する場合は、必ずインライン検証を追加します。

8
DigiKev

オプションの数がチェックボックスやオプションボタンのようなものを検討するのに十分であると想定して、ラジオボタンの列を個別に試してください。

Column for 1st and 2nd choice

1つの列から選択すると、もう1つの列に対応するボタンを無効にします(同じオプションを2回選択することが問題であると想定)。これにより、最初にユーザーエラーが発生するのを防ぎます。あなたのケースでは、2回のクリックでユーザーは完了です。簡単な変更はワンクリックで完了します。チェックボックスを使用するよりも多くのスペースを必要としません。

より野心的な代替策は、制限を伝えるための物理的な比喩を構築することです。これは、ユーザーが「1番目」と「2番目」に混乱している場合に必要になることがあります(たとえば、ランキングがそこにないことを意味すると考えている場合)。正確なメタファーはユーザーのドメインに依存する可能性があります-互換性があり、理想的には通信したい理由 2つ選択する必要があります。たとえば、2つのオブジェクトを選択して互いに「バランス」または「対抗」する場合、オプションを配置するためにスケールまたはシーソーを表示します。

限られたリソースを意味する一般的でコンパクトな例として、フックと固定数のタグを使用できます。

Two tags on a storage hook, one hook per option.

タグはドラッグアンドドロップできますが、フックを選択するだけで、タグがオプションにフォーカスして移動します。フォーカスは「保存された」タグから始まるため、2回の選択を行うために3回クリックするだけです…ラジオボタンの列ほど効率的ではありませんが、より高い制限にスケーリングされ、必要なスペースが少なくなります。

3

以前は、「以下のピックx」を実装する必要がある場合、私は通常jQueryを使用して「フェードトゥイエロー」ツールチップを作成します。したがって、5番目のチェックボックスをクリックすると、次のように表示されます。

[x] option 1
[ ] option 2
[ ] option 3
[ ] option 4
[x] option 5 [3 of 5 options remaining...]

許可されているすべてのオプションを選択した後、チェックされていないボックスをクリックすると、同じビジュアルツールチップが生成されますが、エラーメッセージala [You may only select 5.]

ただし、それは最大2つの選択では多すぎる可能性があります。その場合は、マイケルの提案に従うことをお勧めします。

1
DA01

Webソリューションを探す場合は、さまざまなスタイルが示されている JQuery Multiselect site を参照してください。私は selectList mostが好きです-標準のリストボックスがあり、選択されたすべての要素は以下のタグとして表示されます。

視覚的には、プレースホルダーまたは一種のシャドウとして機能する2つの灰色の空のタグを配置できます。したがって、ユーザーは2つの選択しかできないことをすぐに認識します。 enter image description here

画像は selectList showcase から変更されています

0
FrankL

大きなリストの選択プロセス(およびそれらの選択肢の制限)は、これまでうまく処理されていなかったと思います。チェックボックスとアキュムレータは問題ありませんが、長期的にはそれほど良い解決策とは言えません。また、ドロップダウンソリューションは、リスト内の数とユーザーがリストを理解しているかどうかによって非常に制限されます。

事前定義されたタグリストについてはどうでしょうか。ユーザーはたくさんの選択肢を持っているので、アキュムレータのように移動しながら、これらを選択できます。つまり、データをよりフラットなスタイルで表示して、リストの一番上を選択するだけで済むようにすることができます。次に、ボックスの進行状況に関するいくつかの情報を表示します。

0
The Question