AVS UX Design Overview
- Setup and Authentication
- Understanding Alexa
- Display Cards
- Logo and Brand
A successful Alexa integration makes it easy for a customer to interact with a product using natural voice control. The AVS UX Design Guidelines outline requirements and recommendations to achieve a seamless Alexa experience.
Use the AVS UX Design Guidelines as you design your customer’s product experience and follow all guidelines before submitting your product for review.
Setup and Authentication
The Setup and Authentication process teaches customers what Alexa is, how to use it and allows them to connect the device to their Amazon account. This typically lives within the setup or first run experience on a partner device.
Detailed design guidelines for AVS Setup & Authentication screens can be downloaded below.
Step 1: Splash Screen
The Splash Screen informs customers about what Alexa is and what it does, highlighting the benefits of voice control. Partners are provided with assets to recreate this exact screen, but have the freedom to create their own version.
The Splash Screen must include:
- Alexa logo
- Mention of Amazon
- Description of what Alexa is
- Description of what Alexa does
- Link to initiate authentication flow
Step 2: Login with Amazon
Login with Amazon (LWA) screens must be implemented to Amazon specifications. See the Login with Amazon implementation guides for detailed specifications:
- Authorizing from a Companion Site
- Authorizing from a Companion App (Android/iOS)
- Authorizing Your Alexa-enabled Mobile Product
Step 3: Things to Try
The final Setup and Authentication screen is Things to Try. This confirms a successful login and provides example utterances to try with Alexa. Partners are provided with assets to recreate this exact screen, but have the freedom to create their own version.
Example utterances must always be included on this screen. If your application has a distinct log out screen within settings, consider including Things to Try content so that customers know the benefits of staying signed in.
The Things to Try screen must include:
- Alexa logo
- Mention of Amazon
- Description of how to wake Alexa
- Example utterances
- A link to download or open the Amazon Alexa app
Example utterance recommendations:
- The utterances should be appropriate for the device’s use cases. A speaker may emphasize audio controls, while a kitchen device may emphasize timers and alarms
- If the device is voice-initiated, the example utterances should start with wake word “Alexa”
- If the device is touch-initiated, the example utterances should not start with “Alexa”
- The utterances should not reference third-party devices the customer must purchase in addition to your device
- The utterances should not reference third-party skills that the customer must enable, however, examples of how to enable your own skills are appropriate to include
When building a device, remember that using Alexa should feel conversational. This means that waking Alexa should be easy, interrupting Alexa should be supported and the customer should be able to easily understand Alexa’s non-verbal states, like Listening and Thinking.
|Idle||When Alexa is idle, customers can use the Alexa wake word or a physical control to wake Alexa, which starts her listening state.|
|Listening||When Alexa’s microphone(s) have been activated, she is in a listening state and is waiting for voice input.|
|Active Listening||When a customer is making a request, Alexa changes from a listening state to an active listening state, which denotes that the customer’s request is actively being captured.|
|Thinking||When a customer has completed a request, Alexa enters a thinking state, which lets the customer know the microphone is no longer active and Alexa will respond shortly. During the thinking state, no additional voice input is accepted from the customer.|
|Speaking||When Alexa is responding to a request with speech.|
|Microphone Off||On a voice-initiated implementation, the customer can block Alexa from activating by turning on microphone off mode, which physically powers down the microphones and (if available) camera.|
|System Error||When errors that prevent Alexa from functioning, e.g. Wi-Fi not available, occur, they are presented visually to the customer through Alexa’s attention system.|
Alexa’s Attention System is comprised of non-verbal audio and visual components that work together to communicate Alexa’s states to the customer. These audio and visual cues should be synced so that Alexa’s state change indicators occur simultaneously as the customer wakes, speaks to and listens to Alexa. The Attention System aims to make the interactions feel fluid.
|Idle to Activated (aka Start Listening)||●|
|Microphone On to Off||●|
|Microphone Off to On||●|
Devices with screens are required to show Alexa’s Voice Chrome—the GUI attention system. The following images demonstrate each state individually.
|1 LED Display, Color||1 LED Display, Single Color|
|Cyan 100% opacity||100% opacity|
|Cyan, blue alternating||Flashing on and off|
|Cyan, blue pulsing||Pulsing|
|Red 100% opacity|
|One-time yellow burst||One-time burst|
|Slow yellow pulse||Slow pulse|
Alexa audio cues are short sounds that play to indicate an Alexa state change. They are used in concert with voice chrome or LEDs, reinforcing the visual cues that the device provides. The fewer visual cues your device has, the more important the sound cues are. Even if your device has strong visual cues, if there is a strong likelihood the customer will not be looking at your device when activating or while speaking to Alexa, the audio cues are equally important as if your device had no visual feedback. In all cases, the audio cues should clarify rather than confuse.
Depending upon your device design and whether your device is voice-initiated, how audio cues are used may vary. The key variable is whether your device is voice-initiated or not.
Start and Stop Listening
All devices need to use audio cues to indicate when Alexa has started and stopped listening. Voice-initiated devices use a different set of sounds than touch-initiated devices, even if the customer uses touch to initiate an Alexa interaction on the device.
Microphones Off and On
Voice-initiated devices also need to use audio cues when the user turns microphones on and off. Touch-initiated devices do not need these sounds as their microphones are always off until the user initiates an interaction.
|Microphone Off to On|
|Microphone On to Off|
Timers and Alarms
The following sounds should be used on voice-initiated and touch-initiated devices in the same way. When a timer or alarm goes off, the alert sounds should be played on a loop until the customer stops the alert.
If Alexa is responding (e.g. reading a Flash Briefing, or giving the 10-day weather forecast) while a timer or alarm sound should be played, the short versions of the sounds should be played once. Once the Alexa response is complete, the full length versions should be played on a loop.
Reminders, or named timers and alarms, are comprised of an alert sound followed by an Alexa utterance. When a Reminder is created, the Alexa response contains information about how many times the audio files should be played in a loop, and how long the pause between repetitions should be. For more about implementing Reminders, see the Alerts Overview.
The urls for the sound file and the speech file are included in the Alexa response and the same files is used for voice-initiated and touch-initiated devices in the same way. In case the downloadable file is unavailable, the new-notification sound should be stored locally so that it can be played as a fall-back.
When a notification arrives, the new-notification sound should be played immediately. The audio file should only be played once for each new notification and should not be played on a loop. Even if Alexa is responding (e.g. reading a Flash Briefing, or giving the 10-day weather forecast) or media is playing when a notification arrives, the sound should be played immediately.
The url for the audio file is included in the Alexa response and the same sound is used for voice-initiated and touch-initiated devices in the same way. In case the downloadable file is unavailable, the new-notification sound should be stored locally so that it can be played as a fall-back.
In devices where Bluetooth is implemented, the Alexa Bluetooth-connected and Bluetooth-disconnected sounds should be played when the device receives a connect or disconnect success event. The sounds should be played whether the user uses a voice command or in-app/on-phone control to manage the connection. The same files are used for voice-initiated and touch-initiated devices in the same way.
Error and Setup
Device sounds should be used during setup or if there is an issue with connectivity. Error sounds should not be added to an Alexa response. This is true even if the user’s speech was not understood by the service.
Display Cards for Alexa allow products to render “Now Playing” information for music, as well as static display cards for general knowledge questions, weather, to-do and shopping lists, calendar updates, and Alexa skills. See Display Cards Overview for information on how to enable Display Cards for your device.
If you are implementing Alexa on a device, it is expected that the implementation will properly display all content, templates, media attributions, and media controls. In addition, we expect that:
- A Display Card will appear as soon as Alexa begins responding or media begins playing, and the Display Card’s contents will match the Alexa response or media.
- Transitions between Display Cards will be smooth, as will the transition into displaying Cards and dismissing Cards.
- Display Cards will respond to screen interactions and voice utterances as decribed in the design guidelines for your product’s device class.
- Alexa attention states for Listening and Thinking will appear on top of any visible Display Card, and will not be obscured.
Design guidelines are currently available for the following device categories:
Your product may or may not fall exactly into one of these categories. If it does not, select the guidelines that most closely matches your product’s attributes. Note: This may require combining elements from different sets of guidance.
|Context of use||In home or on the go||In home|
|Avg. viewing distance||2 ft.||6-8 ft.|
|Attention system||On screen||On screen|
For devices with variable resolutions, we provide layouts in percentages to adapt to your device’s screen size.
When implementing Notifications, you need to determine how best to inform your user that a Notification has arrived, and how to persistently inform that user that unread notifications are available in their queue. All products must play the new notification audio file when a notification arrives. How your product visually informs the user that a notification has arrived or that a queue exists depends greatly on:
- What visual affordances your product supports
- How you render the standard Alexa Attention States. See Understanding Alexa above.
- Whether your product is built on an OS with its own notifications framework, such as iOS or Android
You should also consider informing end users that your product supports notifications:
- As part of your products setup flow
- On the Things to Try screen
- In associated educational materials
For more about implementing Notifications, see the Notifications Overview.
For products that have single-color LEDs, a burst pattern should be used when a new notification arrives. A slow pulse pattern should be used to indicate that notifications are in the queue. See LEDs for additional guidance.
For products that have multicolor LEDs, a burst pattern should be used when a new notification arrives. A slow pulse pattern should be used to indicate that notifications are in the queue. For both patterns, the LEDs should be yellow to distinguish the patterns from the standard Alexa Attention States. See LEDs for additional guidance.
High Resolution Screen
If your Alexa integration is built on a device with a native notification framework, such as iOS or Android, we recommend using that framework for both indicating the arrival of a notification and the existence of a notification queue.
If you do not have a native notification framework available, or choose not to use an available framework, notifications should be integrated into the method that your product uses to display the standard Alexa Attention States. For example, if your product uses voice chrome, burst the chrome in yellow when the notification arrives, and use a yellow burst at the end of an Alexa interaction to indicate to the user that notifications are available in the queue. You may choose to display a persistent queue indicator on screen, if it will not be disruptive to your users.
Native Notification Framework
If using a native notification framework, the user should be informed of a new notification immediately. If possible, the audio file included in the
SetIndicator directive should be played for the user.
For a persistent queue indicator, the product’s implementation of the Alexa Attention State should be yellow when Alexa is not being interacted with. In addition, the product may use its native badging system to indicate queued notifications.
Minimal or No Affordance
If your product has minimal or no visual affordance, playing the audio file file becomes the only way to consistently inform the user that a new notification has arrived. Informing the user about queued notifications is likely not feasible and does not have to be implemented. If your device has a companion app, we recommend informing the user of new and queued notifications in the app.
Logo and Brand
Consistent use of Amazon Alexa brand assets in your user interface will protect product integrity and help customers to instantly recognize references to Amazon Alexa, thereby allowing your app to be clearly understood. See AVS UX Logo and Brand Usage for more information.
The following are made available as “Alexa Materials”. Your use of these materials is subject to, and you agree to be bound by, the Alexa Voice Service Terms and Agreements.
We are excited to work with you on the commercial release of your product with Amazon Alexa. If you have any questions, concerns or comments related to these design guidelines, or are interested in obtaining the resources referenced in the design guidelines, please contact us.