Recommended Free Tools
iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
A better chatbot UI makes three things obvious at every moment: what the assistant can do, what it understood, and what the user can do next. Build the interface as a complete interaction system—not just a message list—with clear participant identities, visible scope, structured task flows, accessible controls, and recovery paths for misunderstandings, wrong actions, and technical failures.
This guide shows how to design that system for customer support, internal tools, ecommerce assistants, and general AI products. The recommendations draw on the Visa Product Design System chat pattern, Microsoft conversational UX and accessibility guidance, Microsoft Copilot Studio documentation, Google’s conversation-error guidance, and Microsoft Azure Bot Service guidance.
1. Start with a legible conversation structure
Users should be able to identify the conversation area, distinguish their messages from the assistant’s, and find the input control without instruction. A recognizable structure reduces the mental work required to follow a task.
Do these 3 things before closing this tab:
1Clear out junk files and repair common Windows errors2Scan for outdated or missing drivers - takes under a minute3Repair Windows errors before they cause bigger problemsUse a clear visual hierarchy
- Conversation region: Give messages a stable, scrollable area with enough spacing to separate turns. Make the beginning and the latest response easy to locate.
- Input region: Keep the text field and send action visually associated with the conversation. The field should expose its purpose through a persistent label or an unambiguous prompt, not placeholder text alone.
- Participant distinction: Use alignment, color, typography, or labeled containers to differentiate the user and assistant. Do not rely on color alone; the distinction must survive high-contrast modes and grayscale viewing.
- Conversation controls: Include controls such as copy, retry, stop generating, or flag only when they help the user’s task. The Visa chat pattern treats avatars and message actions as optional elements, not requirements.
- Navigation: Add conversation history, topic navigation, or a back action when the product has multiple tasks. Do not force users to search through one uninterrupted transcript to return to an earlier job.
Make the start and end of an interaction obvious. A welcome state can explain the assistant’s role and provide examples; a completed state can show the result, the next action, or a handoff option. Avoid decorative motion that makes it harder to see new content or operate the controls.
#1 Best Overall
Identify the assistant honestly
Tell users whether they are interacting with an AI system, a human, or a combination. Ambiguity changes expectations about speed, authority, privacy, and accountability. Use a direct label such as “AI assistant” or “Automated support,” and explain when a human may join.
State how conversation data is handled in the product’s actual privacy language. Visa’s chat guidance emphasizes transparency about data handling; do not imply that messages are private, retained for a particular period, or excluded from training unless your implementation and policy support that statement.
2. Set scope before the first difficult request
Users cannot form a useful mental model from a blank input box. Explain the assistant’s capabilities, limits, and the kinds of requests it can complete before the user has to guess.
Describe jobs, not model features
“I can check an order, change a delivery address, and explain return policies” is more useful than “I use natural-language AI.” Examples should represent real supported tasks and should not promise actions the assistant cannot perform.
If the assistant covers only a limited domain, say so. For example, identify supported account types, regions, products, or business hours. When a request is outside scope, the assistant should explain the boundary and offer the nearest useful route instead of producing a confident but irrelevant answer.
Offer prompts without forcing a script
Suggestion chips, starter questions, and examples reduce blank-page anxiety. They should be invitations, not the only permitted syntax. Microsoft’s conversational UX guidance recommends supporting varied phrasing so users do not have to discover an exact command.
Accept natural variations such as “Where’s my package?” and “Can you tell me the delivery status?” Map both to the same intent when the required information is available. If a request is ambiguous, ask for the missing detail in context rather than returning a generic failure.
Crashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minuteWindows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstall3. Choose the right amount of conversational structure
Open-ended chat is flexible, but unrestricted conversation can hide required information and make errors difficult to diagnose. Guided steps are predictable, but excessive structure feels like a form with extra typing. Choose deliberately based on task complexity and risk.
| Pattern | Best fit | Design strengths | Trade-offs |
|---|---|---|---|
| Open text conversation | Exploration, explanations, varied support questions | Accepts natural wording and unexpected details | Intent and missing information may be unclear |
| Suggested prompts or quick replies | Common, short tasks | Makes supported actions discoverable and reduces typing | Can over-constrain users if no free-text route exists |
| Guided multi-step flow | Tasks with required fields or several decisions | Shows progress and collects information in a known order | Can feel slow when users already know the answer |
| Form or structured card inside chat | Addresses, dates, product selection, sensitive values | Improves formatting and validation | Needs an accessible keyboard and screen-reader implementation |
| Human handoff | Requests outside capability, high emotion, or consequential cases | Provides a reliable route when automation reaches its limit | Requires context transfer and clear ownership |
Use a hybrid approach for most support experiences: accept free text, detect the task, then present only the fields or choices needed to complete it. Let users add relevant information early; do not make them repeat details already supplied.
4. Design multi-part requests as manageable steps
People often combine goals: “Change my shipping address, tell me whether the package has shipped, and email the receipt.” A good UI acknowledges all parts, separates actions that need different permissions, and makes progress visible.
- Parse and confirm the plan: Restate the recognized tasks briefly: “I can update the address and check shipment status. The receipt request requires your email preference.”
- Resolve blocking information first: Ask for the order number or account identity before collecting optional details.
- Group related questions: Request information that belongs to the same decision together, but avoid a dense list of unrelated questions.
- Show completion state: Mark each finished action and keep the remaining tasks visible.
- Handle interruptions: If the user asks a side question, answer it and preserve the original task context when it remains relevant.
Microsoft’s guidance recommends retaining context when users change direction or interrupt. Provide a visible way to resume, such as “Return to address update,” rather than silently discarding the unfinished task.
Free tools Windows power users keep installed
One-click scans. No signup required.
5. Treat failures as different interface states
“I didn’t understand,” “I did the wrong thing,” and “the service is unavailable” are not the same problem. Each needs a different recovery path.
Rank #3
Misunderstanding or no match
When the assistant cannot identify the user’s intent, ask one focused, context-specific question. Include concrete options or examples that narrow the ambiguity:
- “Do you want to track an order, start a return, or change your address?”
- “Which account are you asking about: billing, shipping, or subscriptions?”
After an initial failure, add useful structure instead of repeating “Please try again.” Preserve the user’s original wording so they can correct one detail rather than start over.
Incorrect interpretation or execution
If the assistant selected the wrong item or performed an unwanted action, show what happened and provide an undo or correction route. For consequential actions—such as cancelling an order, changing payment details, or deleting data—use a confirmation that states the exact effect.
The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Do not confirm every routine step. Microsoft’s error guidance warns that constant confirmation adds friction; reserve it for actions whose cost or irreversibility justifies the interruption.
Technical or system failure
Tell the user whether the problem is a timeout, unavailable integration, permission issue, or another known condition. Offer a workaround only when it is likely to work. “Try again later” is not useful when the same failed dependency will still be unavailable.
Give an actionable next step: retry once, continue without the unavailable feature, open a relevant help article, or contact a human. Keep any information already entered so a transient failure does not erase the user’s work.
6. Build a graceful fallback and handoff
A handoff is part of the product, not an apology at the edge of the design. Microsoft Copilot Studio guidance recommends no more than two fallback questions in one session before directing the user elsewhere. Treat that as a practical conversational guardrail, not a universal law for every product.
Quick wins for a faster PC:
Clear out junk files and repair common Windows errorsFree Scan →Scan for outdated or missing drivers - takes under a minuteDriver Scan →Repair Windows errors before they cause bigger problemsFix Now →Microsoft states: “A good handoff effectively remembers where the user left off and helps them continue the task they set out to accomplish.” A useful handoff therefore does four things:
- Explain the transition: Tell the user that automation cannot complete this request and that another route is available.
- Name the next action: Provide a button or clear instruction to start chat with an agent, request a callback, open a ticket, or use a specific support resource.
- Transfer context: Pass the conversation, identifiers, selected options, and relevant form values to the next person or system.
- Set expectations: State hours, queue behavior, or response timing only when those details are accurate for the product.
Never make the user repeat the entire story merely because ownership changed. If a human is unavailable, preserve the transcript and offer a way to submit the issue asynchronously.
7. Make accessibility part of the base interaction
Accessibility is not a visual polish pass. It affects the message model, focus behavior, prompts, controls, and recovery logic.
Keyboard and focus behavior
- Every action—send, stop, retry, copy, expand, upload, and handoff—must be reachable and operable with a keyboard.
- Keep focus predictable after a new message, modal, error, or handoff. Do not move focus unexpectedly while a user is typing.
- Provide a visible focus indicator and ensure it remains visible against the background.
- Allow users to submit without requiring a pointer gesture; support the expected keyboard command while preserving a way to insert a line break.
Screen readers and semantics
- Expose the conversation as a meaningful sequence of user and assistant turns, not as an unlabeled collection of visual containers.
- Announce new assistant content without repeatedly interrupting users who are reviewing earlier messages.
- Give every button a specific accessible name, including multiple “Copy” or “Retry” buttons that belong to different messages.
- Associate validation errors with the field or message that needs correction.
Contrast, reflow, and cognitive load
Check high-contrast and reflow modes, and verify that long responses, code, tables, and error messages are not truncated or hidden. Use concise prompts, group related items, and let users control the pace and sequence of the interaction. Microsoft’s accessibility guidance references WCAG 2.1; confirm the current applicable standard and jurisdiction-specific obligations during implementation.
Offer multiple input or output modes only when they add meaningful flexibility. A voice option, file upload, or rich card should have an equivalent path for users who cannot or do not want to use that mode.
Best Value
8. Make privacy and trust visible in the UI
Trust cues should appear where decisions are made. Explain what the assistant can access before asking for account, payment, health, or identity information. Distinguish retrieved account data from generated explanations, and show when an action requires authentication or permission.
Do not expose sensitive values in a transcript preview, browser notification, or shared-screen suggestion. Provide controls to remove or start a new conversation when the product handles personal information. Privacy wording must match the actual retention, access, and deletion behavior.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.9. A practical design workflow
- Map user goals: List the jobs the assistant must complete, the information each job requires, and the actions that change user data.
- Define capability boundaries: Write supported and unsupported examples in plain language.
- Sketch the states: Include welcome, active conversation, loading, clarification, confirmation, success, no-input, no-match, technical error, and handoff states.
- Choose controls by risk: Use quick replies for common choices, structured inputs for constrained values, and confirmations only for high-impact actions.
- Specify context rules: Decide what persists when the user edits an answer, asks a side question, or resumes a paused task.
- Design recovery copy: For every failure, document what the assistant knows, what it does not know, and the exact next route.
- Prototype with real phrasing: Test misspellings, incomplete requests, long multi-part messages, interruptions, and users who reject the suggested option.
- Audit accessibility: Test keyboard navigation, screen readers, high contrast, zoom and reflow, focus order, and announcement behavior.
- Validate handoff continuity: Confirm that the next agent or channel receives the details needed to continue without repetition.
10. Compare interaction choices by task and failure mode
There is no single best chatbot pattern. Select the least restrictive design that still makes the task understandable and recoverable.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
| Decision | Use the more structured option when… | Use the more open option when… |
|---|---|---|
| Conversation versus guided steps | The task has required fields, several decisions, or a high cost of omission | Users ask varied questions or need explanations and exploration |
| Clarification versus options | The missing detail is specific and users may answer naturally | The valid choices are known and a selection will remove ambiguity |
| Confirmation versus immediate action | The action is consequential, costly, or difficult to reverse | The action is routine, reversible, and low risk |
| Retry versus workaround | The failure may be transient and one retry has a reasonable chance | A dependency is known to be unavailable or the same attempt will fail |
| Bot continuation versus handoff | The request remains within capability and context is intact | The assistant lacks authority, the user has reached the fallback limit, or human judgment is needed |
11. Common chatbot UI mistakes
- Hiding the scope: Users discover limitations only after investing several turns. Put capability examples in the entry state.
- Using generic apologies: “Sorry, I didn’t get that” does not tell users how to recover. Ask a targeted question or show valid options.
- Overloading one turn: A long questionnaire increases omissions and makes correction difficult. Collect information in logical groups.
- Erasing context after an interruption: Preserve the original task and let users resume it explicitly.
- Confirming everything: Repeated prompts slow routine tasks and train users to approve without reading.
- Making handoff a dead end: A phone number without transferred context shifts the burden to the user.
- Treating accessibility as contrast alone: A visually attractive chat can still fail keyboard, screen-reader, focus, reflow, or cognitive-load checks.
- Presenting generated text as certainty: Distinguish explanations from verified account actions and give users a correction path.
12. Final pre-release checklist
- Can a first-time user tell whether the assistant is AI or human?
- Are supported tasks and meaningful examples visible before the first request?
- Can users type natural variations instead of memorizing commands?
- Are user and assistant turns, message boundaries, and current focus obvious?
- Does every no-match, wrong-action, and technical-error state have its own recovery?
- Can users undo or correct consequential actions?
- Does a handoff preserve the transcript and unfinished work?
- Can every control be used with a keyboard and understood by a screen reader?
- Does the interface remain usable in high contrast, zoom, and reflow?
- Have you tested interruptions, multi-part requests, empty input, long responses, and unavailable integrations?
Frequently Asked Questions
Should a chatbot UI use buttons or free-text input?
Use both when possible. Free text handles varied wording and unexpected details; buttons or quick replies make known choices visible and reduce ambiguity. Keep a free-text route available unless the task genuinely requires a constrained selection.
What should the chatbot say when it does not understand?
Ask one context-specific clarifying question and provide concrete examples or options. Preserve the user’s original request so they can correct the ambiguous detail instead of starting over.
How many times should a chatbot retry before handing off?
Microsoft Copilot Studio guidance recommends no more than two fallback questions in one session before redirecting. Treat that as a practical limit for text experiences and adjust it only when your task, audience, and support route justify a different threshold.
When should a chatbot ask for confirmation?
Confirm actions that are costly, consequential, or difficult to reverse, such as deleting data or changing payment details. Avoid confirmations for routine, low-risk, reversible actions.
What accessibility standard should guide chatbot UI work?
Microsoft accessibility guidance references WCAG 2.1. Check the current applicable WCAG version and any jurisdiction-specific requirements when implementing and auditing the product.
The Bottom Line
Design the chatbot UI as a transparent, stateful service: show its scope, accept natural language, guide complex work, distinguish failure types, preserve context, and provide an accessible human route when automation stops being useful.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
