Visual components Browsing carousel

Browsing carousel

Browsing carousels are optimized for allowing users to select one of many items when those items are content from the web. When users select an item, it’s opened in a web browser (or an AMP browser if all items are Accelerated Mobile Pages).

Example Expand and collapse content An arrow that points down when collapsed and points up when expanded.

Here’s an example of what a browsing carousel looks like when all required and optional fields are completed.

This browsing carousel card, with all possible fields filled out, shows a carousel of hotels in Bali. The first item’s image shows a pool surrounded by tropical plants. Its primary text is Wowi Bali Hotel. The secondary text is 322 reviews, and on a new line, Boutique Hotel. The footer says “Disclaimer”. Each item in the card links to a web page.

Requirements Expand and collapse content An arrow that points down when collapsed and points up when expanded.

Field name

Required?

Restrictions

URL

Yes

Every item in the carousel must link to web content. Accelerated Mobile Pages (AMP) content is recommended.

Item image

No

Choose from three different image aspect ratios: square, landscape, and portrait.

Default size depends on screen size and aspect ratio; any extra space will fill with bars.

Image source is a URL. If an image link is broken, then a placeholder image is used instead.

Alt text is required for accessibility.

Primary text

Yes

Each item’s primary text must be unique (to support voice selection).

Plain text. Fixed font and size.

Max 2 lines recommended. Depending on surface, additional characters will be cut off.

Secondary text

Also called body or formatted text.

No

Plain text. Fixed font and size.

Max 2 lines recommended. Depending on surface, additional characters will be cut off.

Footer

No

Fixed font and size.

Max 1 line. This is about 50 characters, depending on the screen. Additional characters will be truncated with an ellipsis.

Anchored at the bottom of the card, so items with shorter descriptions may have white space above the footer.

Number of items

Maximum: 10
Minimum: 2

Consistency

All items in a browsing carousel must include the same fields—e.g., if one item includes an image, then all items in the carousel must include images.

If all items link to AMP-enabled content, the user will be taken to an AMP browser with additional functionality. If any items link to non-AMP content, then all items will direct users to a web browser.

Interactivity

  • Swipe: Slide the carousel to reveal different cards.
  • Tap: Tapping an item opens a browser, displaying the linked page.
  • The mic doesn't re-open when a browsing carousel is sent to the user.

Guidance Expand and collapse content An arrow that points down when collapsed and points up when expanded.

Browsing carousels are used for browsing and selecting from web content.

Browsing carousels take users out of the multimodal conversational interaction with your Action, so make this transition clear to users. They’ll no longer be talking/typing to your Action, but will instead be tapping/reading content from a web browser.

Be transparent.

Make it clear to the user that they need to select an item by interacting with the screen. Set expectations that this will open a web page and take them out of the conversation.

The mic doesn't re-open when a browsing carousel is sent to the user, so don’t ask the user a question since you won’t hear their reply.

Persona: Ibento (fake ticket-seller). User inputL Find hotels near the concert. Spoken prompt: Sure, here are the hotels we recommend in Vegas. Follow the link to their site for more details. Display prompt: Here are links to our partner hotels. Visual: Browsing carousel card showing two hotel options, one called Poolside Resort and one called Win Big Casino and Hotel. Chips: Parking, pre-show dining, and More Vegas hotels.

Do.

Let users know that selecting an item will take them outside of the Action.

Persona: Ibento (fake ticket-seller). User inputL Find hotels near the concert. Spoken prompt: Sure, here some hotels in Vegas. Which do you want to book? Display prompt: Here are Vegas hotels. Which do you want to book? Visual: Browsing carousel card showing two hotel options, one called Poolside Resort and one called Win Big Casino and Hotel. Chips: Parking, pre-show dining, and More Vegas hotels.

Don’t.

Don’t ask a question when the mic is closed, and don’t mislead users. Here, it isn’t clear to the user that if they select a hotel, they’ll no longer be talking to Ibento and will be taken to the hotel’s webpage.