プレビュー付きの階層カテゴリリストを表示する最良の方法は何ですか？
階層的なカテゴリに整理されたデータを表示するように設計されたサイトで作業しています。できるだけ少ないクリックで大量の情報をユーザーに表示できるように、これらのカテゴリを表示する最良の方法を探しています。
いくつかの要件：
- カテゴリリストは任意の数のレベルの深さですが、特定のページに2レベル下を表示するだけで済みます。つまり、レベル2のカテゴリのページにいる場合、その子と孫を表示します。
- 任意のカテゴリの任意の数の子供と孫ですが、最初に表示する必要があるのは、最初の最大10人の子供と各子供の最大3人の孫だけです。残りは非表示にして展開/折りたたむことができます。
- 「リーフノード」の子カテゴリ（つまり、孫を含まないカテゴリ）には、リストに表示する必要があるが、抜粋することができるコンテンツがあります。
- カテゴリにカーソルを合わせると（またはその隣の「プレビュー」リンクをクリックすると）、プレビューパネルが表示され、そのカテゴリのコンテンツの一部が表示されるため、ユーザーは現在のページから移動することなく、そのカテゴリの最も重要な情報を見ることができます。
それ以外のほとんどすべては空中で行われます-たとえば、プレビューがホバーまたはクリックによってアクティブになるかどうか。ツールチップか静的要素かなど.
これが私たちが取り組んでいる候補者の1人です。この例では、ユーザーは「Iceberg Lettuce」にカーソルを合わせているか、クリックしています。 「グレイン」は、抜粋されたコンテンツが表示されたリーフノードです。 「23 More」と「Collapse」は、孫のリストを展開または折りたたみます。
このようなものを実装した経験はありますか？どんな提案でも大歓迎です。 :)
私はいくつかの提案（あなたが好きかもしれないし、そうでないかもしれませんが、私は建設的なフィードバックを歓迎します）を考えることができますが、これらのほとんどは組み合わせて使用できるので、あなたの考えを見てください：
- カテゴリタイトルのホバーイベントにカテゴリの説明を表示します（これはタッチデバイスでは機能しません）。
- カテゴリ名の横にテキストを表示して、サブカテゴリの数を示します。
果物（23サブカテゴリ） - カテゴリ名の横にドロップダウンインジケーターを追加し、サブカテゴリ（複数列）のグリッドのようなメニューを表示します。これは基本的に、標準メニューよりもはるかに大きなリストに拡大縮小する複数列メニューです。
- ボタンのような展開/折りたたみインジケータを使用しますが、たとえば、カテゴリ名の左側に配置すると、ユーザーはサブカテゴリをスキャンして展開/折りたたみボタンを見つける必要がありません（現在の例のように） ）、常に同じ場所にあるためです。これにはテキストや画像を使用できます（テキストにサブカテゴリの数が表示されます）。
＃23フルーツ
これらの一部（特に組み合わせて使用した場合）は、カテゴリヘッダーがかなりビジーに見える可能性があります。これは、ユーザーにとって最も役立つ情報であると考えるものや、カテゴリの説明の長さなどに依存します。
このようなレイアウトをお勧めします。最初にコンテンツの一部を表示し、ビューをクリックすると、他の列が完全に折りたたまれ、選択した列だけが完全に展開されます。ビューの横の数字は、カテゴリ内のアイテムの数を示しています。
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
クリック数は使い勝手ではありません。必要なのは、タスクの時間とエラー数です。ユーザーがクリックしたい場所を視覚的に特定するのに時間がかかる場合（これは通常、長時間かかる作業です）、失敗します。速度は速いが、ユーザーの90％が間違った場所に到着する場合は、負けとなります。 Amazonはこれを行うための非常に優れた方法を見つけました。これは数百万ドルにのぼり、残りは数十億ドルの収益になっています。 1回クリックするだけでも、モデルをコピーします。
さらに、階層ナビゲーションを実行することで、ピクセルを節約し、デザインをポイントして効率と美観を高めることができます。また、ユーザーのサイトの情報アーキテクチャを長期的に理解するのにも役立ちます。