Plan browsing views

After you determine the top-level navigation tabs for your app, you must consider the browsable content views and how they are organized.

Because car makers and Google take care of the content-view styling and the browsing navigation, your only design task with respect to browsing is to plan what’s in each view.

Specifically, you need to decide the following:

  • How many levels deep your content goes
  • How each top-level and lower-level browsing view will be formatted (grid or list)
  • Whether the content in any browsing view will be grouped into subcategories
  • Whether you want to implement search within your app as an aid to browsing (strongly recommended to make it easier for the app to be used in the car)

As you decide how to structure your content, remember that having fewer levels is better, to minimize cognitive load on drivers. Grouping content into subcategories within a browsing view (with subheaders) can help you to make your hierarchy flatter.

If you choose to implement in-app search, you won’t need to design the voice and keyboard search interface. Car makers design both the voice search affordance and the keyboards. For details, visit Supporting voice actions and Displaying search results.

Browsing view examples

Grid-based browsing view
In this example, the designer uses a grid format to display music albums (Android Auto).
List-based browsing view
This example uses a list, showing a combination of playlists and artists (Android Auto).
This example uses a grid as well as a media control bar (AAOS).
This example uses a list as well as a media control bar (AAOS).
Two examples (list and grid) of media apps on AAOS (portrait)

Browsing view requirements

Keep in mind the following requirements and recommendations:

Requirement level Requirements
MUST App developers must:
  • Provide subheader text if you decide to create subcategories within a browsing view
SHOULD App developers should:
  • Avoid browsable content that extends more than three levels deep from the top level
  • Decide whether to implement an in-app search function
MAY App developers may:
  • For each browsing view, determine whether to display content in a grid or in a list (list is the default)

Rationale

  • Avoid driver distraction: Minimize cognitive load required to browse content.
  • Optimize content display: Use grid or list as appropriate for the content category.