How we created the best conversational UI ever
17 Dec 2018This article was previously published on Medium
Microsoft and Google are pumping out frameworks, plugins and guidelines making it’s easier than ever to create a conversational UI. But are these plugins and frameworks actually enough to create a delightful experience? We experimented with doing it differently!
Conversational UIs are not just hip and happening, they pop up everywhere. Apple, Google and Amazon are scrambling to put microphones in your home, chat-bots are emerging like mushrooms on Facebook Messenger and Skype, and many websites are adding plugins to their websites so they have another way to interact with you. But I feel these conversational UIs are lacking something…
Alexa is now also available on your wall!
Problem 1: context
Common examples of problems with context are when a conversational UI ‘forgets’ about things you asked it earlier or when a chat-window on a website doesn’t know which page your are currently viewing.
Conversational UIs also don’t understand the context of compassion: whether you are sad, angry or happy, the computer always answers the same 😔
Problem 2: it’s all text
Conversational UIs focus very heavily on text, even though there are many more ways to interact.
Let’s say you’re on the street and you ask Siri “is this restaurant any good?”. You then have to give it a name and address even though you are right there. Why can’t you just point your camera at it?
This holds for chat as well. Usually chat windows only accept text as input. Compare that with the cool ways you can also interact with people:
Problem 3: forgetting about the whole picture
Especially on websites, conversational UIs feel completely separate from the rest of the user experience. Designers and developers put a lot of work in making a website feel like a consistent experience and then chat-plugins are enabled and break that experience. Especially those boring ‘bottom-right’ chat-windows (the ones with the annoying pop-up notifications).
Movies and tv-series had this problem as well and they solved it. In the early days texting/chatting was shown with the actual phone or computer. It takes away valuable screen-time and it is a very boring visual.
Look how boring chat used to be in movies:
and look how cool it is now:
Design experiment
We love innovation and experimentation at Angi Studio (my employer) and this year we experimented with chat-bots. Our goal was to create a conversational UI for our website that “introduces Angi Studio in a fun way”.
We wanted…
- a structured conversation, inspired by conversations in computer games. With a structure we knew we could create a more natural flow, where answers of the user would influence the rest of the conversation
- integration with other elements on the site
- the chat to have a distinct feeling. A more dynamic and lively way of interacting than our other content. As we use a lot of emojis on our site, we wanted to use emojis as the base of our chat-agent
We immediately knew we were on to something…
The first thing we created was an avatar that does the conversation instead of a simple chat-box. The avatar interacts with the page: flying behind other elements, rolling and resting on boxes.
Our chat avatar interacts with the site when you scroll through the page, instead of staying in the bottom-right corner. It already feels alive and more fun to use, no?
We then started creating different prototypes: playing games in the page, cool animations, personalizing the website-content based on user-given answers…
We personalize the content on our website using the answers people give in our chat
Our second “oh my god” moment was when we created a prototype where the smiley answers a question by showing the answer on the page. This way the chat is really interacting with the content.
Instead of answering a question using text, we navigate to, and highlight the content a user asked for
The chat-prototype never went live, sadly, as we are working on even cooler stuff. But I do feel we that in just a short time we created something way more fun to use than any other chat-bot out there (prove me wrong! 😅).
Some exit-thoughts
Our experimental chat-bot was fun to use it almost felt ‘alive’. I think that’s because it shows agency and emotion: agency through an understanding of its context and emotion through animation.
In the future I will experiment more with how we can design intelligence and my assumptions are agency, emotion and empathy are key to creating the feeling of an ‘alive’ intelligence.
Really curious to hear your feedback on this!
Huge thanks to Sangeetha Jayaram and Angi Studio!