The Power of Image in Chatbots – How to Use Photos, GIFs, and Emojis
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.
Less is More
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:
- as several shorter messages that pop up one after another (with the option to delay consecutive messages for several seconds in order to make it easier for users to read them),
- or maybe as one longer message with, for example, increased spacing that allows users to easily scroll and scan the text.
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.
Let Multimedia Speak
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.
Use Image Carousels Carefully
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:
- title (black, bolded text at the top): 80 characters,
- subtitle (grey text under the title): 80 characters,
- max. 3 buttons (which are part of the carousel): each up to 20 characters,
- max. 10 quick reply buttons (as an additional element under the carousel): each up to 20 characters.
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.
How To Use GIFs in a Chatbot
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 ?
The Meaning of Emojis in a Chatbot ?
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. ?
- Every once in a while, emojis appear in new versions, which will be displayed to users only after an update. Otherwise, the emoji can show itself as an empty square with a black border. I try not to use the newest versions of emojis to avoid such situations, and to increase the possibility that people who use different devices and computer systems will see them. ?
- There are also several emojis that can be displayed in different versions. For instance, when emoticons have both male and female versions (e.g. a police officer, judge, zombie), including sport emojis (but besides ? and ⛷).
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 Make Content Come Alive
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 ?