As an Alexa developer, you have the ability to provide Alexa skill cards that contain text and/or images (see Including a Card in Your Skill's Response). There are two main types of cards:
Customers interacting with your skill can then view these cards via the Alexa app or on Fire TV. While voice experiences allow customers to break from their screens, graphical interfaces act to complement and can enhance the experience users have with your skill.
In our new guide, Best Practices for Skill Card Design, you can learn how to best present information on cards for easy consumption by customers. Skill cards contain the same information (image and text) everywhere they appear, but have differing layouts depending on the access point, the Alexa app or Fire TV.
To drive engagement with your Alexa skill, we’ve compiled the top 10 tips for effective Alexa skill card design.
Cards do not replace the voice experience, instead, they deliver value-added content. Customers should not need to rely on the cards to enjoy your voice experience and cards should never be required to use an Alexa skill. Instead, they should be used to provide additional information.
For example, imagine a customer asks for a recipe and you want to share details of the recipe. The skill card could add additional context by providing the recipe category, recipe description, cook time, prep time, and number of ingredients, while Alexa may simply say, “Try chicken parmesan accented by a homemade tomato sauce.”
Cards can be a great way to get a lost user back on track, or enable self-service to show users what they can do. Give enough detail for the user to move forward when lost – without going overboard. Suggest sample utterances when they need help, or when AMAZON.HelpIntent is triggered. Always keep the utterances relevant and in context of the current situation. For example, don't suggest an utterance on how to check your previous scores when the user is in the middle of the game.
Structure the copy for cards in brief, informative sentences or lines of text and avoid unstructured product details. Don’t rely on large blocks of text and keep details to a minimum so that users can quickly evaluate the card at a glance. For example, show a stock symbol and the current stock quote instead of a full sentence describing the change, which is more difficult to quickly grasp.
Use line breaks (/n) to help format individual lines of addresses, product details or information. Again, this makes it easier to quickly scan for key information. However, don’t double line break when separating parts of a street address.
Since URLs in cards are not clickable links, don’t only show URLs to direct users to other sites. Instead, provide clear direction on how to get to more information (e.g., “Go to giftsgalore.com and head to ‘My Account’”). While we don’t encourage the use of URLs in cards, if you do include them, make it easy for the user to consume and remember.
A general guideline for card content is to keep it short and easy to read. Cards should provide quick bits of content that users can consume at a glance. Providing images is a helpful way to quickly convey key information (e.g., images of a cheese pizza vs. a pepperoni pizza are instantaneously distinguishable). The card shouldn’t include everything that Alexa says, but instead simply the key information in the card (e.g., a bulleted list of product details vs. the full description).
The timing and frequency of pushing cards is important. Having too many cards can take away from the voice experience. Avoid pushing cards with every response, unless it is necessary or aids your use case (e.g., a card for each trivia question).
Avoid using all caps in headlines or in the body copy and always make sure your text is readable and grammatically correct. Note: full sentences are not required as quick comprehension is key.
Use standard Alexa skill cards with the intention of creating a unique experience that builds on the overall conversation. Keep the card visually interesting and delightful. For example, providing an image of a man yanking up his trousers along with the Word of the Day “hoick” will help your users learn and remember a new vocabulary word.
One of the most important things to remember is to consider the differing layouts on the Alexa app and Fire TV when designing cards for your skill. While a customer uses an Amazon Echo, he or she may not have the Alexa app open and in turn, may not see the cards at all. On the other hand, a customer using your skill through Fire TV will see the cards appear on the TV as Alexa is speaking.
Some great uses of skill cards include:
Learn more about Alexa skill card design by checking out the best practices guide and technical documentation on how to include a card in your skill.
Here are some tips to keep in mind. Your Alexa skill card:
Join us on November 4 at 12 p.m. PT for a live webinar with Principal Alexa Evangelist Paul Cutsinger. He’ll dive into more tips and tricks for skill cards and step through how to include a card in your skill’s response.