web-dev-qa-db-ja.com

サイドバーは長いがコンテンツセクションは短いページをレイアウト/構造化する方法

基本的に、メインコンテンツ領域にデータテーブルがあり、サイドバーにフィルターセクションがあります。左側のフィルターは、データテーブルに表示されるデータのフィルターとして機能します。

さて、これらの各フィルターカテゴリはかなり長くなる可能性があるため、それらのほとんどは図のようにスクロールバーを必要とします。また、これらのフィルターカテゴリを約6〜7個持つことができるので、メインのコンテンツ領域が非常に短い（たとえば、1行だけ）場合でも、左側のサイドバーが非常に長くなる場合があります。

enter image description here

私が解決策として考えているのは、サイドバーに別のスクロールバーを追加することです。ただし、実際のページ自体にもスクロールバーがある可能性があるため、すでに多くのスクロールバーがあるように見えます（データテーブルリストが長くなる場合）。

enter image description here

これを処理するより良い方法はありますか？

layouttablesinformation-architecturefilteringscrollbars
3
catandmouse

私があなたの質問から読んでいることのうち、これは多くのウェブサイトが問題を抱えているものです。 「検索結果がページを埋めるフィルターの数より少ない場合はどうなりますか？」そのために、オンラインソリューションのいくつかの優れた例を見つけることができます。私が取り組んでいる会社では、同じ質問に悩んでいます。

まず第一に、あなたのウェブサイト/アプリケーションがすでに稼働している場合。どのフィルターが最もよく使用されるフィルターであるかを必ず調査してください。それができない場合は、後のスタジアムでテストすることを想定してください。最もよく使用されるフィルターは、ユーザーにデフォルトで開かれるフィルターになります。他のすべてのフィルターは折りたたむことができ、ユーザーが開くことができます。

考慮すべき他のことは、スクロールバーの使用を避けることです。デザインを邪魔に見えるだけでなく、ユーザーの概要を壊します。したがって、いくつかのフィルターオプションのみを表示するように選択します（ここでも、これらのうちどれが最も使用されているかを調査します）。ユーザーが検索できるようにするか、クリックしてさらに開きます。

これで、ユーザーは自分のフィルターバーを「必要」より長くすることに同意します。また、彼の結果がページの上部に表示されることも知っています。その後、デザインは次のようになります。

Collapsed filters

実際に役立つもう1つのことは、ユーザーがこれまでにスクロールダウンしたときに、検索結果が画面に表示されないことです。何か変更があったことをユーザーに通知し、上にスクロールする必要があります。その通知にクリック機能を追加すると、彼はさらに簡単になります。この通知は、ユーザーがフィルターに何かを変更したときにのみ表示されます。たとえば、フィルター7、オプション2をアクティブにしました。

Notification after activating filter

1
Marcel

最初に、モックアップとワイヤーフレームで実際のデータを使用して、これらのような質問に適切に対処し、どのソリューションが最適であるかを適切に評価してから、1つ以上の可能なソリューションのプロトタイピングとテストを行う前にアイデアを収集し続ける必要があります。

また、6つすべての（異なる？）フィルターを常に提示する必要がありますか？

その場合は、フィルタータイプを表示し、必要に応じてフィルターパラメーターの表示/非表示を切り替えることができます。そうは言っても、検索結果の場合と同様に、表示または返されるデータのタイプに影響を与えるフィルターを提示することをお勧めします。これにより、ユーザーは調整して、製品、データ、または情報を見つけることができます。探している。

0
ptamaro

あなたの質問に答えて、私は2つのことを指摘したいと思います：

  1. Reduce/groupフィルター：フィルターは、大きなセットからインデントされた結果のセットに到達するために使用されます（生の結果が巨大であり、スキャンされない可能性が高い場所-able）しかし、あなたの場合、10行だけの場合、ユーザーはフィルターに触れずにスキャンを実行するだけです。また、次のようにテーブルヘッダーの列値フィルターを指定することで、フィルターの数を減らすこともできますalong side few sidebar filters： enter image description here
  1. 優先順位付けフィルター：あなたが述べたケースがエッジケースであり、すべての幸せなケースがテーブル行でいっぱいのページを与えると仮定します：これは間違いなくフィルターを必要とします。ただし、コンテキストまたはユーザーの傾向とclub rest of them in "More". Or keep them collapsed.enter image description here

推奨：データテーブルにある列の数は4つだけですか？それよりも多い場合や動的な場合は、サイドバーではなくトップフィルターバーを使用することをお勧めします。

0
Pratik Shah

あなたは左側のスクローラーに行くことができ、それはインターネット全体で全く問題ありません。これは、要素をスケーラブルにするために人々が実践していることの1つです。

Slack、eBay、Amazonなどをチェックしてください。これらはすべてフィルター/左パネルがアクティブになっており、eコマースサイトの場合はさらに掘り下げると（そして、Slackの人数/チャンネル数を増やすと）、自動的に左側にスクローラーが表示されますリストが大きくなったときのパネル。

第二に。セレクターを導入するには、選択されたポイントを十字でテーブル領域の上部にカプセルとして表示していることを確認してください。これにより、ユーザーは選択したものを確認でき、いつでも削除できます。このような

Filters on left and top

左側の選択がPUMAであり、上部に十字アイコンとともに表示されているので、いつでも削除できます。

これを間違いなくアプリに導入して、フィルタリングされた結果を表示し、それらを簡単に削除または元に戻すことができます。

幸運を！ :)

0
Sanshizm

コメントとあなたの要件に沿って、私はあなたに次のアプローチを提案します：

  • すべてのフィルターにドロップダウンメニューが必要なわけではありません。チェックボックス/ラジオの他の入力を使用できます。これにより、高さが低くなります。例：

enter image description here

  • コンテンツの上部でいくつかのフィルターを使用することもできます。これらはクイックフィルターとして機能します。例： enter image description here

  • 他の人が述べたように、折りたたみ可能なメニューを使用します。一度に1つまたは2つだけを表示します。

  • スクロールバーは避けてください。

場合によっては、これらのスクリーンショットのウェブサイトへの参照が必要です： https://www.myntra.com/men-jeans

0
K K