複数選択ドロップダウンリストの実装のベストプラクティス
多くのWebサイトは複数選択のドロップダウンリストを使用しなくなりました。UX実践者がよく引用する理由は、このUI要素がユーザーに対して「十分にテスト」されないためです。私が参照しているものの例を次に示します。
これは、UX StackExchangeでタグが追加される方法に似たものに置き換えられています。
最初の質問は、これらのタイプの観察の多くは正確に検証することが難しいため、これにある程度の重みを加えることができる優れた調査研究があるかどうかです。
2番目の質問は、このUI要素の操作性が悪いために、UI要素に大量のインタラクション/情報がロードされているためか、それとも最適な方法で使用されていないのかということです。
実装で確認できる問題は次のとおりです。
- 利用可能なスペースの量：ユーザーが覚えておく必要のある情報の量（つまり、ユーザーが選択したもの）を最小限に抑えるために、彼らが行った選択の別の領域。これにより、選択を簡単に削除することもできます。ただし、モバイルアプリケーションの場合など、利用可能なスペースが常に多いとは限りません。
- インタラクションの一貫性：選択したリストを別の領域に表示することに関する別の問題は、この領域が選択したアイテムを削除するためにのみ使用されることが多いことです。追加アクションと削除アクションを分離しています。これにより、他のセクションで追加と削除のアクションが同じUI要素で発生した場合、インタラクションに不整合が生じる可能性があります。
- ドロップダウンリスト内のアイテム数：長いドロップダウンリストの場合、上下にスクロールして、既に選択されているリストアイテムを見つけるのははるかに困難です。または、ユーザーが選択したいこと。この場合、スマート検索フィールドの方がはるかに実用的であるように見えますが、ユーザーはリスト内のすべての項目に精通していないため、効率的に検索することができません。
しかし、多選択ドロップダウンまたはリストを使用することが実際的でより適切な場合がまだあるでしょうか？
同様の質問が約1年前に尋ねられました（ Webの最も直感的な複数選択コンポーネント ）が、目立つUIデザインソリューションはないと思います（そして誰かが我慢してくれることを期待しています）そのための報奨金）ですので、うまくいけば、今いくつかの新しいアイデアがあるかもしれません。
ドロップダウンリストについての考え：
複数選択リストを含むすべてのドロップダウンは、おそらく行の終わりに達していると思います。彼らの汎用性もアキレス腱であることが判明しました。
ドロップダウンメニューは、多くの場合、その価値よりも問題が多く、Webデザイナーがいくつかの異なる目的で使用するため、混乱を招く可能性があります。また、メニューをスクロールすると、ユーザーがすべてのオプションを一目で確認できなくなると、使いやすさが低下します。
ソース： ドロップダウンメニュー：控えめに使用
ユーザーが同じ結果を達成できるようにする方法は他にもたくさんあります。以下の簡単な比較から、関連する場所とタイミングでコントロールを区別することがドロップダウンリストの必要性を減らす上で重要であることが示唆されます Luke Wroblewski。 の礼儀
デスクトップの複数選択ドロップダウンリスト
デスクトップの複数選択ドロップダウンの場合、最初に頭に浮かぶパターンは、選択メカニズムを提供するだけでなく、選択されたものの一定の可視性も提供するデュアルリストです。このパターンのバリエーションは、スクロールを回避するフィルターを組み込んだハイブリッドデュアルリストです。
モバイルの複数選択ドロップダウンの代替
モバイルでの複数選択のドロップダウンの代替手段は、レイアウトが応答することを確認しながら単純なスクロール可能なチェックリストを利用するか、モバイルアプリの場合はネイティブ要素を使用することができます。
上記はモバイルでの複数選択の問題を解決しますが、左の例のように画面スペースの使用が最適ではないいくつかの欠点がありますが、これはいくつかの革新とより良いスタイリングで対抗できます。
同じ現実世界のアプリケーションで、次の理由により、複数選択ドロップダウンリストの実装を使用します。
-「常に十分なスペースがあるとは限らない」と言ったように-ユーザーはリスト内のアイテムを知りません...
それに関して、私はあなたに例を示します：
ここで、ユーザーはサーバーから動的に送信される不明なファイルタイプのリストを持っているため、スマート検索フィールドを使用するオプションはありません...
同じ例を使用して-スライダーに関するOkavangoの発言に関連して-：
スライダーを使用して範囲（ファイルサイズ）を選択しようとしましたが、範囲が非常に広い（バイトからエタバイト）ため、小さい範囲（20 MBから37 MBなど）を選択することはできませんでした。
だから、あなたの範囲が大きすぎるなら、私はスライダーを避けるのほうが良いと思います
Nielsen Norman Groupが メガメニューに関する素晴らしい記事 を書いた-それがあなたの特定のニーズに対応しているかどうかはわかりませんが、ドロップダウンメニューが複数である限り、ユーザーフレンドリーであると彼らは言っていますテキストのブロックだけでなく、立体的で堅牢。それらの記事ではタグとタグクラウドの使用についても言及されているので、問題に関連しているといいのですが！
とはいえ、その特定の設計の反復における主な障害は、タグが本当に紛らわしく聞こえるということです。多分あなたは彼らが何をするかを説明するそのような長い説明を下部に置く必要なしにそれらに名前を付ける賢い方法を理解することができましたか？
複数選択のドロップダウンについて尋ねるが、複数選択リストを描く
複数選択ドロップダウンが見つからなかった理由として引用します
折りたたまれた状態のドロップダウンは複数の選択を表示しないため、複数選択のドロップダウンは見つかりません。このため、ドロップダウンは複数選択のUIには適していません。
リストとSOのような選択の場合は、用語に説明が必要かどうかが異なります。米国の州などの既知の用語である場合、説明の理由はありません。
ユーザーが動的に用語を追加できるようにする場合は、説明を許可して、ユーザーがお互いに意味を説明できるようにする必要があります。リストは依然として、既知の（セット）用語の選択速度と不動産に影響します。サイトは動的なユーザーベースのコンテンツを使用しているため、説明が多く動的なSOのように見えると思います。20年前、SOのようなコラボレーションサイトはありませんでした。