Skill design representation

When you design the entire storyboard of the voice-only skill, you need to consider the following questions:

  • When can each story happen?
  • What decisions are involved?
  • What system actions must be performed in each story?
  • What kind of visual output could be used to complement voice and when?
  • What kind of touch / manual input could be used to complement voice and when?

Such considerations require a broader view of the skill design as a system. For this purpose, you will typically use flowcharts.

Think about the “illegal move” user story.

img

Assume that the user’s move contains a row and a column. The skill must check to determine whether this move is permitted.

In this section, you learn how to use flowcharts to design your skill and determine where to add visuals. The flow translates to the following flowchart:

img

This flowchart shows that the user experience is iterative and captures what the skill must first check before Alexa responds to the user. The flowchart represents decisions and checks (conditionals) as diamond shapes with two branches.

To add an extra layer of clarity, you need to distinguish between prompts (output), user utterances (input), and responses (output), where Alexa doesn’t wait for the user to say anything.

The previous flowchart converts to the following:

img

Or, to simplify:

img

Now consider your skill's visual output. You can add a letter (A, B, C, and so on) to capture the exact point in the flow where you must later add visuals. This letter inside the circle becomes your starting point for complimenting voice with visuals.

img

Because you can’t always easily capture all the different conditionals in the same flowchart, you can think about different skill modules. Most of the times, modules refer to different intents.

Your Tic-Tac-Toe skill comprises the following basic components that relate to intents:

img

To capture system actions, such as informing the internal board status after a valid user’s move, use rectangles. For example, the rectangle in the following flowchart is a system action:

img