10 Tips for Designing Alexa Skills with Visual Responses

Jaime Radwan Nov 28, 2018
Share:
Tips & Tools Multimodal
Blog_Header_Post_Img

As Alexa continues to become further integrated into a range of devices with different capabilities, its ability to communicate with customers continues to evolve. And now with the Alexa Presentation Language (APL), you can build multimodal skills that provide customers with visual queues as they navigate through a voice experience, leading to deeper, richer interactions across tens of millions of Alexa-enabled devices with screens.

So, where should you start? Consider the following 10 design tips as you create your voice-first, visual experiences for Alexa using APL.

1. Be Voice Forward

An Alexa skill is a conversational, assistive, voice-forward experience and not simply a series of menus or a voice-controlled user interface. Your experience should lead with voice, but make use of touch for richer interactions. However, make sure your experience can be used across all device types, including those that are voice only.

Alexa Blog

2. Make Your Skill Natural and Conversational

Use everyday language and invite customers to say things to Alexa in the way they would usually speak. Alexa’s responses should stay true to Alexa's personality and be in a natural, conversational tone. Vary responses and engage the customer by asking questions.

3. Offer Help and Provide Contextually Relevant Messaging

Every choice Alexa offers to a customer, especially as a question, should be contextually relevant to the situation and current experience. This is very important for help responses, error messages, and follow-up prompts. Be sure to add full support for the help and repeat intents.

4. Be Predictable, Reliable, and Consistent

Customers should be able to learn quickly how to use and interact with the experience you've created. Ensure your skill has consistent and predictable navigation, wayfinding (with headers, for example, to help customers orient themselves within your skill), and menus. By doing so, customers won't have to relearn how to use your skill as they switch modalities or devices leading to predictable results and higher engagement.

Alexa Blog

Also make sure the experience performs reliably, responds as expected, and is consistent with common controls, such as built-in intents for basic commands.

5. Evaluate Every Interaction

Plan for every task and sequence that customers will interact with. This includes task beginnings and endings, a main state for your experience, and account linking (if applicable).

6. Design for Near and Far Experiences

When designing the visual experience for your skill, consider where and how a customer may be using it, and the level of interaction required such as touch or interactive elements. Customers may engage with their device at different distances, such as casually glancing from across a room (5-7 ft) to sitting next to it (2 ft).

7. Use Appropriate Imagery

Images should be used to enhance an experience and provide additional contextual information. Include images and icons that are universal and easily identifiable and relate to the conversation. Avoid using regional-specific images unless appropriate. Use the appropriate resolutions that will scale correctly for the device densities you’re targeting.

8. Style Your Text for Readability

Choose font sizes and colors appropriately for the screen, viewing distance, and experience context. When necessary, truncate text in a way that is readable and predictable. Use typography to create an obvious and consistent content hierarchy.

9. Be Accessible

Your skill experience should be designed so that it is available and delightful for every customer who wants to use it. Make sure the experience meets accessibility guidelines for the color and text high-contrast ratio (AA accessible, 4.5:1), and choose the appropriate font sizes for maximum readability. Also include closed captioning for videos when available.

10. Connect Touch to Voice Selections

Always ensure that visual touch targets such as buttons, lists, and menus are tied to and can be selected by voice, in addition to touch so that customers can use your skill completely hands-free. Remember though that not every voice command requires a related touch selection, and touch interactions should not be required to use or progress through a skill.

Alexa Blog

More Resources to Get Started with APL

Check out the Alexa Design Guide and the full design checklist to learn more about designing multimodal skills using the Alexa Presentation Language.

Enter the Alexa Skills Challenge: Multimodal

In addition to building a visually rich Alexa skill with APL, you can enter the Alexa Skills Challenge: Multimodal with Devpost and compete for cash prizes and Amazon devices. We invite you to participate and build voice-first multimodal experiences that customers can enjoy across tens of millions of Alexa devices with screens. Learn more, start building APL skills, and enter the challenge by January 22.

Related Content