フィルターバーと左側のフィルター
製品のリストがあるウェブサイトで作業しています。これらの製品にはフィルターをかけるオプションがあります。このプロセスでは、入力によるフィルター、チェックボックスの選択、通常のフィルターなど、いくつかのオプションがあります。これはレスポンシブなウェブサイトでもあります。つまり、このフィルターはモバイル、タブレット、ノートブックなどで利用できます...
Webサイトを開発するとき、さまざまなデバイスで最高の流動的なエクスペリエンスを提供するように努めるべきだと私は知っています。
フィルターバーを使用する場合、すべてのフィルターが上部にあるため、モバイルからコンピューターに変更するとき、「同じ場所」にあるほぼすべてのものです。下の画像を参照してください。
注：これは概念を示すためだけのものですが、アイデアは理解できると思います。
たとえば、次のような長所があるため、これは可能なオプションです。
- 画面の全幅を使用できます。
- フィルターはスクロール時に表示されます。
- （少なくとも私の意見では）他のデバイスを考慮した配置の方が優れています。
ただし、いくつかの欠点もあります。
- オプションを表示するには、ユーザーの操作が必要です。
- フィルター処理するオプションが他にある場合、面倒になる可能性があります。または、ノートブックなど、他のタイプのフィルターと抵抗性のある画面に変換する必要があります。
- フィルターにアクセスする位置が同じ（上部にある）場合でも、モバイルでは（大きな画面では）水平ではなく非常に垂直なフィルターリストが表示されます。
基本的に、私の疑問は、すべてのフィルターで上部のフィルターバーまたは従来の左側の列を使用することです。
どちらを使用すればよいですか？または、なぜ一方が他方よりも優れているのですか？考慮
最大4つのフィルターがあり、プロジェクトの時間と複雑さが進行してもカウントが変化しないことが確実である場合にのみ、トップバーを使用することをお勧めします。
私が提案している理由は、上部バーのフィルターは、最大4つまでのクリーンな方法で表示できるためです。 4つを超えるフィルターを使用している場合、ユーザーの画面解像度が1366x768であることを考えると、上部のバーがすぐに乱雑になり始めます。
垂直フィルターパネルは、不動産をあまり消費せず、主要なコンテンツ領域を圧倒しない限り、いつでもトップバーの上に表示することができます。同じ理由は次のとおりです。
- フィルターは常に拡張され、ページの長さに沿って実行されます。したがって、ユーザーはフィルターを適用するために追加のアクションを実行する必要はありません。
- フィルターは垂直方向に配置されているため、ユーザーは1つのフィルターの上から下に向かって踏み、次のフィルターの上部に向かって踏むのではなく、一方向にのみ踏む必要があるため、ユーザーが簡単に通過できます。 。
- また、フィルターは垂直に配置されるため、実装可能なフィルターの数に技術的な制限はありません。 5個または50個のフィルターを上下に配置することができ、デザインに影響を与えることはまったくありません。
表など、表示するデータが多い場合、上部のバーにあるフィルターボタンまたはアイコンを使用して、クリックするとコンテンツの上にあるモーダルで垂直方向にフィルターを拡張できます。この方法でも、表示領域全体を使用してコンテンツを表示できますが、フィルターによってコンテンツの表示エクスペリエンスが妨げられることはありません。
フィルターリストにより、ユーザーは次のことができます。
- 現在の検索がどのフィルターオプションに基づいているかを知る
- 各フィルターから異なるオプションを選択して、新しい検索を実行します
あなたの2つの提案の中で、私が考慮すべき点は次のとおりです。
- ユーザーが操作する頻度/ユーザーがフィルターを操作する頻度はどれくらいですか？
- ユーザーが実際の結果と同じ重みでそれらを見ることができるほどフィルターは重要ですか？
上部のフィルターリストはより離散的であり、実際に選択されたオプションが表示されますが、各フィルターからの他のオプションは表示されません。左側のフィルターは、フィルターを常に拡張できるため、より多くの情報を提供します。
アプリの目的が非常に具体的なアイテムを見つけることである場合は、可能なすべてのオプションを示す展開されたフィルターリストが適切に機能する可能性があります（左のリスト）。検索がそれほど具体的であることが意図されていない場合は、個別のフィルターリストで十分な場合があります（トップリスト）。
この他の質問 を見てください。ここで、フィルターを折りたたんだままにするか、展開したままにする必要があるかが疑問でした。
ここでの2つのオプションに基づくのは、それぞれのPROとCONSです。
フィルターアイコンオプション
長所：スケーラブル、情報階層を表示するのに優れ、応答性が高く、開発が容易
短所：フィルターが適用されたときにユーザーに簡単に通知する方法はありません。そうでない場合は、「適用されたフィルター：xxx、xxx、xxx、xxx」などの小さなラベルでこれを解決できます。
フィルターバーオプション
長所：クイックアクセス、ユーザーにとって非常に一般的なパターン、ゲシュタルトの法則によって他の要素と簡単に関連付けることができます
短所：スケーラブルではない、応答しない、長い「値」はハイフネーションされ、使いにくい（複数の選択または組み合わせを行うためにクリック数を増やす）などです。
私の2セントフィルターアイコンオプションに移動し、検索ボックスの横に「詳細」と表示します...ここではデスクトップ（アイコン"Buscar"の右側にあります）、ユーザーテストでは魅力的に機能しました。
ユーザーがアイコンをクリックすると、結果領域が押し下げられ、必要なすべてのオプションが表示されます。
同じパターンでフィルターオプションセットと結果ビューに戻るための[適用]ボタンが同じアイコンに表示されるため、このパターンはモバイルでもユーザーに似ています。
これがお役に立てば幸いです:)よろしくお願いします。
私の見解では、マテリアルデザインガイドラインのように、デスクトップとモバイルビューのユーザーナビゲーションドロワーにトップバーを配置することをお勧めします。このリンクを参考にしてください 素材デザイン