Animations and micro-interactions are essential today to improve the user experience: this is true for websites, mobile applications and as you can imagine, for chatbots.
Conversational robots are not simple messengers that answer Internet users’ questions, they provide a real discussion experience through neat answers and sometimes creative animations.
To personalize the conversations of your visitors and make them more intuitive, we will see together the types of animations possible for your chatbot.

1. A warm welcome message

Even if the user of your site notices this small bubble at the bottom right of his screen and he understands that it is a chatbot, he will hardly take the first step. It is therefore up to you, or rather your conversational agent, to open the conversation.
How about a “Hello” or a “Hi!” »? A bit simple isn’t it? I’m not sure that you manage to capture the attention of your Internet user in this way.
On the contrary, your chatbot must genuinely break the ice and introduce itself. Your visitor should almost feel like a friend is talking to him.

Try including a GIF, emojis, or an image in your welcome message.

chatbot welcome message

2. Indicators to make the visitor wait

A successful conversation is a flowing conversation. But even if your chatbot is very quick to respond to received messages, it still takes a few seconds to prepare its response and send it.
During these few seconds, as small as they are, your visitor will have no choice but to wait. And patience, precisely, is not his forte. It is for this reason that it is essential to provide your chatbot with specific animations to indicate to the Internet user that he will receive a response shortly.
I advise you to use the famous three animated dots which indicate that the interlocutor is writing. This way your user will have the impression of talking with a human.

Chatbot patience indicator
Directed by Isil Uzum

3. Transitions to display content

Now try to modernize and streamline the appearance of content in your chatbot. The idea is to make the text or media appear through smooth but consistent transitions throughout your website.
If, for example, the text on your home page fades in, why not do the same on your chatbot? Similarly, if the products on your e-commerce site appear by swiping from the right, you can duplicate this animation in your chatbot.
Whatever you do think about your visitor. He should enjoy chatting with your chatbot and receiving information from him.

4. Animations to guide visitor actions

Your chatbot is not meant to submit only textual information. It can also ask the user to perform certain actions such as clicking on a button or filling out a form.
In this kind of situation, it is advisable to add animations to guide the visitor so that he undertakes the right actions, but also to confirm to him that they have been carried out.
For example, if he must enter his email address, highlight the field and add an animation to indicate that his email is valid.

Chatbot action animations
Directed by Virgil Pana

5. Accessible options and extensions

The main mission of a chatbot, in addition to answering questions from Internet users, is to assist and support them in carrying out a task. For example, your chatbot can help a user make a purchase.
Due to the multitude of possible actions, your chatbot must have options or extensions. These can open in a window, above the discussion thread, so that your user can choose.
Here the animations must look like those present on a website. Your user should be able to:

  • Scroll to view the options available
  • Select fields
  • Close the window to return to the thread

Animations and micro-interactions are key to bringing your chatbot’s conversation thread to life. The latter will not be the same opportunity to humanize and users will have the impression of interacting with a real human.

5/5 - (1 vote)

About the Author

SAKHRI Mohamed

Founder & Editor

Passionate about the web, new technologies and IT, I share on tutorials, tips, advice, online tools and software for Windows, Mac and Linux.

View All Articles