Your Alexa Dashboards Settings

Best Practices for Designing Skills for Echo Devices With a Screen

When developing a skill for Echo Show and Echo Spot, keep the following best practices, design guidelines, and suggestions in mind.

See also:

Start Time for Skill

A skill with screen display on Echo Show and Echo Spot should start within 2 seconds of launch. Slow-loading images, in particular, may slow down the skill.

If you want to load an external image as part of the skill, you can design the skill to start without that image to ensure you meet the time recommendation.

Alexa Skills With and Without Interface Support

When you develop a skill, you can choose whether or not to specifically support a particular interface, such as Display for screen display. If the user of your skill has Echo Show or Echo Spot, you naturally want the experience to be as good as if the skill user is using a device, such as Amazon Echo, without a screen. Thus, even if the screen experience is not the focus of your skill, you should still consider it.

Even if you do not take any steps to support screen display, the cards you provide for the Alexa app will be displayed on the screen device, if that is what the customer is using. Thus, you should be aware of how Echo Show and Echo Spot are supported. Note that cards designed for non-screen skills are displayed on Echo Show and Echo Spot with the BodyTemplate1 template.

If you want to take full advantage of the options provided by a screen, such as the ability to select a particular image from a list or play a video, then you must specifically support screen display in your code.

See:

Design a Skill for Both Screen and Non-Screen Modes

As discussed in the next section, the skill service can determine the supported interfaces for the device, and thus whether the customer’s device has a screen display, although the skill service cannot distinguish between an Echo Show and an Echo Spot. For the best customer experience, the skill developer should create a conditional workflow when they create the skill, so that customers who use “headless” devices like Amazon Echo can have an optimized experience, and customers who use Echo Show or Echo Spot can also have an optimized experience.

If you want to enhance an existing skill by including visual and touch interactions, take the opportunity to rethink the workflow of the skill. In general, the customer will respond to a skill using different responses and different actions depending on whether the customer does or does not see a screen while using that skill. Your skill service code should reflect this difference and should reflect both types of interactions.

Determine the Supported Interfaces for the Current Device

The skill service should parse the request that comes from the device in order to determine the interfaces supported by the device. The values for event.context.System.device.supportedInterfaces.Display indicate the supported interfaces. In the following example, parsing this JSON-formatted sample request indicates that supportedInterfaces includes AudioPlayer, Display, and VideoApp. If any of these is not listed as a SupportedInterface, that means that the unlisted interface is not supported by the device.

Your skill service code should respond conditionally both to the case where these interfaces are not supported, such as Display.RenderTemplate for an Amazon Echo device, and for the case where these interfaces are supported, such as Display.RenderTemplate for an Echo Show device.

{
  "version": "1.0",
  "session": {
    "new": false,
    "sessionId": "amzn1.echo-api.session.<value>",
    "application": {
      "applicationId": "amzn1.ask.skill.<value>"
    },
    "attributes": {
      "previousPage": "the proposal"
    },
    "user": {
      "userId": "amzn1.ask.account.<value>"
    }
  },
  "context": {
    "System": {
      "application": {
        "applicationId": "<value>"
      },
      "user": {
        "userId": "amzn1.ask.account.<value>"
      },
      "device": {
        "supportedInterfaces": {
          "Display": {},
          "AudioPlayer": {},
          "VideoApp": {}
        }
      }
    }
  },
  "request": {
    "type": "IntentRequest",
    "requestId": "amzn1.echo-api.request.<value>",
    "timestamp": "2017-06-10T11:03:15Z",
    "locale": "en-US",
    "intent": {
      "name": "AMAZON.StopIntent"
    }
  }
}

In this example, the actual request will have actual values for sessionId, applicationId, userId, and requestId. Your skill service code should respond conditionally both to the case where these interfaces are not supported, such as for an Amazon Echo device, and for the case where these interfaces are supported, such as for an Echo device with a screen.

