Visual components Carousel

Carousel

Carousels are optimized for allowing users to select one of many items when those items are most easily differentiated by an image. Users can select an item by either saying its title or tapping it.

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

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

This 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. There is no footer, and the items do not link to webpages.

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

This visual component currently supports customization.

Field name

Required?

Restrictions/Customizations

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.

Customizable image shape (angled or rounded corners).

Card background

No

Customizable image or color.

Primary text

Yes

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

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

Plain text by default. Fixed font and size.

Secondary text

Also called body or formatted text.

No

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

Plain text by default. Fixed font and size.

Number of items

Maximum: 10
Minimum: 2

Consistency

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

Interactivity

  • Swipe: Slide the carousel to reveal different cards.
  • Tap: When users tap an item, the item’s title is accepted as the user input, starting the next turn in the dialog.
  • Voice/Keyboard: Replying with the card title is the same as selecting that item.

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

Carousels are mostly used for browsing and selecting among images.

Use carousels to help the user select from content that:

  • can be most meaningfully browsed via scanning imagery (e.g., movie posters, album art, recipes, clothing)
  • can be meaningfully blocked into rectangular chunks (e.g., tweets, news stories)

Use titles that are unique and conversation friendly.

Users will be able to say the item’s title to select it, so make sure they’re easy to say, and uniquely identify each item.

Persona: Miso flowers (fake flower shop). User input: Daisies. Spoken prompt Daisies. Sure. We’ve got 5 varieties. The most popular are Shasta, Gerbera, and English daisies. Do any of those sound good? Display prompt: We have 5 daisy varieties. Which do you want? Visual: Carousel card showing different types of daisies. The first item’s title is Shasta Daisy, and the image is of small white and yellow daisies against a green background. The second item’s title is Gerbera daisy, and its image is of a larger pink and white daisy against green leaves. Chips: None of those, sunflowers, dahlias.

Do.

Each item title should be as short as possible while staying distinct from the other items.

Persona: Miso flowers (fake flower shop). User input: Daisies. Spoken prompt: Daisies. Sure. We’ve got 5 varieties of daisies. Which do you want? Display prompt: We have 5 daisy varieties. Which do you want? Visual: Carousel card showing different types of daisies. The first item’s title is Daisy, and the image is of small white and yellow daisies against a green background. The second item’s title is Daisy, and its image is of a larger pink and white daisy against green leaves. Chips: None of those, sunflowers, dahlias.

Don’t.

Never use the same title for multiple items. And avoid titles that are very similar.

Introduce the carousel with a short overview.

Consider including information about the following:

  • How many items are in the carousel (e.g., “There are 7 items on your wish list.”)
  • Why these items were chosen (e.g., “Here are our most popular bouquets.”)
  • Any selection criteria on for the items (e.g., “concerts this weekend”)
  • What order the items are in (e.g., “starting with the most recent order” if reverse chronological)
Persona: Miso flowers (fake flower shop). User input: I want to get my mom something for Mother’s Day. Spoken prompt: Alright, here are 8 of our most popular Mother’s Day bouquets. Do any of these look good? Display prompt: Here are our 8 most popular Mother’s Day bouquets. Which do you want? Visual: Carousel card showing different bouquets. The first item’s title is Thinking of Mom. Its secondary text is 15-stem bouquet, and on a new line, $19.99. The second item’s title is Mom is my hero. Its secondary text is 20-stem bouquet, and on a new line, $35.22. Chips: More bouquets, Under $50, Customize a bouquet.

Do.

Let the user know why you’ve suggested these specific items.

Persona: Miso flowers (fake flower shop). User input: I want to get my mom something for Mother’s Day. Spoken prompt: Alright, here are some bouquets. Do any of these look good? Display prompt: Here are some bouquets. Which do you want? Visual: Carousel card showing different bouquets. The first item’s title is Thinking of Mom. Its secondary text is 15-stem bouquet, and on a new line, $19.99. The second item’s title is Mom is my hero. Its secondary text is 20-stem bouquet, and on a new line, $35.22. Chips: More bouquets, Under $50, Customize a bouquet.

Don’t.

Don’t leave the user wondering why your Action is showing these specific items.

Encourage the user to choose one of the items from the carousel, but don’t force them to pick one.

Ask a question to let the user know to take their turn. Include chips like “none of these” to let them indicate they don’t want any of the options.

Persona: Sekai (fake shoe store). User input: I’m looking for some sneakers. Spoken prompt: Here are our top-selling runners. Do you want more details on any of these? Display prompt: These are our top-selling runners. Which do you want more details on? Visual: Carousel card showing different running shoes. The first item’s image is a red, black, and white shoe. The primary text is RedRunners. Its secondary text is Black and red patchwork sneakers, and on a second line, Size 11, $130. The second item’s image is a blue, black, and white shoe. The primary text is BlueRunners. Its secondary text says Black and blue patchwork sneakers, and on a second line, Size 11, $145. Chips: None of those, Patchwork sneakers.

Do.

Make it clear to the user that they need to select something from the carousel. Here, the chips allow them to choose “none of these” or to refine the results (for example, by only showing “patchwork sneakers”).

Persona: Sekai (fake shoe store). User input: I’m looking for some sneakers. Spoken prompt: Here are our top-selling runners. Anything else? Display prompt: These are our top-selling runners. Anything else? Visual: Carousel card showing different running shoes. The first item’s image is a red, black, and white shoe. The primary text is RedRunners. Its secondary text is Black and red patchwork sneakers, and on a second line, Size 11, $130. The second item’s image is a blue, black, and white shoe. The primary text is BlueRunners. Its secondary text says Black and blue patchwork sneakers, and on a second line, Size 11, $145. Chips: Patchwork sneakers, Athletic kicks.

Don’t.

Don’t simply show the user a carousel. Ask them a question in a way that makes it clear what happens if they choose an item.