13 tips for designing a great chatbot UI taken for the best chatbot UI examples

Your chatbot UI (where the acronym UI means user interface) needs care and love exactly as the functional and linguistic aspects of your application.

UI design is never a pure matter of aesthetics; icons, designs, colors, and other visual elements greatly contribute to create meaning and make good communication.

Just to give you an idea of the relevance of visual elements in chatbot UI design, consider that nonverbal messages are estimated at a good 93% of the total of communication.

How can we make a good chatbot UI? I have worked out these 10 tips for designing by studying some of the ones that are considered to be the best chatbot UI examples on the web.

1) A good chatbot user interface design has appropriate background colors

Nothing forbids to serve a chat in black typography on a white background. However, the barer the better is not always a fruitful idea in UX design.

The usability of your chat comes greatly improved if it is possible to clearly distinguish your bot’s words from your customer’s words in the background of the chat.

Simply choosing three different colors – one for the background, one for the background of the bubbles that hold your client’s words, one for the background of the bubbles with your bot’s words – allows readers to clearly distinguish who is saying what.

An outstanding example of a graphical UI that applies this principle wisely is Lark. Green, white, and pastel colors are skillfully alternated to create a clear contrast between the bubbles that wrap around the conversation and the chat background.

2) Any chatbot UI greatly benefits from a graphic hierarchy

Another important rule for chatbot UI that comes from chatbot UX design is setting a proper visual hierarchy among each individual visual element of your chat.

Hierarchy makes your chat UI simpler to use, as its crucial elements become immediately recognizable.

This is quite simple to do for a designer, as the rules are the same as any graphic interface. You can use bold characters or bigger fonts to emphasize, for example.

The elements that are usually emphasized are commands and buttons (like: “Start chat”), welcoming messages, error messages, or the names of the client and the application.

An example is the welcoming page of Chatty, where the message “Welcome to Chatty” is in dark bold characters and the rest of the texts in grey or white.

Emphasis can be obtained in several ways, not only through font-weights and font sizes. Colors are often utilized to emphasize some elements. Erica utilizes the same font size and font weight almost everywhere, but different background colors for each element.

3) Rounded corners look better than squared ones

This is an old trick, but it still works. Chatbot bubbles must have rounded corners, as the human eyes love rounded shapes.

Conversely, acute angles convey a sense of danger and menace, according to neuromarketing experts. The problem with points and squared corners is that they recall tools like knives and harrows. So, rounding corners means making your chatbot UX more safe, reassuring, and relaxing -literally!

An interesting solution is the one of Hubbot, Hubspot’s chatbot, where one corner is squared and the other three corners round. The squared corner is the one that points at the person who is speaking, and it replaces the traditional arrow from the speaking character in cartoon balloons.

4) You need to set a purpose for your chatbot

You cannot create a chatbot and an efficient chatbot UI without a purpose. Building a chatbot for the HR department implies solving problems - and, consequently, finding good UI solutions – that is different from a conversational AI chatbot that is expected to sell.

In other words, the purpose affects the design of any chatbot. This is the reason why defining the purpose of your chatbot is the first step of any chatbot design process.

Valentin Salmon’s bot is an interesting example of how the definition of the purpose can impact your chatbot UI design. Its minimalism and tidiness reflect the main function of the chatbot that is to be a great virtual assistant.

5) Graphic effects make your chatbot UI more engaging

They say that humans are attracted by movements, and videos have more visual impact on customers than static images.

So, why not add some spice to your chatbot UI by adding some simple graphic effects?

Designer Dmitry Seryukov of Red Mad Robot created a beautiful effect when loading a video by gradually expanding the video itself from a corner to cover almost the full screen of the device.

Transitions are another aspect on which a designer can work to improve any chatbot UI design.

Designer Jakub Antilak has made its chatbot GUI nicer through a special fluid effect that is triggered when a message is sent: the chatbot bubbles detach themselves from a corner of the screen and floats into the conversation.

Cuberto utilizes animated background photos that make this chat very engaging for users. Another idea to make your chatbot UI more charming is to use animated transitions.

The trick with graphic effects is to avoid exaggerations. While a simple and not-invasive transition can give your chatbot UI the twist that you are looking for, massive utilization of graphic effects can result in confusion and loss of usability. So, be moderate and smart with your graphic effects.

6) Fonts of chatbot UI must be readable

Chatbot bubbles are the main functional and graphical components of any chat, which explains the importance of the font choice.

A chatbot UI is mainly an interface for real-time interaction between a human and a bot. So, the first rule to keep in mind is its readability, especially on screens and small screens, as chatbots are deployed on the web.

