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.
Landing page in list view:
Landing page in card view:
Landing page in table view:
Details page with tabs:
- 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.
- 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:
The user can also access the details of another item easily, without having to go back to the landing page:
- 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 below