要素の選択とドロップダウンの使用
Webアプリケーションの設定UIを完全に再設計しています。 UIにはいくつかの選択要素があり、ラジオボタンに変換する予定のオプションがいくつかあります。ドロップダウンUIに変換することを計画していたより長い選択リストもあります。これらの長いオプションは、州、タイムゾーン、Salesforceフィールドなどの非常に大きなリスト用です。
ドロップダウンUIを使用する代わりにドロップダウン要素を保持することが理にかなっている特定のケースがあるかどうか知りたいのですが。
これは非常に一般的な質問ですが、人々が直面する一般的な課題を考慮しています。背後にある物語は非常によく似ていると思います。一般性の範囲内で正しく理解するには、問題を小さな部分に分解する価値があります。
- 多く対少数対unknown選択するオプションの数、
- オプションの長さ/サイズ、
- すべてのオプションが表示されます対1つだけ表示されます、
- 事前選択（どちらの場合でも使用可能ですが、まだ異なります）＆決定を促すこと、
- 利用可能なスペース、
- 認知負荷、
- クリック数/タップ数。
おそらくもっと多くあり、それらの多くは重複していますが、これらの特定のすべてで何が重要であるかについて結論を下すと、決定につながる可能性があります。それでは、選択の性質を分解してみましょう。
多くのオプション、少数のオプション、不明なオプションの数
この要件/制約は、コンテンツ、つまり選択可能なものに由来します。多数のオプションをドロップダウンに隠すことに少し偏っている理由は、この依存関係だけで決定を下すことはできないと思います。それは、推論の他の要素と混合する必要があります。表示する15の無線機は最適なアイデアではないかもしれませんが、ドロップダウンにしておくと、ユーザーが適切な無線機を選択できないか、スクロールする必要がある場合があります。したがって、それは特定のケースの問題です。
ただし、ここで1つの点が重要です。そこから選択するオプションの数は一定ですか？特定のケースに依存する場合があるため、システム内のいくつかの依存関係に応じて、それらの数が異なる場合があります。場合によっては、選択パターンがこの可変数のオプションに依存する点につながる可能性もあるので、たとえば、最大3つのオプションのラジオ、またはそれが大きくなるたびにドロップダウンに縮小します。そのためにインターフェースの一貫性を危うくしようとする場合、その背後で難しい決断がいくつかありますが、画面の非一貫性のレベルが高いため（たとえば、たとえば、ローンリクエストにいくつかの拡張フォームがあります）。
オプションの長さ/サイズ
ここで考慮すべき2つのこと：
- オプションの長さ/サイズ、
- この長さの分散。
オプションが非常に長い場合は、それらを切り捨てるか、行を分割する必要があるため（テキスト形式のオプションの場合）、ドロップダウンに表示するのは効果的でない場合があります。それらが非テキストである場合（つまり、2次元空間で定義される画像またはその他のもの）、表示されるものの複雑さを示す必要があるために画像の一部を大きくする必要がある場合があるため、同様の問題に直面する可能性があります。それらの上に。
前述のオプションの数と組み合わせて、興味深い設計決定タスクを形成します。
表示されるすべてのオプションと1つだけ表示されるオプション
ユーザーにとってもビジネスにとっても違いはありますか？たとえば、ドロップダウンで非表示にするのではなく、eショップにすべての製品を表示します（選択できるオプションはいくつかありますか？）。ただし、特定の選択（Tシャツのサイズなど）を選択することもできます。ドロップダウンにプッシュされます。
事前選択＆意思決定を促す
場合によっては、事前選択が適切な場合があります。このようにして、ユーザーにいくつかの決定を下すことができます。これらの場合、他のオプションをオンデマンドで表示するパターンを使用すると、システムに関するメリットがあります。変換）。私はドロップダウンがそのためのより良い解決策かもしれないと信じています。
他の場合では、ユーザーに何らかの決定をするように促すことは良い考えかもしれません。
現在は、両方が表示されているすべてのオプション（ラジオを使用する場合など）とドロップダウンで使用できます。ただし、すべてのオプションが表示されているので、それらの選択をすべて解除することができるので（ユーザーは1つをクリックして決定する必要があります）、オプションが非表示になっている場合は、クリックする必要があることをユーザーに通知するとよい点が異なります。決定を行うためのドロップダウン。
したがって、何も選択されていない場合は、どちらの場合も次のようになります。
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
もちろん、あなたはこれらの両方を励ますテキストでサポートすることができます。 「色を選択してください」。
利用可能なスペース
これは最も明白な制限の1つであり、ここで説明することはあまりないと思います。おそらく複数のブレークポイントを提供するときに、パターンの二元性。サイトのデスクトップバージョンでラジオのリストとして表示されているもの（つまり、大きい）は、モバイルではより小さな表現に縮小する必要があり、このメディアで利用できる適切な選択パターン（iOSのUIPickerViewなど）でサポートする必要があります。ただし、特に多くのオプションがある場合は、画面サイズが原因でモバイルにクラシックドロップダウンを表示することは関係ない場合があります。
認知負荷
これを引き起こす可能性のある2つのことがあるので、これはここで難しい部分です。
- 要素が多すぎて表示されません（別名 "情報は付与されましたが、脳はキラキラしています！"問題）。
- オプションが非表示になっているため、ユーザーはそれらを検索する必要があります（aka "Wally's Wally？"問題。
時にはそれはそれらの両方の間でバランスをとっています。
クリック数/タップ数
これもまた非常に明白なことです。最初に非表示になっているリストからオプションを選択する必要がある場合（そのドロップダウンを展開する必要がある場合など）は、クリック数が多くなります。オプションを選択するためのリストが2つまたは3つある場合、それが時々行うものである場合、それほど大きな違いはありませんが、繰り返し実行する必要がある場合、これら3つの選択は展開選択になるため、問題になる可能性があります。 -expand-select-expand-select-（repeat）狂気。ここでの例は、私の愛するアイコン選択サイトです。ここでは、常に同じタイプのアイコン（モノカラー、リニア）を探し、何か新しいものを検索するたびに同じ選択を実行する必要があります（ただし、覚えておくべきトピックでもあります）私の以前のアクションとこれらに基づいた事前選択（上記でも説明）。