I have a list of items in a database and i display 10 items with some additional details at a time(as table rows). I use next & previous buttons to fetch the remaining items.

This part has been implemented.

But now, for each item I display I have to display 10 more rows which contain additional/specific item details.

For example, one of the items that I display is "Beer". Under "Beer" I have different brands of beers, so I should display the list of brands when user selects/clicks the Beer item(row).

Similarly, if the user selects (or clicks) a different item like Whiskey the list of Beer brands should not be shown and only list of Whiskey brands should be displayed.

What could be the best design for the displaying the second list in response to the user's action?


3 Answers 3


If you only have two levels, you could use an ordinary master detail approach.
See #1 here: http://designingwebinterfaces.com/designing-web-interfaces-12-screen-patterns

If more levels are needed, you could go for the drill down design pattern.
Eg: http://quince.infragistics.com/Patterns/Cascading%20Lists.aspx

If you want to keep every thing in the same list, you must go for some sort of tree list where you automatically collapse unselected items.
Eg http://quince.infragistics.com/Patterns/Tree-Table.aspx


Let's break down your options:

  1. Always show the 'child' items.
    • Visual nesting will be important here, using contrast to visually separate the items from the parent and alignment and proximity to visually group them. For example, see, this screenshot from Rally software, and notice how the tasks (TA*) are visually distinct from the stories:
      Table with child rows that are indented and have a different background color
      Note that you may not need to list the child items on their own rows, as above; perhaps a simple comma-delimited list of child information will suffice.
    • Pros: obvious to the user; easy to scan and compare children across different items with no further interaction.
      Cons: Depending on the amount of information per child, may take up a lot of screen real-estate.
  2. Conditionally show the 'child' items based on mouse click or logical 'focus' event, like a tree view. (This is actually what is done by Rally, using the rather standard [+] and [-] icons to expand and collapse rows.)
    Table with + and - icons on parent rows for showing and hiding children
    • Pros: Doesn't take up space unless user asks for it; somewhat obvious to the user
      Cons: Requires a lot of user interaction to scan various levels; UI elements move as the user interacts with the page.
  3. Conditionally show the 'child' items based on mouseover/hover, like a tooltip. For example, see this example of Visual Studio's "Data Tips", where hovering any variable in the code shows information about it, and the user can hierarchically continue to dive into progressively deeper details with more floating tooltips.
    Hierarchical Visual Studio "Data Tip"
    • Pros: Takes up no space in the UI; faster for the user to navigate than clicking on elements; easier to navigate from one element to the next, since layout of the page does not change.
      Cons: Still requires the user to look at each item individually to scan the children; not obvious, nor very discoverable.

Which to use depends on your users' needs:

  • If your users are novices, or likely to want to scan or compare child items from many parents at once, I would suggest #1.
  • If your users are more computer-savvy, but infrequent users of your application, I would suggest #2.
  • If your users will be using your application frequently (and do not need to compare across child items often, or the information they need to compare is small enough that seeing one tooltip and then another is good enough), I would suggest #3.
  • Thanks @Phrogz thats really helpful. I thought #2 should do in my case. But the con is the sublist count is not fixed. But again i can use #3 with a scrolling.
    – A Baldino
    Commented May 14, 2011 at 23:17

You might want to consider a sort of "accordion control" where you click on a section header like Beer or Whiskey and it shows the children of the section header you click (and collapses all other sections).

See an examples here: http://docs.jquery.com/UI/Accordion

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.