web-dev-qa-db-ja.com

バックグラウンドで行われた変更を確認しながら、可能な限り多くの情報を表示する動的階層ツリーの実装はどれですか。

特定のコーパスの検索エンジンWebサイトを構築している最中です。

ほとんどのメニューとウェブサイトの構造はすでに実装されています。最近、私たちはいくつかのフィードバックを得て、私たちが考えていない機能を実装することを余儀なくされました。

結果ページで新しいフィルターを作成する方法を探しています。このフィルターにより、ユーザーは「カテゴリー」を選択して検索結果をフィルターに掛けることができます。このカテゴリフィルタは、サブカテゴリが多く、サブカテゴリが少ない約8つのルートカテゴリを表示します。約5つのレベルがあります(最下位レベルにはサブ子がある場合があります)。

こちらが カテゴリ (基本的には分類です):さまざまなレベルで遊ぶことができます-「A」をクリックし、タイトルが「HUMAN NECESSITIES」であることを確認してから、「A01」をクリックしてください。 「農業;林業;動物の夫婦;狩猟;捕獲;釣り」というテキストがあり、「A01」の下に、下位のサブクラス。各クラスには「タイトル」もあり、これも表示したいです。

ご覧のように、ユーザーはいつでも上位レベルに戻って、基本的にはパスのどこにいるかを知ることができます。

検索では、異なる分類の結果が返される場合があります。ユーザーが結果を分類でフィルタリングできるようにしたい。最初は、検索結果に関連するルート分類をメインの結果ページに表示し、その分類に基づく結果の数を表示する予定です(ページのどこに表示されるかはまだわかりません)。各結果はサブサブ分類にリンクされています。各結果は複数のサブ分類にリンクされている場合があります。

ユーザーが検索を実行した後、その検索に関連するすべてのルート分類を収集し、各クラスの結果の数とともに表示します。ユーザーは分類を選択できるようになり、パスを維持したまま、サブなどを選択できるようになります。

上のリンクは、使用できないソリューションを示しています。スペースが多すぎて、クリックごとに結果セットを動的に更新し、結果を絞り込み(フィルタリング)したいので、ユーザーがサブクラスの場合は、結果ページで変更を確認できます。

私の考え

私の想像では、結果の上に「浮かぶ」半透明の長方形だと思います。画面のどこにでもドラッグでき、50%の透明度があり、クラスをクリックするとサブのリストが表示されます-クラス、次にユーザーが戻ることができるように上位レベルを折りたたみます。

問題は、タイトルが非常に長くなり、パスが深すぎて1つの画面に表示できず、結果を表示して操作することができることです(結果ページには各結果にいくつかの機能があります)。

タイトルの問題について頭に浮かぶ解決策は、タイトルがマウスオーバーで「ツールチップ」として表示される可能性があることですが、ツールチップはクラスにカーソルを合わせたときにのみ表示されるため、どのタイトルが一致するクラス。

何を探しているのですか?

  • コンパクトなソリューション
  • クリーンなレスポンシブインターフェイス(「ボックス」がレスポンシブであることを人々に知らせます)
  • ユーザーがツリー内を簡単に移動できるようにする(パス全体を参照)
  • タイトルを表示する
  • 結果ブロックで動的に変化する結果を表示する
  • 2つのルートノードを選択し、それらに並行してアクセスする機能(必須ではないが、持っているのが良い)

ここにウェブサイトのワイヤーフレームがあります:

search-results-wireframe

これは私がそれを想像する方法です: search-results-with-filter

問題点:

  • サブクラスを表示しながらボックスのサイズを合理的に保つ方法は?
  • ユーザーがクラスの1つをクリックした後、サブクラスリストをどこに表示すればよいですか。 (親ノードの下?または右側?)
  • ユーザーは、フィルターを選択するたびに更新された結果を確認できるはずです。

それが正しい解決策ですか?

私の希望は、すでに開発されたライブラリを使用して、自分のニーズに合わせてカスタマイズできることです。

5
YSY

あなたは言う:

上記のリンクは、使用できないソリューションを示しています。スペースが多すぎて、クリックごとに結果セットを動的に更新し、結果を絞り込み(フィルタリング)したいので、ユーザーがサブクラスの場合は、結果ページで変更を確認できます。

見方が違う。要件を満たすナビゲーションスキームがすでに機能しています。タイトルが表示され、パスが追跡可能です。フィルターセクションとオーバーレイウィンドウを追加して、複雑さを増やさないでください。私の考えでは、ナビゲーションスキームの上に検索ボックスを配置するだけです。ユーザーが検索用語を入力したら、検索結果に含まれていないエントリを削除して、ナビゲーションツリーをフィルタリングする必要があります。ユーザーが検索結果を閲覧するのをさらにサポートできます。

  • 各クラス、サブクラスなどの隣にヒット数を表示します。
  • 最も(または最も関連性の高い)ヒットを持つクラスまたはサブクラスに自動的にスクロールします
  • 最もヒット数の多いクラスまたはサブクラスを自動的に展開する

このようにして、1つのインターフェースを2つの異なるユーザー目標に再利用できます。

  • クラスの階層の手動調査。これは、クラスを展開および縮小することによって実行できます。
  • 検索語によるクラス階層の自動縮小。

これにより、サイトが使いやすくなり、情報の冗長な表示が回避されます。ただし、設計では、検索ボックスとナビゲーションツリーが互いに独立していないことをユーザーに明確にする必要があります。たとえば、クラス階層全体をもう一度表示するには、ユーザーが何らかの方法で検索ボックスをクリアする必要があることを示す必要があります。

1
Anna Prenzel