We love communicators. They give us the ability to express emotions almost as if we were talking face to face. Thanks to photos, videos, emojis, memes, we can show exactly what’s on our mind. That’s also the role of chatbots. After all, they imitate human language, use the same elements of our communication. Today, I’ll show you how to choose images to create intuitive, fluent, and personalized chatbot interactions.
From messages (with buttons or quick replies) to image carousels, photos, music, and videos – chatbot content can be shared in several different ways. Just like in Facebook posts, it’s essential for chatbots to provide both visually eye-catching and substantive content. To make user interactions pleasant, I follow several rules, which I have developed on the basis of my implementation experience.
Before I move on to graphics and other multimedia, I’d like to mention one more important visual aspect of chatbots – text readability. It has an enormous impact on the comfort of users and their willingness to use the tool.
Even though there is a 640 message character limit, I try not to use more than 250 characters in order to make the text easy to read on smartphone screens. When the message needs to be a bit longer, I put myself in the role of the user and ask myself what would be the most comfortable way to display it:
Although I have 10 different buttons I can use in quick replies, I use all of them only as a last resort. Very few users will reach the end of the text, scrolling such small elements as short responses. In this case, less is more. Personally, I think that 5-6 buttons is the maximum to allow users to comfortably move around the chatbot. It would be good if they also didn’t exceed 20 characters, as that’s their character limit.
The basic way to add multimedia to a chatbot is to choose an image, music, or video and to publish it as a single element.
Adding multimedia to a chatbot on the KODA Bots platform
I try to follow the rule that the shorter side of the image has to have at least 500 px. I want images to look good on computer screens and weigh as little as possible. I usually use tinyjpg, a simple and free tool that can compress images from 5 MB to even 120 kB, without losing their original quality.
In the case of music and videos, file weight is even more important. Even though you can publish 25 MB files on chatbots, some Internet connections will not cope with this size fast enough, and this entails a higher risk that the user will turn the chatbot off. I always make sure that the music and video files are no longer than 20 seconds. As an option, you can add a small teaser informing the user that an interesting video is going to be played in a moment.
I always make sure that all the visual files displayed in our chatbot come from our client because they should be unique and consistent with the brand image. Authenticity matters, yet not always do I have ready materials. That’s when I search for stock images. Usually, when I have to find images for videos that show new chatbot features, I use UnSplash and Pexels.
I guess that the most formalized visual elements in chatbots are image carousels. Facebook advises the following graphic proportions: 1.91:1 (width to height). Images that have different proportions are appropriately resized or cropped. When I create image carousels where the graphics should be square, I always ask clients for materials with the following measurements: 955 x 500 px or 800 x 800 px.
Image carousels displayed in 4FUN.TV, Kazar, and onet SPORT chatbots
Besides graphics (which are fortunately not required when it comes to questions and answers), image carousels consist of several elements, each of which has a strict character limit:
I follow the same rules when designing image carousels as when creating texts for messages. I make them short, concise, and informative. I also add a Call to Action button that redirects users to a specific website or chatbot block.
GIFs colorize and emphasize what we want to say, so it’s very easy to exaggerate with their number, especially when a brand is not associated with this type of communication. However, they often make conversations more interesting, especially when used in a humorous context. Usually, I place them in default blocks, like “I don’t understand” (when the chatbot isn’t able to find a key phrase), “Error” (when there is an error connected to uploading data from an external database), or even when users write obscenities – to calm them down.
GIFs used in the KODA Bots and Semilac chatbots
There are numerous websites with animated images. I primarily use the classic Giphy. I always try to stop myself from scrolling through hundreds of GIFs, but trust me, it can be really hard sometimes 🙂
Who doesn’t use emojis in Messenger? In 2015, emoji 😂 won the honorable title of The Oxford Word of the Year. The popularity of new generation emoticons is not dropping even one bit. Whenever it’s not at odds with the way a given brand communicates on social media, I try to add emojis to make conversations more interesting and to drag the attention of users to specific elements of the message.
Emojis are treated as a text. For most of them, we have to devote two characters (or actually three, if we count the space that separates them from other words). This is painful, especially considering the 20 character limit for buttons. To find emojis for conversations, I usually use GetEmoji, where they are all conveniently divided into separate categories. However, there are several traps we can fall into when we copy emojis. 😳
Whenever I use a given emoji for the first time, I look it up in EmojiPedia, where I can see how it will be displayed on specific electronic devices. Pay attention to the text that is sometimes placed at the top of the page. It will inform you if a given emoji is a combination of a basic emoticon and a sex symbol (for example, The Woman Police Officer emoji is a sequence of the 👮 Police Officer and ♀ Female Sign emojis). These are emojis I try to avoid.
Multimedia can completely change the way chatbot content is perceived. It makes users more willing to interact because images are much easier to remember than plain text. Don’t hesitate to use them in chatbot communication. But remember that conversation is supposed to be vivid and dynamic. Choose content that is easy to understand, that gives a clear IMAGE of what you want to convey through your chatbot 🙂