Enjoying the blog?

8 beautiful chatbot UI examples that will definitely inspire you

Written by Raza Kazi

17 | 09 | 19

Conversational Marketing  |  
7 minute read

For any chatbot to be a success, it needs to aid the overall user experience. If it’s helpful, easy-to-navigate and your users are actually getting value from it then great, you’re on the right track. I know what you’re thinking, though. You want your chatbot user interface (UI) to look so stupendously impressive that you can’t help but admire your handiwork.

bilal on mac

Whether you’re suffering from designer’s block, you can’t finalise a UI design or you want to see some amazing examples, here are some beautiful designs that will inspire you.

  1. In-Chat Broadcasting
  2. Chatlio
  3. Chat Animation
  4. HubBot
  5. Direct Message
  6. Multitasking Messenger UI
  7. Chatbot - Smart Home Configurator
  8. Chat UI Welcome Screen

 

1. In-Chat Broadcasting

Designer Demitry Seryukov managed to find a unique way to add and expand a video along with incorporating a trendy colour scheme in this chatbot example.

The creative aspect here sees a unique way to expand a shared video. This is done through extending the video gradually from the corner of the mobile device to the full screen which instantly grabs the attention of the user. What’s even better is that he hasn’t gone overboard with the colour scheme.

in chat messagingCredit: Dribbble

You can never go wrong with classic black and white. This is something users are likely to feel comfortable with as it offers a peaceful and serene finish. So, one lesson to take away from this example is to keep your colours on brand and pick the perfect scheme for your designs.

Couple this with beautiful animations and transitions and you’re onto a winner.

 

2. Chatlio

A comfortable colour scheme and conversation bubbles, the Balkan Brothers took on this Chatlio project and smashed it out of the park. They implemented a uniform theme colour and the rounded corners of the conversation bubbles create a really fresh and sleek look.

You’ll notice just how simple it is. They haven’t gone too crazy with the design, plus it’s both nice to look at and feels inviting. Sometimes, simple is better as these types of layouts are good for users who are after an easier and more pleasant experience.

chatlioCredit: Dribbble

Another thing you should think about - which Chatlio has done really well - is the finer details. Look at the example above and notice the super-subtle animation on the thumbs-up and thumbs-down, which will no doubt increase feedback numbers.

Another thing they’ve nailed is the choice of a clean and clear font. With all that’s going on, keep the readability as clear as you can.

 

3. Chat Animation

Jakub Antalik’s Chat Animation UI is a perfect example of showing how aesthetically pleasing chatbots can be. Although you might not be an animation whizz right now, it’s good to know what you can actually achieve down the line.

In this example, the most distinctive feature is the special fluid effect when the messages are sent.

chat animationCredit: Dribbble

As you can see, the messages don’t randomly pop up in the conversation. It’s a bubble-effect which detaches itself from where the messages are typed before floating away into the conversation. This is a great animation because you can’t help but look at the message as it floats away into the conversation.

While it’s a really small inclusion, it’s a lot better than some of the boring and static options out there. This is still engaging enough to make you want to send multiple messages to see the fluidity of the animation.

It’s a simple effect yet really unique. Small details like these can make all the difference when separating a good chatbot UI from a memorable one.

 

4. HubBot

Another example which shows that simplicity is often the best route is HubSpot’s chatbot - HubBot. In this case, HubBot features two different colour tones - one for the user and one for the bot. This makes it super clear as to who is who so it’s really easy to follow.

hubbot

Combine this with a clear font which is easy-to-read, plenty of consistent white space throughout the chat and the amazing conversational tone used to create a winning combo. This will give you the perfect example to use as inspiration for your own chatbot. No clutter whatsoever.

 

5. Direct Message

The Direct Message UI by designer Hummingbirdsday might look really simple (which is great) but it does feature a very personal and interesting graffiti board. That’s not something you see in many chatbots.

The customisation aspect is a useful feature, where users can change the colour of the text within the messages they send.

direct messageCredit: Dribbble

The interesting and intuitive graffiti board is a really beneficial addition here. What’s so unique about this example is that the feature is really uncommon. If anything, it’ll at least encourage the users to test it out and play with its functionality.

This is a great way of boosting engagement and is likely to lead to more customers in the end.

 

6. Multitasking Messenger UI

Probably one of the most beautiful examples on this list, Cuberto’s Multitasking Messenger UI not only demands attention but also keeps it. It’s super-engaging, primarily because of the interesting animated background photos.

This one features interesting dynamic effects like video background and animated transitions which makes it a lot more attractive.

multitasking messengerCredit: Dribbble

Even when the animated backgrounds aren’t in action, users are treated to a really clean and tidy interface with sleek typography to make it even easier to read.

 

7. Chat Bot - Smart Home Configurator

Valentin Salmon’s advanced bot is really something to behold. Away from the fact that it provides timely and relevant responses, this personal assistant-style chatbot is one of the tidiest UI examples you’ll come across.

smart home configuratorCredit: Dribbble

What’s not to love? The animations are subtle yet engaging, the colours are simple yet clear and the font is basic but perfect for easy reading.

 

8. Chat UI Welcome Screen

This example from Vlad Tyzum is a good way of showing how you can use the interface to capture user attention before the conversation even begins. What’s instantly recognisable here are the charming and animated expressions before the chat can start.

chat ui welcome screen

The UI of this chatbot is so special that it creates a strong emotional connection with users right from the start. It screams positivity which can improve a user’s experience before the conversation even begins.

These are just some examples out there. But if you remember only one thing after leaving here, I think it should be the simplicity factor. Sure, animations and a variety of colours are pretty cool (and I’m a sucker for a good animation), but none of them really go overboard. 

Keep it simple so that users stay engaged without losing focus from all of your good work.

Although, there’s a little more to think about when getting on board with conversational marketing - the UI is just one small aspect. To help with that, we’ve created a playbook which is going to make the journey to implementation one big success.

Get started with chatbots today with your very own playbook

You’ll learn more about conversational marketing on HubSpot, the differences between live chat and chatbot, designs, strategy - the list goes on. To get your free copy, hit the link below.

 

conversational-marketing-LP@2x

Get started with HubSpot Conversations

Ready to use HubSpot for Conversational Marketing?

Download our playbook now
aa