Learning the basics of Voice User Interface Design by designing a rock paper scissors game for Alexa

Voice Technology is something I have been interested in for quite a while and in the spirit of learning I came up with the idea of creating a simple game where users have the chance to play against a non-human entity. This time I came up with the idea of designing a paper rock scissors game for Alexa. And with the existing tools at our disposal designing voice based experiences is no longer rocket science.

By sharing the design process of a game for Alexa I hope you can get acquainted with the basis of Voice User Interface Design.

We are designing a rock papers scissors game as an Alexa Skill, where we will have the chance to play against Alexa itself!

A simple best out of three, five, seven (or whatever number of attempts the user chooses) rock paper scissors game, where Alexa times the choice before expressing her selection using speech. The player uses his hands to express his selection and it is timed by Alexa.

When you want to design for a voice assistant such as Alexa, you need to design a skill. A skill is essentially a voice-based app that works on Alexa-enabled devices. For our case we want to design a game skill.

Keep in mind that designing for voice is different from visual design. Your design approach must consider voice-first interactions adapted to the way users express their intentions naturally through speech. For Alexa-enabled devices with a screen, the voice interaction can be enhanced with complementary visual design.

But before we start designing a conversation based game, we need to understand some key concepts.

When interacting with a voice assistant like Alexa, the user is the one who starts the conversation. The conversation can be initiated with a voice command. A command is usually referred to as an utterance, which is basically a user request. Let’s break a user request as follows:

Now that we went over the basic concepts of conversational design, let’s design the dialog that will take place throughout the game.

The next part of the conversation-first design process is writing a script. Scripts show the conversation between the user and Alexa, like in a movie, and is a great way to determine how the conversation will flow. When writing you are essentially scripting an entire conversation, which can potentially go in almost any direction.

Even though a basic script won’t fully represent how users will interact with your skill in real life, it provides a good starting point to shift your mind from visual to conversational design. In real life users may say too little, too much, or say things that you weren’t expecting. Writing a script is a way to visualize any number of paths or turns that the player might interact with in your game experience. It helps you capture any necessary errors or variables to consider, and uncovers synonyms and similar phrases the user says which will be potentially turned into utterances and slots.

I chose Adobe XD to create the conversation turns and overall dialog. One of the many advantages that Adobe XD offers is the ability to create voice-based prototypes and emulate how a voice-based service or app could work.

After you figure out the dialog and the potential flow of the design, you need to connect these back to the way you need to build your skill. You already did this on your script and prototype. The user’s utterances map back to intents, which represent the unique actions the skill can take.

For the purpose of keeping things simple, we are going to use a user-friendly tool called Skill Flow Builder to create our game logic and voice interaction model.

Skill Flow Builder (SFB) is an Alexa development framework that allows developers, designers and content writers to create narrative driven experiences in an easy way. One of the main advantages of SFB is that it offers a collaborative environment for development teams that allows developers and designers to work in parallel.

Skill Flow Builder has an Editor version, which consists of a graphic interface where designers and writers can visualize the built-in story or game tree and they can write or update the game narrative, add visuals and sound effects, and implement game logic and flow without requiring a development team.

Skill Flow Builder lets designers focus on creating the content and copy writing for each step throughout the entire flow and it automatically creates the intents, slots and utterances required to run the game. In other words, it creates the Voice Interaction Model that you can hand off to your development team.

Check the video below and see how the game works when users interact with Alexa by using their voice. If you listen closely you can tell the conversation between the player and Alexa happens in a natural and paced way. When the player confirms he wants to play he deviates from the usual or standard “yes”, by replying “let’s do this” instead, and Alexa understands what action (intent) needs to be triggered. This is again possible to anticipate when we script out the player-to-Alexa conversation throughout the game or experience we are designing.

The Result: A simple game delivered in a simple way, where players don’t have to think too much about what to say next. Words come out naturally and Alexa responds accordingly.

One of the benefits of using Skill Flow Builder is the ability to easily translate and design the conversational experience for multiple languages. You can also check the game working on Colombian Spanish.

Related posts:

Plastic waste is an issue that’s crucial to our customers, our employees and the communities we serve. Here Nick Amin, Aviva Group Chief Operations and IT Officer, blogs about the steps we are taking…

Certa vez me encomendaram uma história. Tinha que ser um conto de mil palavras pelo qual eu receberia duzentos reais, o que cairia muito bem naquela ocasião. A conta de luz estava atrasada há um mês…

Republican Roy Moore won the U.S. Senate seat despite charges that he trolled morgues in the Montgomery area in the 1970s and had sex with corpses he pulled from the freezer. The Republican National…