Design Guidelines for Display Template Usage

Ensure your design adheres to these guidelines so your skill will display properly on any Echo device with a screen.

  • Avoid using line breaks to vertically align text. This may produce the desired effect on Echo Show, but is likely to break alignment on Echo Spot.
  • Use font size overrides sparingly. Default font sizes have been set for all templates to allow for maximum legibility at the recommended distances.
  • Use markup such as bold, italic, and underline in meaningful ways to enhance the way your content displays on a device.
  • Action links should not be underlined and must be accessible by voice.
  • Use the new text alignment attributes to selectively align important text. Keep in mind that modifying the alignment will change the appearance on each device type. See [Text Alignment With Rich Text][rich-text-align].

Use of Images in Display Templates

Do not use background images to display foreground content, even if the results look good on Echo Show. These background images will be cropped and scaled on Echo Spot, sometimes in unpredictable ways. Use background images as wallpaper, to add some delight to your templates, but not to convey significant information to the customer. If your image conveys significant information to the customer, ensure that you use a foreground image with BodyTemplate7.

Images should not be sized specifically for Echo Show, as that means they may not display correctly on Echo Spot.

Template Usage

Follow these guidelines to ensure your skill will display correctly on all supported Echo devices with a screen.

  • Design once, using the templates as they are intended, so that the content will render correctly on any Echo device with a screen.
  • Do not nest action links within list items, as these will be difficult to select by voice. This type of nesting will cause the touch and selection to have unpredictable results as a customer cannot drill down within a list item on Echo Spot.
  • Use the header text and hint directives to deliver textual content as appropriate, instead of relying on background images that contain text.
  • Ensure the voice user interface is consistent for all device experiences. Do not try to optimize VUI for a specific device, or include text or spoken instructions such as “touch the screen” as this may cause additional usability issues.
  • For full-screen images with foreground content, use the new BodyTemplate7. This template will only support images and should be used to load image content in the foreground, with a separate background image (if desired).

Design Specifications for Echo Spot and Echo Show

Both devices have screen and touch capabilities, but are designed to be voice-first.

Echo Spot

  • Screen resolution is 480x480 pixels, with the screen cropped to a circle.
  • Background scrim/overlay of black #000000 is set at a 70% opacity.

Compare to the specifications for Echo Show.

  • Screen resolution is 1024x640 pixels, with a rectangular screen.

Display Differences Between Echo Show and Echo Spot

See Display Template Elements for a template-by-template comparison between the screen displays for the two devices.

You are expected to use a single design for both Echo Show and Echo Spot. Keep these specific display behaviors in mind as you design your screen displays.

The following display behaviors occur in Echo Spot which are different than Echo Show:

  • Hints are not displayed in any template on Echo Spot. If the hint is part of the Echo Show template, it will be hidden automatically on Echo Spot.
  • List item images within horizontal lists (ListTemplate2) will now be rendered in the background with the list content layered over top.
  • Background images will scale down to 480 pixels on the shortest side (most likely height) while maintaining the aspect ratio. The image will then center within the available viewport. In some cases, this means the edges of the background image will be cropped.
  • Header text is limited to two lines of text and will truncate with ellipses after that
  • Not all templates will display header text on Echo Spot, such as BodyTemplate2 or ListTemplate2. See the template descriptions below for details.
  • Inevitably, Echo Spot has more text wrapping than Echo Show due to the smaller screen size. Text-wrapping may produce undesirable line lengths, but this is by design. Changing default font sizes affects all device types so it is recommended that the font size not be altered.
  • No back button.

Font Ramp Mapping Between Echo Show and Echo Spot

Font sizes for Echo Show and Echo Spot will scale automatically based on the updated font ramp below. Each template has a default font size set for the primary content to maximize legibility. Those default sizes can be overridden using the values below.

Font SizeEcho Show display sizeEcho Spot display size
Size 76848
Size 54838
Size 33232
Size 22828