Alexa Display Template Skill Deep Dive Part 4: Mapping Alexa Skill GUI Flow

My Alexa Display Template Skill Design & Coding Deep Dive series continues with the next step in the Display Template skill design and planning process: mapping Alexa skill GUI flow. This is necessary because Display Template skills can utilize touchscreen controls, but only in a very limited way: link locations are fixed by the template, and possible behaviors are fixed by the SDK. It’s not the same as writing an app for Android or iOS, where the GUI is totally open-ended and customizable by the dev.


GUI Team


Available Templates Are Limited, So Start There

There’s no point in trying to map your GUI screen flow before you know what screen types are available. There are only two types of display templates, Body and List, and they are all pre-formatted in terms of what type and location of content they can contain (text vs. images). Both types of templates include a backButton element for navigation to the previous screen; the dev can set backButton to ‘VISIBLE’ or ‘HIDDEN’.

The templates display differently on Show vs. Spot, but as of this writing (on 1/16/18) it’s not possible for the developer’s code to “sniff” the device in order to serve a different template depending on device. For these reasons, getting a thorough understanding of the available templates is an important, early step.

Available Display Templates are limited to five types of ‘Body’ templates, which are intended to provide text and image(s) for a single item or subject, and two types of ‘List’ templates, which are intended to provide a list of selectable items shown either as text only, or text plus an image. In general you can think of the List templates as providing a type of menu view, and Body templates as providing either a splash screen view or a drill-down, detail view. BodyTemplate1 is shown below, as an example.

Note that the jaggy edges in the images are an artifact of resizing the screenshots for this post – on the actual devices the text and images are crisp.

Alexa BodyTemplate1

BodyTemplate1, BodyTemplate6 and BodyTemplate7 can contain text and large images, each in a different screen layout (e.g., background vs. foreground images, centered vs. left-aligned text). Body Templates are what you’ll use for detail views, such as displaying the correct answer in a quiz skill. BodyTemplate7 is optimized for display of large images, so that’s the one to use if the image is very important in your detail view.

BodyTemplate2 and BodyTemplate3 can contain the same elements as the other BodyTemplate types, but they also include a new ‘Action Link’ option that can assist with skill navigation by mapping directly to a function that loads a different (or hierarchically higher-level) screen. ‘Action Links’ were not available when I wrote Visual Tarot, but I wish they had been because then I wouldn’t have had to write a bunch of code to keep track of where the user is in the skill and which screen to return him to on a ‘go back’ event. The Action Links are shown in blue in the image of BodyTemplate3, below.

Alexa BodyTemplate3

ListTemplate screens are intended to be used for picklists, and do not include the Action Link element; users are intended to navigate by making a selection from the list. ListTemplate1 offers a select list consisting of rows. Each list item row can contain text only, or text and a (very small, tiny on Spot) thumbnail image:

Alexa ListTemplate1

ListTemplate2 offers a select list consisting of columns, where the image is larger and more dominant. On the Spot only one list item is visible at a time and the user is supposed to use the paging control at the bottom of the screen to navigate the list, either by swiping left or right or speaking the desired list item number:

Alexa ListTemplate2


Getting the full details on every available template early in your design process is crucial because those options will guide your design and coding choices.

For example, I originally intended to use a List template type to display multi-card Tarot readings to the user (if you’re unfamiliar with Tarot, think ‘player hand in a round of poker’) and omit any ‘elementSelected’ handlers on those screens, so that the list itself would serve as a static, detail view of the full reading rather than a type of summary view the user could drill down from. I soon learned this wouldn’t work because there are strict character limits for text on List Template screens, they’re truly meant to serve only as picklists. The only way I could show the user the full text description of a given card was to drill down from the List to a Body Template view. With my background in web design I was hoping for a three “click” limit on user navigation through my skill, but it’s just not possible due to template constraints.

Click here for Amazon’s Display Interface and Template Reference, where you can get the full programmatic and formatting details on every available Display Template along with images that demonstrate how each one looks on Show vs. Spot.

Fair warning: As of this writing (on 1/16/18) the sample code of the documentation provided there references a car skill while the screenshots reference a cheese skill, so the content examples in the code don’t match the content examples in the screenshots. Still, you can get the gist of which types of data are defined where in Template directives.


Map Your Flow

Once you’ve familiarized yourself with the available Display Template options, you can decide which screens will suit your skill best and map every possible user path through those screens: how do you ensure a ‘select’ event exists for all possible paths through the skill, and which screen do you want to load for each ‘select’ event?

I recommend drawing an actual flowchart or state diagram on a very large whiteboard or very large piece of paper. The brown craft paper that’s often used as padding in shipping boxes is ideal, and it’s what I used for my Visual Tarot diagram, shown below. The individual screens are surrounded by red boxes, and arrows between the boxes indicate navigation pathways.

Click on the image below to view a larger version in a new tab or window.

Visual Tarot Flowchart Small

A visual representation like this makes it easier to be sure you’ve accounted for all possible user navigation choices, and that your chosen Display Template types will work for your skill.


The deep dive continues next week.


Other Posts In This Series


Sourcing Alexa Skill Content

A Look At The Visual Tarot Alexa Skill Code

Things That Kill Alexa Skills
A checklist of reasons why you might want to rethink your skill, or its design.

Alexa Skill Image Cheatsheet

Alexa Platform Changes

Persisting Data With Session Attributes In Alexa Skills

Using Alexa Display Template Directives