web-dev-qa-db-ja.com

アイテムのリストの下にリストを表示するのに最適なデザインですか？

データベースに項目のリストがあり、一度にいくつかの追加の詳細（テーブル行として）とともに10項目を表示します。次のボタンと前のボタンを使用して、残りのアイテムを取得します。

この部分は実装されています。

しかし、今、私が表示するアイテムごとに、追加/特定のアイテムの詳細を含むさらに10行を表示する必要があります。

例えば、私が表示するアイテムの1つは「ビール」です。 [ビール]の下にはさまざまなブランドのビールがあるので、ユーザーがビールのアイテム（行）を選択/クリックすると、ブランドのリストが表示されます。

同様に、ユーザーがウイスキーのような別のアイテムを選択（またはクリック）した場合、ビールブランドのリストは表示されず、ウイスキーブランドのリストのみが表示されます。

ユーザーのアクションに応じて2番目のリストを表示するのに最適なデザインは何ですか？

**BEER AVGPRICE:$3 
--KINGFISHER $4 HAYWARDS $3 
**WHISKEY AVGPRICE
website-designliststreemaster-detailsjavascript
11
Bharat Chowdary

オプションを分解してみましょう。

  1. 常に「子」アイテムを表示します。
    • ここでは視覚的なネストが重要です。コントラストを使用してアイテムを親から視覚的に分離し、配置と近接を使用して視覚的にグループ化します。たとえば、 Rally software の次のスクリーンショットを参照してください。タスク（TA *）がストーリーと視覚的に区別されていることに注目してください。
      Table with child rows that are indented and have a different background color
      上記のように、子アイテムを独自の行にリストする必要がない場合があることに注意してください。おそらく、子情報の単純なコンマ区切りのリストで十分です。
    • 長所：ユーザーには明らかです。これ以上のやり取りなしで、さまざまなアイテムの子を簡単にスキャンして比較できます。
      短所：子ごとの情報の量によっては、画面の不動産を大量に占有する場合があります。
  2. ツリービューのように、マウスクリックまたは論理的な「フォーカス」イベントに基づいて条件付きで「子」アイテムを表示します。 （これは実際には、むしろ標準的な[+]および[-]アイコンで行を展開したり折りたたんだりできます。）
    Table with + and - icons on parent rows for showing and hiding children
    • 長所：ユーザーが要求しない限り、領域を占有しません。ユーザーにはやや明白
      短所：さまざまなレベルをスキャンするには、多くのユーザー操作が必要です。ユーザーがページを操作すると、UI要素が移動します。
  3. ツールチップのように、マウスオーバー/ホバーに基づいて「子」アイテムを条件付きで表示します。たとえば、Visual Studioの「データヒント」のこの例を参照してください。コード内の変数にカーソルを合わせると、その情報が表示されます。ユーザーは、階層的に継続して、より多くのフローティングツールチップを使用して、より深い詳細に飛び込むことができます。
    Hierarchical Visual Studio "Data Tip"
    • 長所：UIでスペースを取りません。要素をクリックするよりも、ユーザーがナビゲートしやすい。ページのレイアウトが変更されないため、要素間を簡単に移動できます。
      短所：引き続き、ユーザーが子をスキャンするために各アイテムを個別に確認する必要があります。明白ではなく、あまり発見できない。

どちらを使用するかは、ユーザーのニーズによって異なります。

  • ユーザーが初心者の場合、または一度に多くの親の子アイテムをスキャンまたは比較する場合は、1をお勧めします。
  • ユーザーのコンピューターに詳しいが、アプリケーションのユーザーが少ない場合は、＃2をお勧めします。
  • ユーザーがアプリケーションを頻繁に使用する場合（子アイテム間で頻繁に比較する必要がない場合、または比較する必要がある情報が小さすぎて1つのツールチップが表示され、次に別のツールチップが十分に表示される場合）、3をお勧めします。
9
Phrogz

2つのレベルしかない場合は、通常のマスター詳細アプローチを使用できます。
ここの＃1を参照してください： http://designingwebinterfaces.com/designing-web-interfaces-12-screen-patterns

さらに多くのレベルが必要な場合は、ドリルダウン設計パターンに進むことができます。
例： http://quince.infragistics.com/Patterns/Cascading%20Lists.aspx

同じリストにすべてのものを保持したい場合は、選択されていないアイテムを自動的に折りたたむある種のツリーリストを作成する必要があります。
例 http://quince.infragistics.com/Patterns/Tree-Table.aspx

9
Jørn E. Angeltveit

BecorやWhiskeyなどのセクションヘッダーをクリックして、クリックしたセクションヘッダーの子を表示する（および他のすべてのセクションを折りたたむ）一種の「アコーディオンコントロール」を検討することをお勧めします。

ここに例を示します： http://docs.jquery.com/UI/Accordion

0
Brennen Walsh