web-dev-qa-db-ja.com

レスポンシブWebアプリでのフィルターのベストプラクティス?

私はレスポンシブWebアプリに取り組んでいます。

ユーザーが何かを検索すると、フィルターを設定できます。オプションのドロップダウン/アコーディオンスタイルのフィルターを使用して、ページのコンテキストでそれらを保持するのが最善でしょうか、それともコンテンツをオーバーレイする画面に表示するのが良いでしょうか?これはレスポンシブウェブアプリであり、さまざまなメディアでできる限り一貫性を保つように心がけています。

私はそれをコンテキスト内に保つことに傾倒していますが、アプリケーション全体で一貫したスタイルのフィルタリングを維持したいと考えています。フィルタは、オプションの多い他の画面ではより複雑です。

1
Michelle

フィルターの数によって異なります...フィルターが少ししかない場合は、ページのコンテキストでフィルターを維持すると問題なく動作する可能性があります。たくさんある場合は、要求されるまでフィルターパネルを非表示にすることをお勧めします(フィルターパネル自体の外側であっても、選択されているフィルターをユーザーに表示したり、フィルターをクリアしたりする方法を提供します)。

ここに私が行ったいくつかのフィルターオプションがあります。 1つ目は、多くのフィルターオプションを備えたサイトの再設計案のワイヤーフレームです。開いているフィルターパネルは次のとおりです。

enter image description here

また、ユーザーが[適用]をクリックすると、パネルが閉じて、フィルタリングされた結果が表示されます。

enter image description here

以下は、モバイルアプリ用のフライオーバーパネルフィルターオプションです(他のいくつかのコントロールがデモされています)。

enter image description here

明らかに、最初の例では、ページのレスポンシブバージョンで深刻なコンテンツの再調整が発生する必要がありますが、適切なコントロールで実行できます。左側にフィルターのリストが表示され、メインページに結果が右側に表示されるので、常にAmazonの方向に進むことができます。

enter image description here

ただし、モバイル環境(アプリではなくモバイルWeb)では、これらのオプションは、上記のオプションの一部と同様に、フライインパネルに折りたたまれています。

enter image description here

それはすべてあなたの要件と設定に帰着するので、もちろん答えは「それは依存します!」です。

2
Mattynabib