Review and introduction

Multimodal is the addition of other forms of communication, such as visual aids, to the voice experience that Alexa already provides. When you create multiple representations of multimodal skills by using stories and flowcharts, you end up with clear designs of the happy path. Your key to success in multimodal skill development is to identify when and why to use visuals to complement voice.

Tic-Tac-Toe: the overall picture

In Lab 1 you learned to identify some of the most important visual components in the Tic-Tac-Toe skill. The following diagram outlines the Pick Move Intent.

Grouping visuals

You can group the visual messages into at least two categories:

• C and F are visual representations of the board status while the user plays against Alexa.
• A, B, D, E, G are messages to the user that either instruct them about how to start the game, or inform them about the overall state of the game against Alexa, excluding the board status.

For simplicity, you'll start by designing screens of the second category (messages to the user). You will do so by using a similar layout that contains short text and images. In this way, these components will be different for each screen, while the general design will be the same. Apart from reducing design time and keeping the design consistent, this strategy helps if you decide to localize your skill.

You could break down this second category of visuals even further into more complex and unique designs for each interaction. For example, you could have separate visual designs for reporting the outcome of a game, and a single screen to report that the user’s move is not legal. However, in this lab you'll cover the basics, and focus on simple and reusable design components.

What you will learn

By the end of this lab, you'll be able to create skill visuals containing a background image, a logo, and informational text. You'll also create footnote hints like the one shown at the bottom of the following screenshot.