5 Tips for Ace the Chatbot UI Design with Examples
Truth be told, there’s not really much needed to technically describe the typical design of a chatbot UI. It’s just… a plain old chat UI that you can see in apps like LINE, WhatsApp, Facebook, and many others. It just so happens that the other conversation partner has been replaced by an automated system or AI in this instance.
But that’s exactly the point.
A standard chatbot UI design is not simply a product of what is default and available. It is deliberately designed to look and intuitively feel like any other chat app UI that we use. In fact, aside from this subtle design choice, there are a good number of other unusual visual liberties in a chatbot UI that we never notice immediately, with the intention that we interact with it as naturally as possible.
Elements Of A Successful Chatbot UI Design
- Use of Eye-Popping Colors
- Interactive Multimedia Insertion
- Advanced Chat UI Animations
- (Simplified) Visual Information Overload
- Leading the Procedure Trail
1. Use of Eye-Popping Colors
Probably the easiest and cheapest way to grab an onlooker’s attention in almost any design or layout is to use a complementary combination of vibrant colors and thematically contrasting tones. This is kind of similar to how movie posters almost always use blue and orange as the main color pair theme, as it is the combination that is the most visually striking.
GIFs by the Interactive Labs team
One example of this design strategy is the GIF you see here made by the Interactive Labs team. Using an ironically fitting, almost light Discord-like visual scheme, it uses a brilliant combination of hued purple, subdued pinks, and sometimes light blue or green icons.
While the layout itself may not be drastically different from typical app UIs with chatboxes, the slight change in user perception could induce repeated access. This effect is then improved further when combined with a simple and clean layout for a better overall access experience.
The colors chosen don’t even have to be super unusual or exotic. Setting the bar to a far less popular hue of even corporate grays can be enough for that eye-popping, attention-grabbing user experience. Just… maybe choose your blues properly, since every chatbot in the world might have used each hue of it by now.
2. Interactive Multimedia Insertion
One element of the old 90s and early 2000s chatrooms that always felt memorable were the animated multimedia posts. These were the precursor of the current high-definition emojis and GIFs, which brought pretty much the same style and color that added a layer of entertainment to online chats.
Now, chatbots using memes and GIFs to lighten the mood isn’t exactly the norm. You wouldn’t see most banking chatbots displaying such a casual level of interaction to its service-processing-oriented users, for instance. But in applications where they are appropriate, a chatbot UI inserting interactive multimedia to improve its human-like factor can boost user satisfaction considerably, to the point of reliable re-use.
Tay by Microsoft
Tay, Microsoft’s experimental chatbot engine, formerly displayed brilliance in using trending memes and common online expressions to entertain its audience while it learns. The achievement was initially quite impressive, allowing it to gain more and more attention from the media and potential users. That is, until its quick demise at the hands of the very online things that spiced up its life.
3. Advanced Chat UI Animations
This element specifically focuses on higher-level implementations of animations in UI, and not just the typical widening-border-pop-up style of things. Okay, this isn’t really too advanced but is high enough to be considered a cut above what is universally used in everything.
For example, it can be a set of smooth sliding transitions in options and chat actions. It could also be idle motions of screen elements whose visual representation persist in the mind with that simple bobbing up and down movement.
At a glance, if you are not the one interacting with the chatbot UI, it may seem just a visual gimmick. But aesthetically pleasing interactive elements also provide better user input and at times, even more, convenient access to regular chat stuff.
So, while it may seem pointless at a technical level, (somewhat) advanced chatbot UI design and extras like animation gains significant points in the user query process. What might have once seemed tedious now doesn’t feel as much, and what was once dull or boring could even become entertaining.
Twitch Chatbot
Again, we provide the same example from the Interactive Labs team. Take a look at the chatbot UI design of the Twitch chatbot with menus and notifications sliding inwards and outwards seamlessly when input is made, done without confusing the user about what to do next. By all accounts, such a feature might be automatically implemented depending on the provider that you choose. But it helps to take note!
4. (Simplified) Visual Information “Overload“
On the flip side of things, if your business/ service warrants the delivery and processing of data, then it might actually be more advantageous to increase the information provided by the chatbot per response while keeping things simple.
Whereas normally, visual information overload would serve to confuse users, the additional layers of distilled data on a chatbot response would make it seem like you’re not “filling up a form” at all, potentially eliminating the tedium associated with this task.
Fitness App Concept
For example, in this chatbot UI design for the fitness app concept developed by Virgil Pana, the internal automated chatbot guides the supposed fitness trainer to a series of “qualifying” queries. Not to segregate the responses as a positively generated lead, but to bombard the user with a series of questions without making it feel like a series of questions.
The result? Again, better overall processing experience and user satisfaction. This would then make it even more likely that the user would keep using that particular function or service. It’s best implemented, of course, to complement the other design elements for the chatbot UI listed in this article.
5. Leading the Procedure Trail
Lastly, as a bonus, any processing-related procedure can be implemented by a chatbot UI design using a series of automated just-press-yes-till-you-hit-finish types of guidance. This is best showcased for queries with multiple steps but should be sophisticated enough to be different with each request and each user. For instance, when processing most types of individual banking transactions.
This type of elementary optimization in chatbot UI design is exactly what changes the game for many customer service-related industries like insurance. The fact that, without even remembering technical instructions or memorizing buttons, you can simply “talk” to a chatbot, and it will still complete the otherwise complicated transaction without so much fuss makes the chatbot’s UI design feel much cleaner.
Chatbot UI Design for EVA
If we follow our previous “visual information overload” element, the additional steps could even be more functional for users who can utilize this data professionally. Accountants and other financial specialists using chatbots like EVA typically come to mind.
Bonus points if the chatbot UI can go beyond visual elements and provide the very same procedure in a clear and crisp voice!
