記事リストに最適な複数選択フィルターは何ですか？
イントラネットサイトのワイヤーフレームを構築しています。ユーザーは、特定の州の記事を表示できるように州を選択できる必要があります。同じリストで複数の州の記事を表示したい場合があるため、複数の州を選択できる必要があります。私には3つのデザインがあります。
1）ドロップダウンのチェックリストはあまり好きではありません。これにより、状態が非表示になり、ユーザーにとって簡単にするために多くのことが行われているように見えます。すべてのオプションを表示するには、スクロールして複数の状態を選択する必要がある場合があります。このアプローチにはさまざまな種類があります。このルートを使用した場合は、「選択された状態」というラベルも追加し、それらの横にチェックした状態をリストして、認知負荷を軽減します。
2）これは、同じタイプのレイアウトで複数のセクションを構築していることを除いて機能します。一部のセクションには、1つだけでなく6つのナビゲーションボタンが側面にあります。このような機能が必要であることが判明した場合は、ページの下に押し下げられます。
3）これが2つの列の方がスタイルが良いと想像してください。ユーザーを更新ページから完全に削除し、ユーザーを集中させます。彼らがやっていることには、あまりにも目立つように感じます。また、非表示になっているため、オプションをすぐに確認できません。彼らはオプションを知っている必要があります。また、ページにラベルを付けて、オプション1のように選択した州を示します。
州の数は増減しません（少なくとも予見可能な将来については）。これをユーザーでテストする必要があることはわかっていますが、私はしっかりとした出発点に到達しようとしています。私は今、このサイトのユーザーに到達することについて、上層部からの抵抗に直面しています。
これらのうち、ユーザーがすばやく簡単に選択を行って読書を進めるための最良のオプションはどれですか？どうして？考えもしなかった解決策はありますか？
私が出会ったいくつかの読書：
どちらもオプションとしてデュアルリストがありますが、その時点でリストは非常に目立つようになっています。フォーカスがリストにあるべきではないので、私はこれが本当に好きではありません。それは、リスト内の選択に基づいて表示される記事にあるべきです。
ただし、この回答はチェックリストを使用するように言っているだけです。
これらはどちらもChosenと呼ばれるプラグインを参照しますが、これはまだオプション1と同じであり、いくつかのバリエーションがあります。
使用頻度と使用可能なスペースに応じて、ドロップダウンまたはフィルターバー（オプション1または2）を使用します。オプション3は、あまりにも侵襲的で注意散漫です。
これら2つを使用すると、選択した状態を表示できます、私にとっての違いは、フィルターバーがより多くのスペースを取り、ユーザーの1クリックを節約できることです（必要なし）ドロップダウンを展開します）。ドロップダウンを使用すると、「快適」ではありませんが、スペースを確保できます。
左側のバーを最初のオプションとして使用します。これは、eコマースサイトなどでよく使用されるため、アフォーダンスがより明確であるためです。別のセクションのスペースも必要な場合は、それらを折りたたむ/展開するオプションを提供しますが、何らかの方法で表示しない限り、状態の可視性は失われます崩壊後。
ドロップダウンを使用する場合は、選択したアイテムを表示し、ユーザーにフィルター処理させるこれらの2つのオプションをお勧めします。
私は間違いなくオプション2を使い、いくつかのバリエーションに取り組みます。実際のフィルターはユーザーの操作を必要とせずに表示できるため、他の2つの命題よりもはるかに直感的です。
さらに、一部のページで必要になる可能性のある他のフィルターについても言及しています。なぜこれStatesフィルターがリストの上部にあるドロップダウンメニューになり、他のフィルターはサイドバーにあるのでしょうか？すべてのフィルターを配置する場所に一貫することをお勧めします。
右上に「並べ替え」を配置することは理にかなっていますが、すべてのフィルターはおそらく同じ領域にあるはずです。
他の5種類または6種類のフィルターは、米国と同じくらいの面積を占めますか？
"occasions"フィルターのこの例でわかるように、いくつかの州のみをリストし、それらすべてを表示するためのリンクが必要な場合があります。
Eコマースで何が行われているかを調べることをお勧めします。興味深いと思われるファセット検索とフィルターに関する例と記事がたくさんあります。例： http://www.smileycat.com/design_elements/faceted_navigation/
方法2の別の例として、Newegg Webサイトの左パネルのスクリーンショットを次に示します。
ここでは、コア名を拡張して、いくつか確認しました。
ユーザーのフィルター選択がページの上部に繰り返されていることに注意してください。それらはそこで削除することができ、さらにリセットボタンがあります。
フィルターの各カテゴリは、クリックするだけで拡張できます。これは、左側のサイドバーに沿ってフィルターにアクセスできるようにするための便利な方法です。あなたが必要とするときだけ、あなたのコントロールはそこにあります。 