web-dev-qa-db-ja.com

2つのオプションのみを選択する必要があることをユーザーに理解させる

チェックする項目が8つあるドロップダウンチェックボックスがあります。デフォルトでは2つが選択されています。

私はユーザーに、既存のものを選択解除してから別のものをチェックする必要があること、および正確に2つをチェックする必要があることをユーザーに知らせるための直感的な方法を考えています(それ以上でもそれ以下でもありません)。

私はJavaScriptを使用して、おそらく何らかのツールチップや通知を喜んで使用していると思います。何か案は?ドロップダウンチェックボックス以外の代替オプションも利用できます。

19
Source

選択を完了するために押す必要のあるボタンを配置し、そのボタンのラベルテキストとアクティブ/無効状態を使用して、ユーザーに渡したい情報を送信することをお勧めします。

このようなもの:

mockup

download bmml sourceBalsamiq Mockups で作成されたワイヤーフレーム

選択したオプションとボタン内のテキストの組み合わせにより、ユーザーが次に進むために何をする必要があるかが明確になるという考え方です。

21
Racheet

mockup

download bmml sourceBalsamiq Mockups で作成されたワイヤーフレーム

2つのComboインターフェイスに移動できます。 1つ目はすべての選択肢、2つ目はすべての選択肢と空のフィールドです。

19
ColdCat

実際には、なんらかの警告メッセージを使用してください。それは結構です。オプションは8つしかなく、そのうち2つだけを選択する必要があるため、別のインターフェースソリューションを使用する必要はないと思います。また、チェックボックスは、ユーザーが何をする必要があるか、つまり複数のオプションを選択することを十分に表しています。

下の画像を見てください。ユーザーが3つ以上のオプション(「スリープ」など)を選択しようとすると、メッセージが表示されます。ユーザーがインターフェースを探索してその限界を理解できるようにします。そうすれば、ユーザーはその使用方法を知っている標準的でよく知られているコンポーネントを使用して、すでに良い仕事をしています。
enter image description here

7
pcattai

最良の解決策は、このサンプルのような複数選択のドロップダウンリスト-- Chosen だと思います。可能な選択の数を制限し、ユーザーが追加の選択を行うか、リスト内のすべてのアイテムを無効にしようとした場合にユーザーに警告することができます。ただし、以前に行った選択を簡単に削除して、新しい選択を行うことができます。

enter image description here

6
Serg

mockup

download bmml sourceBalsamiq Mockups で作成されたワイヤーフレーム

オプションのリストと、選択のためのvisibleプレースホルダーのリストを人に提示します。彼らがどちらかの側でオプションをクリックすると、それはその側から消えて、もう一方に再び現れるはずです。

2つの選択が完了したら、ユーザーに進みます。

4
doppelgreener

別の方法としては、ソフトウェアアプリケーションで時々見られる何かを実行することもできます。この場合、1つの列の項目を選択して他の列に移動したり、その逆を行ったりできます。すでに2列目にアイテムが存在する場合、その数を確認するチェックがある可能性があります。

mockup

download bmml sourceBalsamiq Mockups で作成されたワイヤーフレーム

画像では明らかではありませんが、移動するためにいずれかのリストで複数の項目を選択することは可能ですが、それらを1つずつ行う必要はありません。基準については、正確には2つですが、それほど問題ではない可能性があります。もう1つの注意点は、アイテムをダブルクリックして、あるリストから別のリストにアイテムを移動できるため、移動やクリックが減ることです。

0
Grant Palin