If you’ve followed our conversation design process, then you’ll have started by designing for a screenless device like Google Home. This is because getting the conversational flow right is easier if everything is in one place—the spoken prompts.
You’ll start creating visuals as you expand your design to include other devices, like mobile phones.
When they supplement the conversation
Visuals are meant to supplement the conversation and therefore are not required for every turn in the dialog.
Think about what information could be better represented on a screen. Ask questions like:
- Would it help users to see an image of what’s being discussed?
- Would it be easier for the user to make a choice from a visual list rather than a spoken one?
- Is there additional content that, though not critical for the conversation, would be helpful to show users?
On devices with screen output
In a pre-formatted template
|Basic card||Use basic cards to display an image and text to users.|
|Browsing carousel||Browsing carousels are optimized for allowing users to select one of many items, when those items are content from the web.|
|Carousel||Carousels are optimized for allowing users to select one of many items, when those items are most easily differentiated by an image.|
|List||Lists are optimized for allowing users to select one of many items, when those items are most easily differentiated by their title.|
|Media response||Media responses are used to play and control the playback of audio content like music or other media.|
|Table||Tables are used to display static data to users in an easily scannable format.|