Chatbot UI Patterns

The interface is the product for most chatbot users. These patterns cover what works: message design, guidance controls, rich content, feedback loops, and the accessibility details that separate professional bots from demos.

Overview

Good chat UI reduces the user's cognitive load: clear message hierarchy, suggested next actions, rich rendering of structured content, and obvious paths when things go wrong. The patterns below are interface conventions proven across consumer and enterprise bots — layout, components, and micro-interactions that make conversations feel effortless.

When to use

• Designing or redesigning a chatbot interface from scratch.
• Auditing an existing bot UI for usability issues.
• Adding rich interactions: cards, carousels, forms inside chat.
• Making a bot accessible to keyboard and screen-reader users.

Core concepts

• Message hierarchy: user vs. assistant visually distinct; timestamps subtle; avatars minimal. The conversation should scan like a dialogue, not a wall of bubbles.
• Suggestion chips: tappable follow-ups and common queries above the input. They teach users what the bot can do — the single best onboarding device.
• Rich cards: structured content (products, appointments, results) rendered as cards with actions, not as paragraphs. Carousels for multiple options.
• Progressive disclosure: long answers with expandable sections; tool activity collapsible. Don't overwhelm; let users drill in.
• Feedback controls: thumbs up/down per message, with optional reason. Feeds evals and model improvement — make it one tap.
• Empty and error states: first-run suggestions, graceful "I didn't understand" with alternatives, offline/retry states. Designed, not defaulted.

Practical workflow

1. Define the message anatomy: parts (text, cards, chips, citations) and how each renders on desktop and mobile.
2. Design the input area: text field, suggestion chips, attachments, voice — only what the bot actually supports.
3. Build rich components for your top intents: if users book appointments, design the appointment card first.
4. Add feedback on every assistant message; wire it to your eval pipeline.
5. Design the failure states: confusion, out-of-scope, errors, escalation — each with a clear next step.
6. Accessibility pass: keyboard navigation, screen-reader labels, focus management, color contrast, reduced-motion support.

Chat UI checklist:
[ ] User/assistant visually distinct, scannable
[ ] Suggestion chips teach capabilities
[ ] Top intents have rich (non-text) renderings
[ ] Feedback control on every assistant message
[ ] Designed empty, error, and escalation states
[ ] Keyboard + screen-reader navigable
[ ] Works on small screens without horizontal scroll

Common pitfalls

• Bubbles for everything: long answers as giant bubbles are unreadable. Use structured layouts for structured content.
• No guidance: an empty input box with no hints. Users don't know what to ask — chips and examples fix this.
• Feedback nobody reads: collecting ratings into a void. Wire feedback to evals and review it.
• Desktop-only design: chat is heavily mobile. Design small-screen first.
• Inaccessible by default: divs instead of buttons, no ARIA, focus lost on updates. Accessibility is a design requirement, not a polish step.
• Citations as an afterthought: grounded bots need visible sources. Design citation display into the message anatomy.