tannhatcms/jarvis/ams-chatbot-ui-patterns

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.

1. Design the input area: text field, suggestion chips, attachments, voice — only what the bot

actually supports.

1. Build rich components for your top intents: if users book appointments, design the appointment

card first.

1. Add feedback on every assistant message; wire it to your eval pipeline.
2. Design the failure states: confusion, out-of-scope, errors, escalation — each with a clear

next step.

1. 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.