How media apps work Browsing content details

Browsing content details

This section describes how content browsing works in media apps, including how users navigate to lower-level views with more detail.

The process of browsing content in a media app involves:

  • Viewing grids or lists of content
  • Selecting browsable content items (that is, items that represent a collection of items, as opposed to being playable) to navigate to more detailed views of those items

The detailed view of a content item exists on a lower level of the content space, also formatted as a grid or list. Users can navigate upward from lower levels using a Back affordance in the app header.

Note:
The optional in-app search function can provide another way for users to find content when they are browsing. Search is discussed in Sign-in, settings & search.

Grid and list views of content

Media content in the content space can be formatted as a grid or a list, either of which can be organized into categories separated by subheaders. Users browse through the grids or lists by scrolling vertically.

Note:
Currently, it’s not possible to combine a grid and a list in a single content space.

Grid and list formats are shown here at the top level of the content space. Either format can be used at any level.

Navigation to levels with more detail

As users browse within the content space, they can select a browsable content item (such as an album or playlist) to navigate to a more detailed view of that item (songs on the album, or individual items on the playlist). When a user begins to move deeper into the content space in this way, an app header appears at the top of the screen, including an affordance that allows the user to return to the previous level.

Here, tapping the back arrow on the app header returns the user to the top level of the content space

As users scroll through a grid or list of content, an app bar (or app header) at the top of the screen remains fixed in place, with the content scrolling behind it.

Content scrolls behind the fixed app bar