In this article:
The background component displays behind other elements on the screen and can be a custom color, image, or video.
How to use backgrounds
When adding text over your background color, image, or video; you might need to add an overlay treatment to improve the readability of the text. If your text color is similar to any part of your background, you should change the color of your scrim to maintain enough contrast for legibility. The following sections provide details about optimal background colors.
On most viewport profiles, the default is dark blue with an overlay gradient and noise.
Default TV background
On TVs, the default full-screen background is a flat dark blue and the default partial screen background has 90% opacity.
You can set background images and videos as best-fill or best-fit.
Best-fill scales the image uniformly up or down so that you completely cover the background for the viewport profile. Consider using best-fill for most background images and videos.
Best-fit scales the image uniformly up or down so that the entire image fits within the viewport profile. Best-fit blurs and duplicates the background image.
You can customize the position of background images and videos in the following ways.
Align to the bottom, horizontally centered.
Align the bottom-left corners.
Align the bottom-right corners.
Center horizontally and vertically.
Align to the left side, vertically centered.
Align to the right side, vertically centered.
Align to the top, horizontally centered.
Align the top-left corners.
Align the top-right corners.
There are different options to consider for overlays.
Use blur to soften images, so that text becomes more legible. You should combine blur with a color overlay or use it for images that have resolution issues when they are sized up.
Use color overlays to increase contrast and improve legibility.
Gradient overlays add contrast to the bottom portion of the screen, creating a safe area for text.
Do: Consider using a gradient overlay if text is at the edge of the screen.
Do: Use a gradient or color overlay to increase contrast between content and the background.
You can turn autoplay on or off and you can set how many times the video loops. Videos should be secondary to the experience—not eye-catching or dynamic. In this example, Alexa's speech is primary and the video is secondary.
When you add overlay elements to the background, you can help improve the legibility of text over the background. To make your text highly legible, make sure that the text is at a 4.5:1 contrast ratio to the background of your choice. Amazon designed all the background palette colors for use with white text. You will need to test any other color background to make sure that your text is still legible at a 4.5:1 ratio. For example, if you have a dark background and your text is black, you should choose a contrasting color for the scrim between the background and the text to make sure you're at a ratio of 4.5:1.
Try it out
Related Developer Document
Buttons are visual affordances that users interact with by touch, voice, or TV remote control to perform an action. Buttons can be text or an icon, but never both. Buttons should succinctly describe or depict one action the user can take at that moment. For example, if the user is looking at a multi-step recipe skill, the skill experience might have a Next and Back button at the bottom of the screen to move between steps.
How to use buttons
You should provide buttons for any action a user can take either by voice or by touch.
Four types of text buttons
Icon buttons represent actions with an icon and no accompanying text. Use icon buttons for easily recognizable actions, such as navigation in headers, and play and pause in media playback.
If the action is abstract or not immediately clear, use a text button instead.
Icon button states
For each button, provide an accessibility label [accessibilityLabel] that screen readers can read for users with low to no vision. The label should provide a quick description of what the button does. With Back and Next buttons at the bottom of the screen, the accessibility labels would look like the following examples.
Try it out
Related Developer Document
The divider separates content on the display. You use dividers most often with headers and text lists to keep list items separated and easier to read.
How to use dividers
Dividers help users understand how content is organized. When content doesn't have an anchoring element, such as an avatar or icon, spacing alone might not be enough to separate content. You can use dividers in both headers and lists
Dividers in headers
Use a divider to separate header content from layout elements. When the user scrolls, the divider appears and the content scrolls behind the divider and header.
Dividers in lists
Use dividers to separate vertical list items in situations where you want users to be able to select each item individually.
Do: Use dividers to separate vertical list items when you want users to be able to select each item individually.
Don't: Don’t use dividers in horizontal lists.
The header displays information about where users are within an experience. This information can include navigational cues, such as the title, subtitle, skill attribution in the form of text or an icon, and the back button.
How to use a header
Headers act as signposts, guiding users through experiences. Use them for navigation, titles, subtitles, and branding.
Always place headers at top of a layout. Consistent placement increases familiarity and offers access to navigational elements. Don't use headers for body text or calls to action.
Headers contain the following elements:
Titles support Alexa's verbal response to an action, such as a task, or announcements of items on the screen. You can use the title to describe what's on the screen, the skill itself, or a section the user is currently in.
You can include additional information that corresponds with the title as a subtitle. Subtitles must be in title case. For example, in a weather skill, the title displays the date and the subtitle displays the location, such as the city and state.
Attributions display your skill name, icon, or associated imagery. The header can display either an image or text as the attribution. In the case where you provide both, the attribution displays the image. On smaller displays, the attribution shows an image or skill icon instead of the title and subtitle. If you would prefer to show the title and subtitle instead, set the attribution icon to “true.”
Navigation most commonly takes the form of a back button. You should display navigational elements if your experience supports requests, such as, “Alexa, go back.” You should only show the back button if you want the user to return to the previous screen at any time, and you provide a linked touch target in addition to the utterance.
You can have headers be fixed or scroll with content, depending on the screen size. Where you place the header within the template defines the scrolling.
On medium and large screens
For hub landscape small, medium, and large viewport profiles, you should keep headers fixed at the top of the screen. The context should scroll independently from the header. A persistent header allows users to access navigation and maintains the context of the content.
On small screens, such as hub round, headers should scroll off-screen with the content to maximize space on the screen.
With the footer responsive component, you can display hints at the bottom of the screen. Hints are a good way to teach users how to use your skill. Hints should provide contextual help or surface additional actions and functionality to the user.
How to use a footer component
Place footers outside of the scrolling content area, anchor them to the bottom of the screen, and always display the hints in Bookerly font.
A hint informs the user about actions they can take or how to use your skill. Hints are optional. Avoid using them if you have no relevant or interesting information to provide. If you include too many hints, your customers will ignore them.
If you provide example utterances for customers to try, don't include the wake word. A customer might set their device to a different wake word than “Alexa.” With a customized transformer, APL adds the correct wake word to your hint string automatically. The following two examples show properly formatted hints with different wake words, "Alexa" and "Echo."
Try "Alexa, what are the ingredients?"
Try "Echo, what are the ingredients?"
To customize the hint in your footer, use the textToHint data transformer to add the correct wake word to your hint string automatically. You’ll supply the text string and APL handles the rest of the structure for you.
Page counter displays the current page number out of a total number of pages.
For example, 1 | 5 indicates that the user is on page one out of five pages.
How to use page counters
Use the page counter primarily in paginated lists. You can also use the page counter in a custom sequence. The page counter identifies which page a user is on, while providing context around how many pages are in the experience.
Try it out
Related Developer Document
Progress bars are passive indicators used to represent the user’s progression visually in the experience.
How to use a progress bar
Progress bars are non-interactive components that show users the status of an activity, such as loading content, device setup, or media playback. You can change the progress fill color to match an experience.
Note: If you want to enable media playback control, use the slider component.
Progress bars contain the following components, which are numbered to correspond to the screenshot:
Types of progress bars
Use determinate progress bars to display the progression of an activity with a known duration. Progress bars shouldn't display timestamps or other non-interactive indicators of duration.
Use the determinate loading progress bars when content is loading.
Use radial progress bars only for the Echo Spot. You can designate that the radial progress bar to be determinate or indeterminate.
Use indeterminate progress bars when you can't quantify an activity’s length, such as in flash briefings and when loading content. The bar uses animation to show that progress is taking place.
Use radial progress bars only for the Echo Spot. You can designate the radial progress bar to be determinate or indeterminate.
Use accessibility labels to define progress and the total amount of time to users who use a screen reader. For example, "Twenty seconds out of two minutes."
Try it out
Related Developer Document
Ratings represent users’ evaluation of an item’s quality or performance. You can use ratings for a range of items, including recipes, products, movies and TV, restaurants, and more.
How to use ratings
Place ratings on screens that offer more information about an item, such as lists. They should be contextually relevant to the item and connected to a data source or API, such as Amazon for products or Yelp for restaurants.
Type of assets
Two types of assets display ratings, images and text.
The default ratings system is a white star in three states: full, half, and empty. You can also make your own ratings system in the three states (full, half, and empty) to fit your brand’s aesthetic.
Note: Use branded assets, such as the Yelp stars or Rotten Tomatoes ratings, only for the company’s product. Always follow the company’s brand guidelines.
Text can indicate a detailed rating (e.g., 8.5/10 IMDb) or the number of reviews.
Type of rating systems
There are two types of rating systems, single and multi-asset.
The single asset rating displays one image alongside text. Use it to display more complex rating systems, such as a movie’s Rotten Tomatoes rating or IMDb score.
The multi-asset rating displays several images alongside text. Use it to visually display an item’s rating, such as an Amazon product rating or Yelp rating.
Selection controls are actions a user can take for binary choices (on/off) and group actions (select one or multiple actions from a group).
How to use selection controls
There are three types of selection controls:
Each control type has the following interactive states: normal, pressed, focused, and disabled.
Check boxes enable users to select one, more, or no items from a set.
Parent and child check boxes
Check boxes can have parent-child relationships, with secondary options nested under primary options. Use parent check boxes to organize items and enable easy selection of multiple items. The children check boxes automatically inherit the state of the parent check box (selected or unselected).
Note: If some children check boxes are selected, the parent becomes an indeterminate check box.
Check boxes have the following states:
Radio buttons enable users to select one action from a set of available features. Use radio buttons when you want users to see all items and the users can select only one.
Switches are like physical light switches, enabling users to toggle back-and-forth between two binary states (such as turning features on/off).
A switch is off when the dot is on the left, and on when the dot is on the right.
The following list shows the light and dark modes for selection controls:
Try it out
Related Developer Document
Sliders enable users to increase or decrease a value by moving the thumb element, which resembles a white dot, along a horizontal track.
How to use sliders
You can use sliders to enable users to adjust and select a specific value in a range. They’re ideal for controlling things like media playback, screen brightness, and settings.
Sliders contain the following elements, which are numbered to correspond to the numbers in the screenshot:
Sliders have the following states: normal (with our without thumb), pressed, hovered, and focused.
Sliders have three distinct types: default, icon, and text.
You can display the default slider with or without the thumb. You present optional metadata in three ways:
You have three text sizes to choose from. Text should be numerical and represent a range, such as 0 to 100 percent.
You have three icon slider sizes to choose from. You can use your own icon assets or use the default iconography for Alexa.
Use radial sliders only for the Echo Spot. You can have the radial slider be determinate or indeterminate.
Transport controls enable users to control audio and video playback, such as pausing a video, going to the next song, or jumping 30 seconds forward in an audiobook.
How to use transport controls
Transport controls use three icons: play, pause, and skip. You should always use on-screen controls in combination with—not in place of—voice controls for media playback. You can use transport controls for the following items:
Types of transport controls
Previous / Next
The default control includes the most commonly used actions: previous, play/pause, and next. Previous goes to the beginning of the media track. Tapping previous again goes to the previous track. Next goes to the next media track.
When the user taps the jump 10 button, the media goes back or forward 10 seconds, and then resumes playing.
When the user taps the jump 30 button, the media goes back or forward 30 seconds, and then resumes playing.
You can customize the secondary controls for your experience, such as navigating between audiobook chapters. Always make your secondary controls paired functions.