30以上のオプションから選択できる場合に、優れたフィルタリングおよびソートシステムを作成する方法
30個までのカテゴリを3つのグループにグループ化しています。各グループには、約10〜15のカテゴリが含まれています。
グループA
- カテゴリー01
- カテゴリー02
- …
グループB
- カテゴリー11
- カテゴリー12
- …
グループC
- カテゴリー21
- カテゴリー22
- …
ユーザーストーリー
- ユーザーは、任意のグループから多くのカテゴリを選択できます。これは
ORフィルタリングではなく、ANDフィルタリングです。 - これは内部アプリであり、ほとんどの場合、フィルターしたいことを心に留めています。彼らはデータに非常に精通しているユーザーを返しています。
- 検索バーが必要です。
元のページは、3つの列があり、ヘッダーにカテゴリを示すドロップダウンがあり、そこから検索できるExcelシートに少し似ています。
クライアントは1つのフィルターのすべてのカテゴリを使用したいと考えていますが、ドロップダウンにすべてのカテゴリを配置すると、非常にビジーに見え、モバイルではうまく機能しません。
このユースケースでよりうまく機能するテクニックがあるかどうか疑問に思っていましたか？
一目でオプションを開示していないので、ドロップリストをすべてまとめて回避します。代わりに、これは次の利点があるこのソリューションを選択します-
- これは、eコマースの世界で確立されたパターンです
- カテゴリシステムと分類法の階層を公開します
- 関連するカテゴリとサブカテゴリにすばやく移動できます
- フィルタリングをディスプレイから分離して、小さなモニターのスペースを節約します
多分一度にすべてのカテゴリを表示することが可能です。または、すべての要素の概要をすばやく把握できるようにグループ化します。
パワーユーザーに複雑なフィルタリングを提供するだけでよい場合は、検索ツールに組み込むことを検討してください。それを必要としない人にとっては、はるかにシンプルな体験となり、必要とする人にとっては、より強力な体験になるでしょう。
いくつかの例...
Gmail
Wrike
スラック
お役に立てば幸いです。
ここでは間違っている可能性のあるいくつかの仮定を行っているので、私の考えが現実に合うように自由に解釈してください。
ユーザーはパワーユーザーであるように思われます。ユーザーはどのようなフィルターがあるかを知っており、リストを表示する前に使用したいフィルターを知っています。
「モバイル」は重要な側面のようです。
利用可能なフィルターはそれほど頻繁には変更されないようですが、ほとんど同じままです。
これらの仮定に基づいて-他のソリューションを指す可能性のある周囲のインターフェースや他の側面について何も知らずに-各フィルターのオン/オフを切り替える単純なクリック可能なリストを提案します。
- オプションは同じ場所に留まるため、リピーターが簡単に見つけることができます
- 複数のオプションを選択すると、それぞれに余分なクリック/タップが必要になります（これは、入力を開始してEnterキーを押すよりも労力が少なく、モバイルデバイスの他の何よりもはるかに少ない労力です）。
ユーザーが本当にパワーユーザーである場合は、いくつかの学習後にユーザーが認識するアイコンを色分けするオプションを減らすことができます。これにより、表示がテキストよりもはるかにコンパクトになる可能性があります。
ユーザーがとんでもないパワーユーザーである場合、最も頻繁に使用される（またはすべての）フィルターのキーボードショートカットを使用することもできます。
それがまったく役立つことを願っています！
あなたはあなたのデザインで行くことができますが、私はアドオンに関する以下の提案があります：-
- カテゴリであるCAT A、CAT B、CAT Cなどのオプションを備えた検索バーを表示できます。
- ここで、ユーザーが上記のカテゴリの1つを選択すると、前に選択したカテゴリに関連するすべてのオプションを表示する前のバーのすぐ下に、もう1つの検索バーを表示できます。
したがって、この方法でユーザーはフローを追跡し、デザインを賢くすることができます。また、「AND」演算も実行できます。
ユーザーが探しているものを知っているように思えるので、今度はフィルターも持つフィルターを追加する必要があるという考えは不要のようです。たとえば、ユーザーがチワワ、インコ、トラ猫だけを見たいと思っている場合。最初に犬グループを追加し、次に犬のタイプにフィルターし、鳥グループを追加し、次にそのタイプの鳥にフィルターし、次に猫グループを追加し、次にそのタイプの猫にフィルターする必要はありません。
それは、フィルターごとに却下可能な丸薬を使用した単純な先行入力フィールドが機能するように聞こえます。データの必要性が示唆されている場合は、クリックして先行入力のドロップダウンに上位5件程度の最も一般的な検索/フィルターを表示することもできます。ユーザーが入力を開始すると、ユーザーが探しているものに基づいて結果が明らかに変化します。それらすべてを支配するための1つの検索、長いドロップダウンはありません。 Select2 と呼ばれる選択/ドロップダウンフィールドタイプには、実装できる可能性のあるかなり良いタイプがあります。
ユーザーが現在どのように製品を使用しているかわからない場合は、次のことを実行できます。 2.アナリティクスをチェックして、突出している一般的な検索/フィルターがあるかどうかを確認します。 3.アイデアをモックアップし、プロトタイピングプログラム（Invision、balsamiqはかなり簡単です）でクリック可能にしてから、解決しようとしているシナリオをユーザーに提供し、その方法を確認します。 usertesting.comは、ユーザーに簡単にアクセスできない場合に適したサイトです。
先読みが最も使いやすく、高速なソリューションであるかどうかはわかりません。各猫のアイテムが10個しかない場合は、ドロップダウンリストとして簡単に作成できます。だから私の解決策は3つのドロップダウンメニューを持っていることです。
私が現在取り組んでいる同様の問題があります。
プリセット/人気のあるビューを予測するためにできることはありますか？つまり.
ビュー1は列X、Y、Zを示しますビュー2は列A、B、Cなどを示しますまたはすべての犬を表示すべての猫を表示
ユーザーがダウンロードして、Excelで作業を行うのが最善の時が来ます。インターフェースを複雑にして作業するのは難しくなります。