Drill down navigation

It works like this:

  1. Information is organized in lists over multiple levels. Tapping on an item in the list…

  2. …opens the next level. Tapping again on an item in the list…

  3. … opens, in this case, the final level.

Use when

Often information has to be broken up into lists over multiple levels. Clicking on an item makes the user move into a level of greater detail, so the deeper into the hierarchy, the more detailed the information. The user can also drill down through a series of folders to find a specific file. Items can be edited in the last level.
When information needs to be displayed on the same screen, consider using an expandable list.
Do not use the drill down list when information needs to be compared or viewed simultaneously.
Also do not put too many levels in the drill down hierarchy.

The Good

  • You can provide very detailed information on certain content
  • Entire screen is available for displaying detailed information

The Bad

  • Information can not be compared easily
  • User might get lost in multiple levels of information (provide breadcrumbs)

    Examples

    Treintijden light

    1 The app Treintijden-light can be used to find schedules for trains and plan trips by train. When a station is selected from the list in the first level...

    2 ...a next list is displayed: The list of departing trains from that station. Selecting one from this list...

    3 ...shows all the details from this connection.

    Dropbox

    1 In Dropbox, a file sharing application, the user can move through a series of folders to find specific files.

    2 Folder Projects

    3 Folder ABC

    4 Folder 01_Aangeleverd

    3 Responses to Drill down navigation

    1. Friedger says:

      It is recommended to not use right-pointing carets!

    2. Gayathri says:

      The official Android design principles documentation advises against using right caret to depict drill down capability for a UI element as it’s inconsistent with the platform- http://developer.android.com/design/patterns/pure-android.html

    3. Steve says:

      This is EXACTLY what I’m trying to figure out HOW to do. The Dropbox example best fits what I want, only I need to be able to drill down like 4 or maybe even 5 levels before reaching the “fragment” or screen for that item. Is there a complete code example anywhere for this? I’ve looked everywhere and can’t find. Thank you in advance for any help you can offer!

    Leave a comment