4 UX lessons for a chatbot experience users will love
4 UX lessons for a chatbot experience users will love
Muze Parmentier
•
Artificial Intelligence
User Experience
Can you help us improve our chatbot? It’s a question we receive more and more these days. Especially with the rise of AI tools. And even though the briefing often consists of ‘make sure the design matches our branding and that it works on mobile’, there’s a lot more to creating a great chatbot user experience than just its looks.
A chatbot’s use comes down to 2 main elements.
The technical aspect. Is the chatbot actually intelligent enough to help me answer my question?
The experience itself. Can you easily interact with the chatbot, for both input and output?
As a UX/UI designer, I usually don’t interfere much with the technical aspect. Though I’m more than happy to make sure any user loves to use it. Here are some lessons I learned on how to create an optimal chatbot experience.
A chatbot’s use comes down to 2 main elements.
The technical aspect. Is the chatbot actually intelligent enough to help me answer my question?
The experience itself. Can you easily interact with the chatbot, for both input and output?
As a UX/UI designer, I usually don’t interfere much with the technical aspect. Though I’m more than happy to make sure any user loves to use it. Here are some lessons I learned on how to create an optimal chatbot experience.
Findability: Users should know your chatbot exists
Sounds obvious, yet you should be able to find the chatbot, at the moment you need it. This means the chatbot should be accessible on all pages of your website. Another way to encourage interaction is adding references to your chatbot in strategically selected locations. Think about moments in the user journey where doubt might arise and your chatbot could help out.
There are design considerations when it comes to findability as well. For example, how to make the visual presence of a chatbot distinctive from the content of your page without being distracting? And how do you make it easily accessible without interfering with other content on a page, especially on mobile devices?
Findability: Users should know your chatbot exists
Sounds obvious, yet you should be able to find the chatbot, at the moment you need it. This means the chatbot should be accessible on all pages of your website. Another way to encourage interaction is adding references to your chatbot in strategically selected locations. Think about moments in the user journey where doubt might arise and your chatbot could help out.
There are design considerations when it comes to findability as well. For example, how to make the visual presence of a chatbot distinctive from the content of your page without being distracting? And how do you make it easily accessible without interfering with other content on a page, especially on mobile devices?
UI Controls: Don't stick to typing
Then the actual conversation starts. The goal is to keep the effort for the user as low as possible. Provide multiple control options, to enable the user to give input and refine output. Components like buttons with pre-formulated questions, clickable tiles to select a certain theme, using dropdown options, checkboxes or links to pages within your site through the chat interface. Don’t make your users write entire essays. The answer should be relevant and fed on a silver plate of easily usable UI controls.
UI Controls: Don't stick to typing
Then the actual conversation starts. The goal is to keep the effort for the user as low as possible. Provide multiple control options, to enable the user to give input and refine output. Components like buttons with pre-formulated questions, clickable tiles to select a certain theme, using dropdown options, checkboxes or links to pages within your site through the chat interface. Don’t make your users write entire essays. The answer should be relevant and fed on a silver plate of easily usable UI controls.
Contextual Awareness: Take your page's content into account
Best case, a chatbot knows from what page a user initiated a conversation and tailors the answers to the context of this specific page. Make sure to communicate this contextual awareness to your chatbot users. For example, by adapting the copy of the welcoming message to the context of the initiation page.
If technical limitations prevent your chatbot to recognize the page content, some strategic UX decisions are needed. If you’re running an e-commerce website, for instance, consider to not display the chatbot within your checkout flow. Without any context, your chatbot will not be able to assist users with questions about delivery or returns. More likely, it will only pull potential clients out of your funnel instead of helping them complete their purchase.
Contextual Awareness: Take your page's content into account
Best case, a chatbot knows from what page a user initiated a conversation and tailors the answers to the context of this specific page. Make sure to communicate this contextual awareness to your chatbot users. For example, by adapting the copy of the welcoming message to the context of the initiation page.
If technical limitations prevent your chatbot to recognize the page content, some strategic UX decisions are needed. If you’re running an e-commerce website, for instance, consider to not display the chatbot within your checkout flow. Without any context, your chatbot will not be able to assist users with questions about delivery or returns. More likely, it will only pull potential clients out of your funnel instead of helping them complete their purchase.
Scroll behaviour: the glue of chatbot conversations
Often overlooked when it comes to chatbot experience is the scroll behaviour within a conversation. Designing this the wrong way can easily result in friction, especially on mobile viewports. For example, what to do with auto scrolling to the bottom when a new answer appears? Avoid this kind of scrolling behavior, since it highly disturbs the reading flow of a user.
Scroll behavior becomes even more tricky when you take different viewports into account. On mobile devices, you’ll already limit screen estate when the user starts typing and the keyboard is displayed. Or in case of chatbots integrated in online shopping environments, it might be relevant to show product cards inside the conversation. To maintain a great user experience, you will need to decide on adding a horizontal scroll or stick with the vertical scroll.
Scroll behaviour: the glue of chatbot conversations
Often overlooked when it comes to chatbot experience is the scroll behaviour within a conversation. Designing this the wrong way can easily result in friction, especially on mobile viewports. For example, what to do with auto scrolling to the bottom when a new answer appears? Avoid this kind of scrolling behavior, since it highly disturbs the reading flow of a user.
Scroll behavior becomes even more tricky when you take different viewports into account. On mobile devices, you’ll already limit screen estate when the user starts typing and the keyboard is displayed. Or in case of chatbots integrated in online shopping environments, it might be relevant to show product cards inside the conversation. To maintain a great user experience, you will need to decide on adding a horizontal scroll or stick with the vertical scroll.
Bonus tip 💡
Measuring the behavior and use of your chatbot will learn you more than just relying on best practices. If you really want your chatbot to succeed in truly assisting its users, UX metrics like time spent, completion rate and drop-offs are essential to monitor. Next to quantitative data, search terms are a gold mine as well.
Bonus tip 💡
Measuring the behavior and use of your chatbot will learn you more than just relying on best practices. If you really want your chatbot to succeed in truly assisting its users, UX metrics like time spent, completion rate and drop-offs are essential to monitor. Next to quantitative data, search terms are a gold mine as well.
Including a chatbot on your website requires way more thought than just implementing a tiny conversational interface where a user is expected to blurb his questions. Besides technical abilities, its experience improves drastically when you apply smart UX patterns, create interfaces that are relevant within context and monitor its performance for an optimized chatbot your users will love.
Including a chatbot on your website requires way more thought than just implementing a tiny conversational interface where a user is expected to blurb his questions. Besides technical abilities, its experience improves drastically when you apply smart UX patterns, create interfaces that are relevant within context and monitor its performance for an optimized chatbot your users will love.
Don't forget: your AI chatbot should be transparent in its AI use according to the EU AI Act. What use cases need to be covered? How to reflect AI transparency in your designs? Read all about it in our hands-on guide for designers.
Don't forget: your AI chatbot should be transparent in its AI use according to the EU AI Act. What use cases need to be covered? How to reflect AI transparency in your designs? Read all about it in our hands-on guide for designers.
