Posted by & filed under Navigation.

This blog post addresses the initial concepts and approaches for the drill-down, from the list, card and table view. Please leave comments with any questions or suggestions you may have!



Drill down is used to help the user navigate from a landing page to a details page. A typical landing page may have data that is shown in different content views, such as list view, card view, and table view. Therefore, each content view should support the drill down so that the user can navigate to the details page of the selected item from any view.


Conceptual Design

Landing page in list view:

list view



Landing page in card view:

tile view



Landing page in table view:

table view 2



Details page:

detail page with page title



Details page with tabs:

detail page




  • List view item: Clicking on a row in the list view will direct the user to the details page of the selected item.
  • Card view item: Clicking on a card in the card view will direct the user to the details page of the selected item.
  • Table view item: Clicking on a row in the table view will direct the user to the details page of the selected item.
  • Details page: Provide the detailed information about the selected item.
    • Breadcrumb: Provide context and inform users of their current location. Breadcrumbs are also a means for users to navigate back to the landing page.
    • Page title: The page title provides further reinforcement to the user about which item was selected.
    • Tabs (optional): The details page may have tabs, if the details can’t be fit into one page. To better save the vertical screen real estate, we recommend removing the page title when tabs are used at the top of the screen.


Open questions:

  1. Would you prefer using the standard breadcrumb shown in the conceptual design, or using a visually more prominent breadcrumb? Please see the alternative design of breadcrumb below. Note that this is just an exploration. The design and usage guidelines of breadcrumb is not within the scope of the Drill Down pattern and it will not be presented in the final design.

Details page with more prominent breadcrumb:

detail page with tabs 2



The user can also access the details of another item easily, without having to go back to the landing page:

detail page with tabs 2 and dropdown

  1. Would you prefer having a View button on list view item or card view item? Also, how do you like the idea of making the item name clickable? (see examples belowlist item variations


4 Responses to “Drill Down: Looking into Details”

  1. * Question: If other elements in a view are click-able, how do you define the clickable area for the drill-down to the master item’s details? For example, in the list view – if one or more of the columns contained items with linked entries (that directed to other pages) how do you distinguish between drilling down on the row versus clicking an item in a column?
    * Question: If a table has checkbox selection, could you still use this pattern?
    * RE: Open question 2: +1 to either option, at least as a variant.

    • Thanks for your feedback!
      *Q1: I would suggest using the list item variations shown at the bottom of the blog post, where View button or a linked item name is used. Sounds like this case is common in the product you are working on? We can add the variations to the final design.
      *Q2: Yep I would suggest using the table pattern. Our goal is to adopt the existing patterns and add drill-down capabilities.

  2. Q2: I like the second option. Make the name clickable.
    In my projects, drill-down to a detail page is to click the product name. not use a view button.
    The product name is easier to click than a view button. I also think it’s a habit to click the name to drill-down the detail page.
    Just my two cents :-)


Leave a Reply

(will not be published)