Stay organized with collections
Save and categorize content based on your preferences.
Once you determine the top-level navigation tabs for your app, you need to make a few decisions about the browseable content views and how they are organized.
Because car makers 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
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 search interface. Car makers design both the search affordance and the keyboards.
Browsing view guidelines
Requirement level
Guidelines
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
MAY
App developers may:
For each browsing view, determine whether to display content in a grid or in a list (list is the default)
Decide whether to implement an in-app search function
Rationale:
Avoid driver distraction: Minimize cognitive load required to browse content.
Optimize content display: Use grid or list as appropriate for the content category. (Mixing grid and list in a single view is not currently supported.)
[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2024-07-23 UTC."],[[["\u003cp\u003ePlan the content views for your app, considering the depth of content, formatting (grid or list), subcategories, and search functionality.\u003c/p\u003e\n"],["\u003cp\u003eContent hierarchy is established through the relationships between media items, and you can customize content styles.\u003c/p\u003e\n"],["\u003cp\u003eBrowsing views should ideally be no more than three levels deep and must include subheader text if using subcategories.\u003c/p\u003e\n"],["\u003cp\u003eYou can choose whether to use a grid or list format for each view and whether to incorporate in-app search, but the search interface will be handled by car makers.\u003c/p\u003e\n"],["\u003cp\u003eThe rationale behind these guidelines is to minimize driver distraction and optimize content display for improved user experience.\u003c/p\u003e\n"]]],[],null,["# Plan browsing views\n\n\u003cbr /\u003e\n\nOnce you determine the top-level navigation tabs for your app, you need to make a few decisions about the browseable content views and how they are organized.\n\nBecause car makers 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.\n\nSpecifically, you need to decide the following:\n\n- How many levels deep your content goes\n- How each top-level and lower-level browsing view will be formatted (grid or list)\n- Whether the content in any browsing view will be grouped into subcategories\n- Whether you want to implement search within your app as an aid to browsing\n\nAs 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.\n\nFor examples of the browsing interface, visit [Browsing content details](/cars/design/automotive-os/apps/media/interaction-model/browsing).\n| **Note:** The content hierarchy of your app is determined by how you define the root media item, its children, the children of those children, and so on. You can apply content styles to browsable media items to specify whether their children display in grid or list views and whether they are grouped under titles. For details, consult [Build your content hierarchy](https://developer.android.com/training/cars/media/#build_hierarchy) and [Apply content styles](https://developer.android.com/training/cars/media/#apply_content_style).\n\nIf you choose to implement in-app search, you won't need to design the search interface. Car makers design both the search affordance and the keyboards.\n\n*** ** * ** ***\n\nBrowsing view guidelines\n------------------------\n\n| Requirement level | Guidelines |\n|-------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| **MUST** | App developers must: - Provide subheader text if you decide to create subcategories within a browsing view |\n| **SHOULD** | App developers should: - Avoid browsable content that extends more than three levels deep from the top level |\n| **MAY** | App developers may: - For each browsing view, determine whether to display content in a grid or in a list (list is the default) - Decide whether to implement an in-app search function |\n\n**Rationale:**\n\n- **Avoid driver distraction:** Minimize cognitive load required to browse content.\n- **Optimize content display:** Use grid or list as appropriate for the content category. (Mixing grid and list in a single view is not currently supported.)"]]