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.
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.
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.