In this article, I will talk about bots and talk about the features of their design. You will learn how to strip the chat history of a bot and make it look like an application with an interface in a message.
👌 It should be informed that all described below applies to Telegram. However, it is scalable to other messengers and social networks, with amendments to their features.
All the articles I found regarding UX design of bots repeated each other, and their advice boiled down to writing quality copy and working out the script. I have nothing against it, but it is much more convenient for the consumer to press a button than to write to the bot. Indeed, at the same time, in a parallel universe, bots look like cloud applications with a chat interface. Tell me that this is not possible? I will tell you how to achieve this with specific examples.
📖 But first the background
Two years ago I got carried away with a text-based multiplayer turn-based strategy game on Telegram. But after some time, I was terribly annoyed by the history of messages that the bot sent me. As a rule, they were constantly repeated with minimal differences. And only a year ago, my hands reached out to study this situation.
Searching the Internet, I did not find any information on bot design, other than the UX design of the chatbot correspondence with the user. In fact, no one has even found this problem before. So I’m sure this article will be useful and unique for you as a UX designer.
Weather bot
🌄 This bot shows weather data. It has an interface in a message that is updated.
🖼️ The image is refreshed every 15–20 minutes to reduce the load on the server. The picture contains all the information, and thanks to the correct design, the user can find out the weather without opening the image. By the way, the consumer can open the image and see detailed information: everything is for the designer’s imaginations :)
💬 Tex is needed if the image cannot be loaded (for example, in the subway). The text provides relevant, at the moment, detailed information about the weather. Users can also find out the weather in the thumbnail of the chat list or in the notification without opening the chat.
💠 The buttons below the message are a significant part of the design. They are used as status bars that contain the most relevant and necessary information because after hitting the picture, the consumers’ gaze goes to the buttons. Buttons are also used to open the settings and manually update the message.
This design looks clean, the whole bot is concentrated in one message. If necessary, the user will add one more city, then the bot will add another separate message.
This approach can be called modular, because the bot can be a Swiss knife and show not only the weather but also other information in other messages, for example, current news with links in buttons or stocks on the stock exchange. And this is a personalized feed like Goole Now, only cooler!
Now we have just begun to delve into. There are many more nuances that the following examples will reveal. Let’s continue ;)
Most popular example
Perhaps the most common design in a portfolio concerns financial applications. I propose to transfer mobile banking to a bot.
The bot is similar to the previous one but more advanced: there are more buttons, and the text part no longer copies the graphic one. Let’s start to understand.
🤑 This bot helps to view the status of a bank card, check payments, block a cash card, or, for example, find out the balance.
🖼️ An image that immediately grabs the consumers’ attention makes it easy to see the card balance, credit limit, and transaction schedule. If you open the picture and zoom in on the upper left corner, you can see the card number. This is very useful and, at the same time, safe since no one except the user will see the information about the card.
💬 The text duplicates the account balance, and also shows the latest transactions. The consumer can understand which card is in gaze, at the beginning of the message text. The image above also indicated the name of the card in the top left corner.
💠 In the buttons, you can again see the status of the bars with the necessary information, the settings button, the button for manual message update, and something else.
When you click on the button with the icon down, the message is updated, displaying additional status bars and buttons. For example, when you click on the “Get a statement” button, the bot sends a message with a file that contains all transactions on the card. Naturally, the message will disappear by itself after a while. You can also find out the CVC code (which is especially convenient if it changes dynamically) or block the card (useful if there is no access to the bank’s application).
🕹️ A little about the interaction
I think you have already noticed that the button that is the status bar and the button that you can click “intuitively” are different. This is necessary to improve the user experience.
It is better to display buttons in the role of a bar status with information and an icon (you can have a small caption to the icon).
It is better to sign regular buttons with a call to action or just leave one icon without signatures (this button should be obvious, for example ⚙️).
If a button leads to serious consequences, you should refrain from emoji and limit yourself to text that clearly describes the action (such buttons should be “boring” and carry “seriousness”).
This design significantly improves the usability of the bot and delimits the status bars from the buttons.
⁉️ Why not use the buttons on the keyboard? Firstly, the consumer can accidentally hide them, this is not so easy to open them (more precisely, to understand how to display them). Secondly, these buttons send messages to the bot that clog the chat history and are of no use. In fact, these are quick answers.
🎨 Pictures and their layout
After analyzing the layout of Telegram messages, I found the ideal aspect ratio of the picture and the content area.
For the largest possible area, I recommend using a ratio of 1: 1 or 3: 2 (as in my examples). I propose to use these two formats as standards to make it easier for the user to use different bots and speed up getting used to their interfaces.
Telegram uses fillets, and on different platforms in different ways, which can cause the content to be cut off. To avoid this, you should use the content zone (something like a departure).
With an aspect ratio of 3: 2 and a picture size of 540px X 364px, the frame has an inward indent of 15px on each side: I think this is the ideal indentation because the content on the side is not very close to the edge, but at the same time not very far. Having done some tricky mathematical calculations, you can understand that on each side there is an indent of 2.78% of the width, and the indents on the top and bottom are 4.12% of the height.
As a percentage, the numbers sound extremely scary, but in practice, they are the same indents inward along the perimeter. Of course, you can use your own values, but I recommend using no less than those that I used in the examples. Otherwise, the content has every chance of getting lost.
Many more new features
I talked about the basic principles of the layout of the message, which is a screen, but the interaction between the user and the bot does not end there. Next, we’ll look at other mechanics of interacting with the bot: bot settings and user input.
I propose to analyze everything using the example of a bot that replaces job search services (or supplements them by expanding the audience).
👷 This bot helps employers find workers and workers find work. For convenience, I named it Work Hunter.
We will analyze everything in more detail, but I think it makes no sense to say that a competent description of the bot and a beautiful splash screen are necessary.
🖼️ There is no image here, but it is not needed here. And if you still want to add it, then you can describe in the welcome message in more detail about the service, for example, describe its advantages.
💬 This bot is strongly tied to receiving information from the user, so a well-developed script will be very useful. But this bot is still devoid of useless message history and has a cool interface!
🏁 Whenever you enter the bot, an automatic message “/ start” appears. You can simply not touch it or send the user a message with detailed instructions and a video on how to delete this message. Naturally, the bot stops working until the user deletes it.
This approach takes place, but making the user think is not the best idea, because the bot should make his life easier, not complicate it. If the user is unable to delete the message, he will simply stop using the bot. Therefore, it is better just not to touch this message and accept it as “inevitable garbage”.
👤 It is desirable to receive information about the user through messages with a choice on the buttons, however, if the bot needs some unique information, then you can use text input. For example, you need to get the User’s name and phone number, in this case, let him send a message to the bot.
📨 Messages sent to the bot by the user are not so scary, on the contrary, they are extremely useful. They can be used as Config files. If the user made a mistake, then he can return to the message where he made it and change the text to the correct one, and the bot will update the information automatically.
Bots are extremely popular in messengers, however, few people use them due to their poor design. Users do not want to communicate with the machine and explain every action to it. It’s easier for them to just press a button.
I hope you appreciate my efforts and share your opinion below. Thanks for reading the text :)
P.S. Bots created using this design system are not much different from applications, but they have an undeniable advantage — computing power is in the cloud.
P.P.S. Everything written above is realizable for Telegram. Other platforms may use different APIs, but the basic principles apply to them as well. By the way, other messengers have cool features, for example, the “carousel” in the message.
👨🎓 My name is Bereziuk Ivan, I am a designer. I am engaged in branding and UX design. You can contact me through my Instagram (link).