How to design for Google Home
Design your first voice-only UX
Google Home is very cool. We love it. Building an ‘application’ for Google Home (officially called Actions on Google) will allow you to build a voice-only interaction. But before jumping in building mode: How do you design for that?
Getting the conversational design wrong is very easy in this case. And if you get it wrong, then users will be frustrated and you will lose a lot of engagement. Plus, you will then need to rebuild everything from scratch. Please get the design right!
In this short tutorial, we are going to design our first Google Home design with Botsociety
This tutorial is also available in video format. If you feel like reading, please scroll below it. Otherwise, click play!
First thing first, sign up on Botsociety (it’s free), create a new mockup and select “Google Home” in the choices below:
Then click the button “Start designing”. You will be brought to a new mockup state, that looks like this:
Now the first thing that we want to do is to design the happy path. The Happy Path is the best user interaction possible, given our objective.
1. The happy path
For this tutorial, we are going to build an “ItalianPizza” interaction; it will give you recipes and history for given pizzas. Interested users will also be able to get coupons and discounts from restaurants.
Our happy path, in this case, is a user that requires talking with Italian Pizza. He then asks for information about the “Margherita” pizza. He then accepts to receive discounts. Let’s design that!
This is my happy path. While designing it, a lot of questions arise:
- What is the personality of my bot?
- Is the first question clear enough?
- What is the best question possible at the end to reach my objective?
I may decide, for example, that I want a more funny, causal personality. Or a more concise, choppy one. This approach will also influence the remaining points. That’s up to your creativity!
Once the happy path is defined, I can start designing alternative paths that the user may take. Different paths may start from the very first moment of the interaction.
2. Design alternative paths
If you take a look at the first message, you can see that the user summons our Action by calling by name: “Ok Google! Let me talk with Italian Pizza”. Google allows another type of interaction too. The user may end up using your bot by asking Google a question that you declare to cover.
In order to add a new path, simply move your mouse over a message. A “Plus” button will appear: By clicking it, you will start adding a new path
Now you can write the new path in the green form:
In this second path, the user takes advantage of the second possible way of interacting with your bot. It will say something like: “Tell me the history of Margherita”. Let’s add this message by clicking “Add”.
Now I’m looking at the second path. In order to get back to the Happy Path, I can click on the left arrow that appears when I over the message. We will do this later! I want to continue designing this path. Now my bot will say: “Ok you can talk with Italian Pizza”. And then the user will be brought to the main path, directly to the point where our bot talks about the Margherita pizza.
In order to do that, we can use the “Link to message” button:
I can now select from the flowchart the message I want to link to:
Now I will link it back to the Margherita message. Great! We have just defined a simple, second path.
Once a message is linked, it will look like this in the preview:
Now I will proceed to create other alternative paths. For example: What happens if the user asks information about something which is not a pizza? What happens if the user says “No” to the request for more information about the discount.
Once I’m satisfied with all the paths, I will user test my design to be sure my assumptions are correct. User testing will be the topic of another tutorial!
Try Botsociety here! Please leave comments below if you have questions
