Actions on Google lets you build apps for the Google Assistant. Your apps can help you engage users through Google Home, eligible Android phones, iPhones, and in the future, through every experience where the Google Assistant is available. So when we are building our assistant app, there are different types of UIs that we can present to our users.
Let’s see what are the audio or visual components and how you can get the most out of both.
Simple responses can appear on audio-only, screen-only, or both surfaces. They take the form of a chat bubble visually, and TTS/SSML sound. Using SSML and sounds in your apps gives them more polish and enhances the user experience. Btw, Google provide a variety of free, short sounds in our sound library. These sounds are hosted for you, so all you need to do is include them in your SSML.
The TTS text will be used as chat bubble content by default. So if this looks fine, you do not need to specify any display text for a chat bubble.
(Pro Tip) There is a 640 character limit per chat bubble. Strings longer than the limit are truncated at the first word break (or whitespace) before 640 characters. Also, make sure you are using line breaks so it will be easier for your users to understand the messages.
Rich responses can appear on screen-only or audio and screen experiences.
They can contain the following components:
- One or two simple responses (e.g the chat bubbles we saw earlier)
- An optional basic card
- Optional suggestion chips
- An optional link-out chip
- An option interface (list or carousel)
A basic card displays information that can include the following:
- Text body
- Link button
Use basic cards mainly for display purposes. They are designed to be concise, to present key (or summary) information to users, and to allow users to learn more if you choose (using a weblink).
In most situations, you should add suggestion chips below the cards to continue or pivot the conversation.
(Pro Tip) Avoid repeating the information presented in the card in the chat bubble at all costs.
The single-select list presents the user with a vertical list of multiple items and allows the user to select a single one. Selecting an item from the list generates a user query (chat bubble) containing the title of the list item.
Lists are good for when it’s important to compare options (e.g which “President”, do you need to speak to? president Obama, or President Trump?), or the user needs to choose between options that need to be scanned at a glance.
(Pro Tip 1) Add a suggestion chip below a list to enable the user to pivot or expand the conversation.
(Pro Tip 2) Never repeat the options presented in the list as suggestion chips. Chips in this context are use to pivot the conversation (not for choice selection).
Notice that in the example presented here, the chat bubble that accompanies the list card is a subset of the audio (TTS/SSML). The audio (TTS/SSML) here integrates the first listed item.
(Pro Tip 3) Don’t read all the elements from the list. It’s best to mention the top item.
The carousel scrolls horizontally and allows for selecting one item. Compared to the list selector, it has large tiles-allowing for richer content. The tiles that make up a carousel are similar to the Basic card with image. Selecting an item from the carousel will simply generate a chat bubble as the response just like with list selector.
While they are visually compelling, carousels are limited in their utility in a multimodal interface. This is because they are hard to interact with as a voice interface. For that, consider using lists.
Use suggestion chips to hint at responses to continue or pivot the conversation. If during the conversation there is a primary call for action, consider listing that as the first suggestion chip.
(Pro Tip) Whenever possible, you should incorporate one key suggestion as part of the chat bubble, but do so only if the response or chat conversation feels natural.
When to use it?
- Any yes/no question should have suggestion chips for Yes and No. The best thing you can do to increase your apps usability on devices with screens is to add chips, so the user can quickly tap to respond in addition to using voice or the keyboard.
- When offering the user a small number of choices (8 or less) you can add suggestion for each choice. Please present them in the same order as in your TTS, and using the same terminology.
- If you ask a question with a wide range of possible answers, present a few of the most popular answers.
That’s it for today!
Here are few actions I’ve created.