Conversational components Chips

Chips

Chips help users 1) refine topics, 2) discover related topics, next steps, and pivots, and 3) take action. Sometimes it’s faster and easier for users to tap a chip than it is to say or type their response. When users tap a chip, that text becomes part of the conversation as the user’s response.

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

Refine topics.

Offer chips that clarify user goals and intent

Ibento (fake ticket seller) Spoken prompt: Ibento here. What event are you interested in? Display prompt: Ibento hee. What event are you interested in? Chips: Picture of 3 visual chips that read “Shows this week,” “This weekend,” and “Popular shows.”

Discover related topics, next steps, and pivots.

Show related entities and queries

Ibento (fake ticket seller) User input When’s Fake Rapper coming to the city? Spoken prompt: He’s performing in San Francisco on May 15th. Do you want me to see if there are tickets available? Display prompt: On May 15th. Should I see if there are tickets available? Visual: A picture of a card that includes an image of Fake Rapper, the date, time, venue, and location of the concert. Chips: Picture of 3 visual chips that read “Yes,” “No,” and “Bay Area Concerts.”

Take action.

Surface relevant actions

Sekai (fake shoe store) User input: Size 10 Spoken prompt: Size 10, got it. Anything else, or are you ready to check out? Display prompt: Anything else, or are you ready to check out? Visual: An image of the shoe, with details including the style name, size, cost, and brief description. Chips: Picture of 2 visual chips that read “Checkout” and “Add to cart and keep shopping.”

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

Screen only

Chips can only be displayed on devices with screen output. The number of chips that appear depends on the size of the screen on which they appear, with any remaining chips scrolling offscreen.

Maximum number of chips per turn

8

Maximum text length per chip

25 characters

User response

By default, when a user taps a chip, the text of that chip then becomes the user response. So make sure you include all your chips as training phrases that trigger an intent.

If you’re using Dialogflow, go here to read more about intents.

URLs (optional)

Chips can link out to external websites.

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

Chips should be

  • Conversational to make it easy for users to say and remember them
  • Relevant to ensure user trust
  • Action-oriented to encourage user engagement and promote conversation
  • Concise for scannability and to maximize the number of chips shown
  • Consistent to create a reliable experience throughout a dialog
  • Clear about destination to set appropriate user expectations

Provide a range of options.

Especially when asking a wide-focus question, include chips that cover the full range of options rather than focusing exclusively on one topic.

Persona: Ibento (fake ticket-seller) Spoken prompt: Sure. Do you have any preferences around ticket price, seat location, or VIP perks? Display prompt: Do you have any preferences around ticket price, seat location, or VIP perks? Chips: A picture of 3 visual chips that read, “Under $150,” “Balcony,” and, “VIP packages”

Do.

Persona: Ibento (fake ticket-seller) Spoken prompt: Sure. Do you have any preferences around ticket price, seat location, or VIP perks? Display prompt: Do you have any preferences around ticket price, seat location, or VIP perks? Chips: A picture of 3 visual chips that read, “Under $150,” “Under $200,” and, “Under $250”

Don’t.

Move the conversation forward, but don’t put words in the user’s mouth.

Prioritize being brief and action-oriented over using the exact words a user might say.

Persona: Miso flowers (fake flower shop) User Input: Um, I want to order some flowers? Spoken prompt: Okay. Did you want to browse our selection of pre-arranged bouquets, or would you like to create your own? Display prompt: Do you want to browse our bouquets, or create your own?” Chips: Picture of 2 visual chips that read “Browse bouquets” and “Customize a bouquet.”

Do.

Persona: Miso flowers (fake flower shop) User Input: Um, I want to order some flowers? Spoken prompt: Okay. Did you want to browse our selection of pre-arranged bouquets, or would you like to create your own? Display prompt: Do you want to browse our bouquets, or create your own?” Chips: Picture of 2 visual chips that read “Show me what you have,” and “Make my own bouquet.”

Don’t.

Favor verb-noun combinations.

Lead with a verb if the chip starts an action. And follow verbs with a noun to confirm what the chip is referencing.

Persona: Google I/O ‘18. User input: Yeah, I’m attending. Spoken prompt: Congrats! As the keeper of I/O-Specific knowledge, consider me your guide. I can manage your schedule, help you find things to do, or give you directions. So, which do you need? Display prompt: As the keeper of I/O-specific knowledge, consider me your guide. What can I help you with? Chips: Picture of 2 visual chips that read “Manage my schedule” and “Find things to do.”

Do.

Persona: Google I/O ‘18. User input: Yeah, I’m attending. Spoken prompt: Congrats! As the keeper of I/O-Specific knowledge, consider me your guide. I can manage your schedule, help you find things to do, or give you directions. So, which do you need? Display prompt: As the keeper of I/O-specific knowledge, consider me your guide. What can I help you with? Chips: Picture of 3 visual chips that read “Schedule,” “Things to do,” and “Directions.”

Don’t.

Don’t repeat options shown in a list or carousel.

Lists and carousels are optimized for helping users make a selection. In these cases, use chips to help the user refine the list or to say they don’t want any of those options.

Persona: Google I/O ‘18. User input: Browse sessions. Spoken prompt: There’s talks on 17 different topics. Which most interests you? Display prompt: Which topic are you interested in? Visual: A card with multiple session topics for the user to pick from. Chips: Picture of 1 visual chip that reads “None of those.”

Do.

Persona: Google I/O ‘18. User input: Browse sessions. Spoken prompt: There’s talks on 17 different topics. Which most interests you? Display prompt: Which topic are you interested in? Visual: A card with multiple session topics for the user to pick from. Chips: Picture of 3 visual chips that lst the exact same options as listed in the card.

Don’t.