Font personality should be regarded as less important than readability. However, some font families show a strong personality despite their linear and simple appearance. The conciliation between font personality and font readability is thus possible.

Today, there is a big variety of fonts that have been purposely designed for screens among which to choose, from Roboto (a nice chatbot UI example that utilizes this font is Chatlio) and Open Sans to Proxima Nova and San Francisco. In conclusion, finding a good font for your chat is not such a difficult task.

Other fonts that are recommended for chatbot UI are Poppins (a geometric sans serif), Bungee, and BPreplay (two other sans serif fonts). They have friendly, informal, and warm personalities which are particularly suitable for chatbot UI.

7) Keep your text blocks short

Long chunks of text are not compatible with the nature of short conversations of the chats with bots. Therefore, the length of bot replies should be kept within three/four lines of text.

This direction is consistent with the general UX design guidelines for web platforms. In a world where everybody is pressed and has no time to read, a long and detailed reply is far from being useful. In most cases, it could create a sense of annoyance and frustration in your client.

Keeping chatbot replies short implies properly designing your chat and following the best practices. You can find further advice in our article about 10 chatbot best practices in 2021.

8) Embed emoticons

Emoticons are a controversial topic in chatbot UI design.

Some designers think that emojis look inappropriate in the seriousness of a business conversation, whatever virtual it be; other designers think that emojis and emoticons should be allowed, as they make the whole experience more engaging.

In my opinion, there are at least two good reasons to embed emoticons in a chatbot UI:

• First, they greatly contribute to humanizing the bot.
• Second, emoji and emoticons are one of the few elements a designer can use to give personality to any chatbot UI design.

However, remember that emojis could sound too juvenile and childish when utilized massively. So, use them, but with parsimony.

An interesting chatbot UI design example with the smart use of emoticons is Chatty.

9) Design your chatbot UI by deconstructing an existing website

One of the simplest ways to design a chatbot UI is deconstructing an existing website. This approach seems to work particularly well for business chat.

The choices that are given to users in your chat will be the same as the website. The difference is that they are incorporated in bottoms that appear in a chatbot bubble.

The decision tree of the chatbot will be molded on the website, and the flow will be similar as well.

An example of chatbot UI that was obtained by deconstructing an existing website is UX Bear.

10) Keep in mind chatbot UI limitations when designing

Chatbot UI design is not a free world. The limitations for designers are many and severe:

• Functions like bold characters, italics, underline are not possible
• There is no control on the sizes of the images
• Fonts cannot be changed
• Margins, drop shadows and similar elements are not present
• Neither the color of the font nor the background can be adjusted

The elements that a designer can exploit to create a great experience with a chatbot UI are only four, in the end: texts, emojis, videos/images, conversational flows.

A good designer will be able to make the most of all of them.

11) Do not forget greetings

Saying: “welcome” to your user is not only a matter of politeness but also one of the few tricks that can be used to humanize a bot and establish the desired tone of voice of your app.

The start of the conversation can be also seen as a good occasion for your bot to explain some important basic points, like setting the expectations of what the bot will give or will not.

This is important for many users that are not used to speaking to a bot. Remember that the majority of people have not yet experienced a conversation with a chatbot, and they do not know what to expect from that experience.

12) Add quick answer buttons

Quick answers are suggested responses that help your users by fastening their journey to the desired information.

Quick answers can be easily added in the form of buttons to press on in the flow of the conversation. Noticeable examples are found in CNN and UX Bear chatbots.

13) Don’t forget to add a pinch of humor

They say that humor is a great resource in life. So, why not try to use it also in chatbot UI design? A pinch of humor will make your chatbot sound more human and friendly, with benefits in terms of engagement and conversions.

Humor can be created with graphics and texts. A clear example is UX Bear’s white bear that wears spectacles and reads the newspaper.

Some other interesting examples of chatbot UI design

Chatbot UI examples are a strong and fast way to learn the basics of chatbot UI design. Let us have another quick look at some others of the best examples around.

Replika speaks like a human: it is one of the first attempts to build a companion chatbot for lonely people. Technically speaking, Replika is a contextual AI chatbot that learns from each conversation something new.

Milo stands out because of its light, amusing tone that creates an engaging and pleasant experience for the user. The utilization of some images, which is a brilliant example of successful chatbot UI design, reinforces its witty humor.

Erica is the name of the chatbot of the Bank of America. Data visualization is its strong point: this bot can show financial information through elegant graphics and rich images.

Hummingbirdsday embeds a new functionality that consists of a graffiti board to draw on. This board increases the level of engagement of users.

Google Assistant is the master of the use of emoticons to quickly give feedback on an answer: the user has simply to press a thumb up or a thumb down emoticon.