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.
Default background
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.
Scaling
You can set background images and videos as best-fill or best-fit.
Best-fill
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
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.
Alignment
You can customize the position of background images and videos in the following ways.
Bottom
Align to the bottom, horizontally centered.
Bottom-left
Align the bottom-left corners.
Bottom-right
Align the bottom-right corners.
Center
Center horizontally and vertically.
Left
Align to the left side, vertically centered.
Right
Align to the right side, vertically centered.
Top
Align to the top, horizontally centered.
Top-left
Align the top-left corners.
Top-right
Align the top-right corners.
Overlay Options
There are different options to consider for overlays.
Blur
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.
Color overlay
Use color overlays to increase contrast and improve legibility.
Gradient overlay
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.
Video Backgrounds
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.
Accessibility
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
- Contained: Most often used for primary actions that you want to direct the user towards. These buttons have a color layer different from the background.
- Outlined: Used for secondary actions that a user can take. These buttons show a strong line around the button text and use the same color as the background.
- Ingress: Used for actions such as “next”, “yes”, and “confirm.” These buttons use the contained button pattern but with a different color scheme.
- Egress: Used for actions such as “back”, “no” and “decline.” These buttons use the outline button pattern with a transparent body.
Icon 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
Best practices
- Button text should be one to three words that easily describe the action that the user can take in the experience.
- Minimize the number of buttons on screen to avoid visual clutter. Depending on your content, try to use one to four touch targets on the screen.
- Buttons should represent the primary actions the user can take. Avoid trying to show every action that is possible in your experience.
- Touch targets should have a minimum of 48 density-independent pixels (dp) for mobile phones, tablets, and other handheld experiences. Amazon recommends a touch target with a minimum of 68 dp for hub devices and other devices viewed at arm's-length.
Accessibility
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:
- Title
- Subtitle
- Attribution
- Navigation
Title
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.
Subtitle
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.
Attribution
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
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.
Scrolling
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.
Small screens
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.
Hint
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:
- Progress fill
- Progress buffer (optional)
- Progress track
Types of progress bars
Determinate
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.
Determinate loading
Use the determinate loading progress bars when content is loading.
Determinate radial
Use radial progress bars only for the Echo Spot. You can designate that the radial progress bar to be determinate or indeterminate.
Intermediate
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.
Intermediate radial
Use radial progress bars only for the Echo Spot. You can designate the radial progress bar to be determinate or indeterminate.
Best practices
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.
Image
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
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.
Single 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.
Multi-asset
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:
- Check boxes
- Radio buttons
- Switches
Each control type has the following interactive states: normal, pressed, focused, and disabled.
Check boxes
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:
- Selected
- Indeterminate
- Unselected
Radio buttons
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
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.
Best practices
- Don't nest check boxes more than two layers deep.
- Use a check box for opt-in interactions that the user must confirm before proceeding.
- Use a switch when you need to toggle features, modes, or functionalities on/off. This includes eliciting an immediate change, such as revealing more controls or enabling a feature.
- Radio buttons are only for selecting one item from a group. For multiple items, use a check box.
Accessibility
The following list shows the light and dark modes for selection controls:
Checkboxes
Radio Buttons
Switches
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:
- Fill
- Buffer (optional)
- Progress track
- Thumb
Slider states
Sliders have the following states: normal (with our without thumb), pressed, hovered, and focused.
Slider types
Sliders have three distinct types: default, icon, and text.
Default
You can display the default slider with or without the thumb. You present optional metadata in three ways:
- Above right: Content duration/content total are concatenated.
- Above left and right: Left is content duration and right is content total.
- Below left and right: Left is content duration and right is content total.
Text
You have three text sizes to choose from. Text should be numerical and represent a range, such as 0 to 100 percent.
Icon
You have three icon slider sizes to choose from. You can use your own icon assets or use the default iconography for Alexa.
Radio sliders
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:
Audio
- On-demand music
- Live radio stations and channels
- Programs, shows, and podcasts
- Audiobooks and voice recordings
- News and Flash Briefings
Video
- On-demand movies and TV shows
- Trailers
- Slideshows
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.
Jump 10
When the user taps the jump 10 button, the media goes back or forward 10 seconds, and then resumes playing.
Jump 30
When the user taps the jump 30 button, the media goes back or forward 30 seconds, and then resumes playing.
Custom
You can customize the secondary controls for your experience, such as navigating between audiobook chapters. Always make your secondary controls paired functions.
