With the release of the Echo Show, you can complement your voice user experiences with visuals. This raises the need for thinking about new customer interactions and new design patterns to apply. In this series, Designing Skills for Echo Show, we’ll cover examples of adding support for screens in your voice-first designs.

When designing your skill to work on Echo Show, choose one of the available display templates based on the interaction pattern you plan to use. Each template maps to a pattern or scenario for an optimal customer experience. In future installments of this series, we’ll cover lists and touch interaction with Echo Show.

Let’s start with the scenario where you’re simply showing information. The body template has four varieties:

Full-Width Text or Images

For long blocks of text, full-width images, and for messages where there isn’t other content to show, use Body Template 1. The template accommodates shorter text that won’t scroll, and longer text that can scroll by touch. Use this template when you’re displaying content and don’t have an accompanying image, or when you’re presenting information without asking a question.

Body Template 1

Body Template 1 - scrolling

To learn more, refer to the developer reference for BodyTemplate1.

Specific Entities

Use Body Templates 2 and 3 when Alexa’s response is a specific entity (person, place, or thing) or a property of an entity that a user requested directly or chose from a list. Make sure the user can easily view at least one element from a distance, ideally the title and image.

Body Template 2 - non-scrolling text and optional hint

Body Template 3

Body Template 3 - scrolling text

Use Body Templates 2 and 3 when:

• The user requested a specific entity, for example a recipe, an account, a restaurant, a stock, or a driver profile.
• The user requested a property of a specific entity, for example the phone number of a restaurant, the balance on a specific account, or the 52-week high of a specific stock.
• The user selected an item from a list in order to learn more.
• The user’s search yields only one item.

To learn more, check out the developer reference for BodyTemplate2 and BodyTemplate3.

Multi-Turn Dialogs

Body Template 6 is ideal for multi-turn situations, which is a conversation with multiple turns in which Alexa asks questions and the user responds with the answers. This template can be used in a variety of circumstances: welcome, asking questions, navigation, clarification, and goodbye.

Reminder: To let users know that it is their turn to talk, ask the user a question before listening for the user’s response. Many people interact with Alexa without looking at a device, and have no visual indication that the skill is waiting for a response. Asking the user a question follows conversational norms that let the user know when to speak.

Body Template 6 with optional hint

It’s best to use an image that doesn’t have text on it already because any text added to the template will clash. Be mindful of using background images that contain large areas of white or very light colors as this will diminish readability because the text on top will be white. Blur background images lightly and apply a black (#000000) layer set at 70% opacity for optimal legibility of text on top of background images.

Also, in order to decrease latency, use images that are 500KB or smaller.

To learn more, see the developer reference for BodyTemplate6.

Code Sample Showing Body Template

This code sample will show you how to detect a request from an Echo Show (which supports the display directive) or the Echo Show renderer simulator. You’ll also see how to use the Display.RenderTemplate directive to display a bodyTemplate1.

When building a sample skill, you may want to reference the supported image sizes and formats and markdown

Next in This Series

In addition to complementing your voice experience by showing more information, you can add the ability to make selections using touch, show lists, and play videos. We'll dive into those topics in the upcoming installments of this series. In the meantime, check out these helpful resources on building skills for Echo Show: 

• How to Build Alexa Skills for Echo Show
• 7 Tips for Creating Great Multimodal Experiences for Echo Show
• Documentation: Build Skills for Echo Show

---

Publish a Skill, Get an Echo Dot & Dev Swag

You knocked our socks off last month with your Alexa skills. So naturally, this month we are bringing back the Echo Dot promotion and adding in some limited-edition Alexa dev socks for you to rock this summer. Publish a new skill this month then apply to earn perks.