AI chatbots are becoming a standard feature on websites, but adding one doesn\u2019t automatically improve the user experience. If it\u2019s poorly designed, an AI chatbot can actually make things worse.<\/p>\n
It\u2019s like going into a shop and asking an employee for help, only to be sent to the wrong aisle or receive completely misleading information. At some point, you\u2019ll wish you\u2019d never asked for their help at all.<\/p>\n
The same goes for AI chatbots. They shouldn\u2019t complicate the user experience or add unnecessary hurdles; they should simply make it easier for users to get what they need.<\/p>\n
So how do you get it right? In this guide, we\u2019ll share nine practical guidelines for designing a useful, user-friendly chatbot for your website<\/b>. We\u2019ll also take a look at real-world examples of chatbots gone wrong (and what we can learn from those mistakes).<\/p>\n\nHow to design your site\u2019s AI chatbot: 9 practical guidelines<\/h2>\n
These guidelines provide a practical roadmap you can follow to design an AI chatbot that genuinely improves the user experience.<\/p>\n
Start by getting really clear on the purpose of your AI chatbot. What do your users need help with and how could a chatbot make that experience easier?<\/p>\n
For an e-commerce site, for example, a chatbot might help shoppers find the right product or answer questions about an existing order. On a banking website, the chatbot\u2019s role might be much narrower: answering common questions and directing customers to the right place for anything involving their account.<\/p>\n
From there, define the specific tasks your chatbot should be able to handle, as well as those that fall outside of its remit.<\/p>\n
A good AI chatbot doesn\u2019t need to do everything. What matters is that its capabilities align with user expectations, and that it can reliably do the tasks it\u2019s designed for.<\/p>\n
Once you\u2019ve defined what your chatbot can do, make sure it\u2019s clear to your users from the very first interaction.<\/p>\n
Your chatbot\u2019s opening message is a great place to set expectations. But what should an AI chatbot say when it starts a conversation?<\/p>\n
Instead of a generic \u201cHi! How can I help?\u201d, aim to be specific. You might open with something like \u201cHi! I\u2019m Travel Company\u2019s AI assistant. I can help you book flights or manage an existing booking. How can I support you today?\u201d<\/p>\n
At the same time, be careful not to promise more than the chatbot can actually deliver. If there are important limitations users should know about upfront, make those clear too. The goal is to give users an accurate idea of what to expect before they start the conversation.<\/p>\n
Your users shouldn\u2019t need to be expert prompters in order to get a useful answer from your chatbot. Think about how you can guide them towards asking questions that will elicit a helpful response.<\/p>\n
Instead of a blank text box, you might provide pre-written questions or prompts the user can click on. For example \u201cI want a refund\u201d or \u201cI need to change my booking\u201d. These can also change depending on where exactly the user is on your site.<\/p>\n
The chatbot itself can help, too. If a question is too vague, it can ask a follow-up to get the user to clarify. For example, if someone asks a travel chatbot to \u201cfind me somewhere warm in October\u201d, it might ask about their budget or where they\u2019re travelling from before making recommendations.<\/p>\n
The aim is to make it feel like a conversation. You can learn more about how to create human-like conversations for chatbots<\/a> in this guide.<\/p>\n Think carefully about how your chatbot presents information. A technically correct answer isn\u2019t much use if the user has to dig through a huge block of text to find what they need.<\/p>\n Keep responses concise and easy to scan. Where it makes sense, use familiar UI elements to organise information and make the next step obvious. A travel chatbot recommending hotels, for example, could present the options as cards<\/a> with key details and a link to learn more, rather than listing everything in a long text response.<\/p>\n The same applies to actions. If a user can view a product, change a booking or get more information with a button or link, don\u2019t make them type another prompt to get there.<\/p>\n Ultimately, chat doesn\u2019t have to mean text only. Use the format that makes it easiest for the user to understand their options and move forward.<\/p>\n Your users should always know when they\u2019re interacting with AI. Don\u2019t give your chatbot a human identity or design the conversation in a way that could leave people wondering if there\u2019s a real person on the other side.<\/p>\n Transparency also means being clear about what the chatbot can\u2019t do. AI can get things wrong, so avoid presenting every response with absolute certainty. If the chatbot isn\u2019t confident in its answer, it should state that clearly and point the user towards another way to get help.<\/p>\n Yes. Users should be able to tell that they\u2019re interacting with an AI system rather than a human. You can make this clear in the chatbot\u2019s opening message, for example by introducing it as an \u201cAI assistant\u201d.<\/p>\n Mistakes and misunderstandings are all inevitable parts of the AI chatbot experience. You can\u2019t avoid them, so the goal is to handle them as smoothly as possible.<\/p>\n This means providing clear pathways forward when things go wrong. For example, the chatbot might ask the user to rephrase their question if it\u2019s unclear, or ask for more information. Alternatively, the chatbot could provide links to other sources if it\u2019s getting stuck with a particular query.<\/p>\n You should also enable users to flag an answer that\u2019s inaccurate or unhelpful. Those moments provide useful feedback you can use to improve the experience over time.<\/p>\n Your chatbot won\u2019t get every interaction right. Good UX means making sure the user can still move forward when it doesn\u2019t. And sometimes that means handing over to a human\u2026<\/p>\n Sometimes, the best thing your chatbot can do is get out of the way.<\/p>\n There will always be questions that need a human response. The chatbot might not have the right information, the issue might be too complex or the user might just prefer to speak to a person. Whatever the reason, don\u2019t make them battle with the bot first.<\/p>\n Make the option to reach a human easy to find, and think about when the chatbot itself should suggest a handover. If it\u2019s already failed to resolve the same issue several times, for example, that\u2019s probably a good sign that it\u2019s time to bring someone else in.<\/p>\n An AI chatbot should offer a human handover when it can\u2019t confidently resolve an issue, or whenever the user explicitly asks to speak to someone. You might also decide that certain queries should always go straight to human support.<\/p>\n And, where possible, carry the conversation over with the user. If they\u2019ve just spent five minutes explaining their problem to the chatbot, the last thing they want is to start from scratch with a support agent.<\/p>\n User control is a fundamental UX principle<\/a>, and it very much applies to AI chatbot design. Nobody likes a chatbot that won\u2019t leave them alone. If a user closes the chat window only for it to pop up again thirty seconds later, what was supposed to be helpful quickly becomes irritating.<\/p>\n Give users control over whether and how they interact with your chatbot. It should be easy to dismiss, and users should be able to stop a response if it\u2019s clearly heading in the wrong direction. Don\u2019t trap them inside the conversation either. If there\u2019s a useful page elsewhere on your site, give them a clear way to get there.<\/p>\n Think about accessibility here, too. Someone navigating with a keyboard should be able to use the chatbot just as easily as someone using a mouse, and important information shouldn\u2019t only be accessible through the chat interface. You can learn more about accessible design principles<\/a> here.<\/p>\n However carefully you plan your chatbot, real users will find ways to surprise you. They\u2019ll phrase questions differently from how you expected, take conversations in completely new directions, and uncover gaps you hadn\u2019t considered.<\/p>\n Testing gives you a chance to find those gaps before launch. Give real users realistic tasks and watch how they interact with the chatbot. Where do they hesitate? Which responses cause confusion? Can they still get where they need to go when the conversation doesn\u2019t follow the expected path?<\/p>\n The best way to test an AI chatbot is with real users and realistic conversations. Include straightforward requests as well as messier interactions where the user is vague or asks something the chatbot isn\u2019t equipped to handle. Pay close attention to whether people can recover when things go wrong.<\/p>\n Once your chatbot is live, real conversations become another valuable source of insight. Look for recurring points of friction and use what you find to keep improving the experience.<\/p>\n We\u2019ve looked at how to design a good AI chatbot experience. But what happens when things go wrong? Let\u2019s explore some real-world chatbot mishaps, and the UX lessons we can take from them.<\/p>\n When Air Canada customer Jake Moffatt needed to travel following the death of his grandmother, he asked the airline\u2019s chatbot about its bereavement fares. The chatbot told him he could book a regular flight and apply for the discounted rate retrospectively.<\/p>\n There was just one problem: that wasn\u2019t Air Canada\u2019s policy.<\/p>\n Moffatt followed the chatbot\u2019s advice, but Air Canada later refused his request for a partial refund. The dispute eventually went before British Columbia\u2019s Civil Resolution Tribunal, which found Air Canada liable for the inaccurate information<\/a> provided through its website and ordered the airline to compensate him.<\/p>\n What can we learn?<\/b> Users shouldn\u2019t have to second-guess whether the information your chatbot gives them is accurate. Think carefully about which questions it\u2019s equipped to answer, particularly when getting the answer wrong could have real consequences. And make sure there\u2019s a clear route to authoritative information when needed.<\/p>\n When musician Ashley Beauchamp tried to use DPD\u2019s chatbot<\/a> to track down a missing parcel, he found himself going round in circles. The chatbot couldn\u2019t give him the information he needed or connect him with a human, so he started experimenting with what else it could do.<\/p>\n Quite a lot, as it turned out. Beauchamp persuaded the chatbot to swear, tell jokes and write a poem criticising DPD. He shared the exchange online, and DPD subsequently disabled the AI component of its chatbot. The company said an error had occurred following a system update.<\/p>\n What can we learn?<\/b> There are actually two lessons here. First, test how your chatbot responds when users take the conversation somewhere unexpected. But perhaps more importantly, remember why Beauchamp started experimenting in the first place: the chatbot wasn\u2019t helping him solve his problem, and he couldn\u2019t reach a human. Guardrails matter, but so does making sure your chatbot is actually useful.<\/p>\n In 2023, users discovered that the AI chatbot on Chevrolet of Watsonville\u2019s website was surprisingly open to negotiation.<\/p>\n One user instructed the chatbot to agree with anything the customer said. He then asked for a 2024 Chevrolet Tahoe with a maximum budget of $1<\/a>. The chatbot agreed to the deal and even declared it a \u201clegally binding offer\u201d.<\/p>\n The dealership later took the chatbot offline.<\/p>\n The exchange was clearly playful, and there was no $1 Tahoe at the end of it. But it demonstrated how easily a customer-facing generative AI system could be pushed well beyond the role it was intended to perform.<\/p>\n What can we learn?<\/b> Defining your chatbot\u2019s role is only the beginning. You also need to test what happens when users deliberately push against those boundaries. A chatbot designed to help people find information about cars shouldn\u2019t suddenly start negotiating prices simply because someone tells it to.<\/p>\n Of course, these are some extreme examples, but they\u2019re a useful reminder that real users won\u2019t always interact with your chatbot in the way you expect. The more you plan for what happens when things go off-script, the better the experience will be when they inevitably do.<\/p>\n [GET CERTIFIED IN AI FUNDAMENTALS FOR UX]<\/p>\n Take our Certificate in AI Fundamentals for UX<\/span>\n <\/a>\n\t\t\t<\/div>\n\t\t<\/div>\n\t<\/div>\n<\/section>\n<\/code><\/p>\n Designing an AI chatbot brings many new challenges to the table, but the fundamentals of good UX still apply.<\/p>\n You need to understand what your users are trying to achieve and design around that. Think about where they might get stuck, and make sure they have a clear way forward when the chatbot can\u2019t help.<\/p>\n Most importantly, don\u2019t let the hype around AI distract from the experience you\u2019re actually creating. Your chatbot is another touchpoint between your users and your product, and it deserves the same thought and care as any other part of the journey.<\/p>\n If you\u2019d like to learn more about designing AI-powered products and experiences, check out the following:<\/p>\n Learn how to design an AI chatbot that genuinely improves and supports the user experience, plus three real-world examples and lessons from chatbot design gone wrong. <\/p>\n","protected":false},"author":22,"featured_media":13194,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"content-type":"","footnotes":""},"categories":[407,273],"tags":[],"class_list":["post-13193","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ai","category-how-to-guides"],"_links":{"self":[{"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/posts\/13193","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/users\/22"}],"replies":[{"embeddable":true,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/comments?post=13193"}],"version-history":[{"count":2,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/posts\/13193\/revisions"}],"predecessor-version":[{"id":13196,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/posts\/13193\/revisions\/13196"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/media\/13194"}],"wp:attachment":[{"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/media?parent=13193"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/categories?post=13193"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/tags?post=13193"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}4. Make your chatbot\u2019s responses easy to navigate<\/h3>\n
5. Be transparent about AI and its limitations<\/h3>\n
Should a chatbot tell users that it\u2019s AI?<\/h4>\n
6. Design your chatbot to handle errors smoothly<\/h3>\n
7. Make it easy to reach a human<\/h3>\n
When should an AI chatbot hand over to a human?<\/h4>\n
8. Give users control over the experience<\/h3>\n
9. Test, learn and improve<\/h3>\n
How do you test an AI chatbot before launch?<\/h4>\n
AI chatbots gone wrong: real-world examples (and what we can learn from them)<\/h2>\n
Air Canada\u2019s AI chatbot gave a customer the wrong information<\/h3>\n
DPD\u2019s chatbot swore at a customer (and wrote a poem about how bad DPD was)<\/h3>\n
A Chevrolet dealership\u2019s chatbot agreed to sell a car for $1<\/h3>\n
The takeaway: Treat your AI chatbot like any other UX design project<\/h2>\n
\n