An assistant that only answers questions can live in a plain chat window. One that books a visit, submits an enquiry or changes a customer’s details can’t, and that difference is where AI agent UX design begins. People need to know what they’re talking to, what it’s about to do and how to stop it, before anything happens rather than after.
Trust is won or lost in the interface around the model: the first message, the confirmation card, the undo link, the button that reaches a person, and the ordinary contact form still on the page.
The patterns below draw on the 18 Guidelines for Human-AI Interaction that Microsoft researchers published in 2019 (now part of Microsoft’s HAX Toolkit), Google’s People + AI Guidebook and WCAG 2.2. If you’re still choosing a tool, start with chatbot, workflow or AI agent.
AI agent UX design in seven rules
- Say it’s AI in the first message, with what it can and can’t do.
- Show the working: link sources and show progress on multi-step tasks.
- Preview and confirm every booking, submission or change, with an explicit “yes” enforced in code.
- Make undo easy, and say before confirmation when something can’t be undone.
- Keep a person one tap away at every step, not only after the agent fails.
- Say “I don’t know” when the content runs out, and offer the next best route.
- Build the widget to WCAG 2.2 AA and keep the normal form and phone number in view, so the agent is an option, not a barrier.
AI disclosure: say what it is and what it can do
Say it’s AI, first and plainly
Put it in the widget header and the opening message, which can do three jobs in a few sentences:
I’m an AI assistant. I can answer questions about our services, check availability and book a site visit. I can’t change existing contracts or give legal advice, and you can talk to a person at any time.
A friendly name is fine beside a clear “AI assistant” label. A persona built to pass as a colleague, complete with a stock photo and fake typing delays, becomes a broken promise the moment someone notices. Regulation points the same way: Article 50 of the EU’s AI Act requires AI systems that interact directly with people to be designed so those people know they’re dealing with an AI, unless that’s obvious from the context.
Set expectations about scope and accuracy
Microsoft’s first two guidelines ask you to make clear what the system can do, and how well. In practice:
- Suggested prompts that match real capabilities. Starter buttons such as “Check availability” teach people what to ask. Never offer one the agent can’t complete.
- One honest line about accuracy. “Answers come from our website; our team confirms anything contractual.”
- Clarity about data. Say what happens to the conversation and link your privacy policy.
Good conversational UX design keeps the personality light and lets speed and accuracy persuade.
Check it yourself. Open the assistant on a phone. On the first screen, can you tell it’s AI, name two things it can do and one it can’t, and see how to reach a person?
Show sources and progress
Link the source of every factual answer
When the agent states a price, policy or opening time, link the page it came from, so customers can check it, your team can trace a wrong answer and the website stays the source of truth. A percentage confidence score rarely helps anyone decide; a link does. This only works if the pages are right, which is why preparing an AI knowledge base often matters more than the model.
Show what it understood and what it’s doing
The first of Jakob Nielsen’s ten usability heuristics, visibility of system status, applies directly:
- Echo the request back. “A site visit for two people, next week.” Misunderstandings surface before anything is booked.
- Show each step as it happens. “Checking the calendar… Found three free slots.” Not a spinner with no explanation.
- Give reasons in a clause. “Friday is the first slot with a consultant on site.” That’s Microsoft’s eleventh guideline (make clear why the system did what it did) in practice.
Preview and confirm before anything happens
This is the pattern that matters most, and the easiest to skip in a demo.
Separate talking from doing
An agent’s actions are either reads, which look something up, or writes, which book, send, submit or change data (what AI agents are and how they work explains the difference). Every write needs a confirmation step enforced in code, not only requested in the agent’s instructions. An instruction can be talked around; a check in code can’t. That’s why AI agent risks lists confirmation before consequences among the controls against prompt injection and excessive agency.
WCAG 2.2 sets a similar bar for the highest stakes. Success Criterion 3.3.4 requires that anything creating a legal commitment or financial transaction, or changing or deleting a user’s stored data, is reversible, checked for input errors, or open to review, correction and confirmation before it’s final. An agent acting for someone doesn’t lower that bar.
Design the confirmation card
Show a structured summary, not a paragraph buried in the chat. Every card needs:
Make confirmation a button tap, not a guess about whether “sure, sounds fine” meant yes.
Match the friction to the stakes
Confirming every trivial step trains people to tap “yes” without reading. Scale it instead:
| Type of action | Example | Pattern |
|---|---|---|
| Look-up (read only) | Checking hours or free slots | No confirmation; show the source |
| Reversible, low stakes | Holding a slot, saving a draft | Brief confirmation plus undo |
| Commitment to someone else | Booking a visit, sending an enquiry | Full preview card, explicit confirm, email receipt |
| Money, contracts or personal data | Payments, refunds, contract changes | A person, or a standard form with its own checks |
Ask rather than guess
“Next Friday” and “the usual address” are ambiguous. Microsoft’s tenth guideline, scope services when in doubt, becomes a clarifying question with options to tap: “Friday 2 October or Friday 9 October?” A question costs seconds; a wrong booking costs a phone call.
Undo, correction and a route to a person
Make undo easy and honest
The success message should carry the way back (“Visit booked for Friday 9 October at 10:00. Change or cancel.”), and so should the confirmation email. For messages sent on someone’s behalf, a short delay with an “Undo” button catches the regret that arrives two seconds after tapping send.
Make correction cheap
Let people fix one detail without starting again: editable fields on the card, and a “that’s not right” option that goes back one step, not to the beginning. That’s Microsoft’s ninth guideline, support efficient correction. WCAG 2.2’s Redundant Entry criterion (3.3.7) adds a useful rule: information someone has already entered in a process should be filled in or offered to select, not asked for again.
Keep a person one tap away
A “Talk to a person” control belongs in the widget header on every screen, not behind three failed attempts. The agent should recognise the request in any wording and language, and hand over at once, saying when someone will reply if nobody is online. AI customer service agents covers the handover itself.
When the agent doesn’t know
A confident wrong answer does more damage than an honest “I don’t know”, which is why Google’s People + AI Guidebook gives errors and graceful failure a chapter of their own. Each kind of not-knowing needs its own response:
| Situation | What the agent says | What it offers |
|---|---|---|
| Outside its scope | “That’s not something I can do here.” | The right person, page or form |
| No approved content | “I can’t find that on our website, so I won’t guess.” | To pass the question on |
| Didn’t understand | “I’m not sure I followed. Did you mean…?” | Two or three options to tap |
| Connected system down | “Our booking system isn’t responding right now.” | The booking form or phone number |
Never show the same fallback twice in a row: after a second misunderstanding, offer a person. Log every unanswered question too: together they list the content your website is missing.
Make the widget accessible and unobtrusive
A chat widget is part of every page it appears on, so if your website aims for WCAG 2.2 AA, the widget must meet it too. Check these first:
WCAG 2.2’s Consistent Help criterion (3.2.6) lists “a fully automated contact mechanism” among the kinds of help that, when repeated across pages, must keep the same order relative to other content, so give the launcher the same position everywhere. The web accessibility guide covers the wider standard.
Unobtrusive by default
- Don’t open automatically. A panel that springs open on page load hides content and interrupts screen readers.
- Make dismissal stick. Microsoft’s eighth guideline is to support efficient dismissal: closing the panel takes one tap, and it stays closed for the rest of the visit.
- Load it late. Chat scripts can be heavy; load the full widget when someone opens it. Third-party scripts and website speed explains why.
Make the agent an option, not a gatekeeper
The quickest way to lose trust is to make the assistant the only door. Some people prefer a form they can complete at their own pace, or want to speak to someone; some have been stuck in chatbot loops before; some use assistive technology that works better with a well-built form than a live conversation.
So keep the contact form, phone number and email where they are, beside your calls to action. Visible contact details are a trust signal in their own right, and website credibility explains how visitors look for them at the moment of deciding. The agent should offer them as a normal option, not a failure state, and pass on what it collected so nobody starts again. Because a solid form is the fallback every agent relies on, web form design is worth getting right first.
Then measure the whole picture. If chat conversations rise, form enquiries fall and total qualified enquiries stay flat, the agent is moving enquiries around, not adding any.
Test it the way customers will
Before launch, and after every significant change:
- Ask for something it can’t do.
- Ask for a person in three wordings, in each language you serve.
- Change your mind halfway through a booking.
- Complete a task by keyboard only, then with a screen reader.
- Tell it to ignore its rules, and confirm nothing changes.
- Do it all on a phone, on mobile data.
Build trust on a website that’s ready for it
Trustworthy AI experiences come from ordinary design discipline applied to a new kind of interface, and they rest on the website underneath: the agent answers from your pages, and every fallback leads back to your forms and contact details.
Before adding an assistant, a free website audit checks those foundations, from how your key pages work on phones to how easily visitors can reach you without it. Want to talk through what your website needs? Get in touch.