Skip to main content

Conversational UI Research

Research conducted December 2024 on best practices for AI-powered conversational preference collection interfaces.

Sources​

Market Context​

The conversational AI market is projected to grow from $13 billion in 2024 to approximately $50 billion by 2030 (25% CAGR). Gartner predicts that by 2025, 50% of enterprise interactions will happen through conversational interfaces.

Key Findings​

1. Onboarding & Capability Disclosure​

Users should be given a thorough introduction to the AI chat format, delineating its capabilities and limitations. It's vital to acknowledge that generative AI, despite its sophistication, is not infallible and can make errors.

Best Practice: The onboarding phase should familiarize users with the conversational interface and set realistic expectations regarding the chatbot's functionality.

2. Guided Interaction Patterns​

Guided interaction allows users to respond via buttons or messages, minimizing confusion for less tech-savvy users. Offering a mix of button options and typed commands creates an interactive conversation.

Best Practice: Account for both mandatory variables and optional variables when designing chat flow. Some chatbots fall short in their ability to appropriately gather customer context.

3. Prompt Guidance​

Assisting users in crafting effective prompts is part of the educational process. Users benefit from subtle hints about how to structure their responses.

Best Practice: Include placeholder text or examples that guide users toward better responses without being prescriptive.

4. Error Recovery & Misunderstanding Handling​

Lack of personalization and failing to set clear expectations can frustrate users. When AI misunderstands, users need clear pathways to correct the conversation.

Best Practice: Provide explicit "That's not what I meant" or correction mechanisms beyond just regenerate buttons.

5. Simplicity & Minimal Friction​

"Using the chatbot shouldn't feel like operating a plane." Offering full access with minimal elements reduces the time between accessing the product and getting answers.

Best Practice: Keep language as simple as possible. The golden rule of conversational UX is simplicity.

6. Visual Typing Indicators​

Real-time responsiveness with typing indicators simulates a natural conversation flow.

Best Practice: Show typing animations during AI processing to maintain engagement.

WCAG Accessibility Requirements​

Touch Target Sizes (WCAG 2.2)​

Input actions (send/mic/attach buttons) must be at least 24×24 CSS pixels.

Live Regions​

  • Use aria-live="polite" for normal messages
  • Reserve aria-live="assertive" for urgent alerts

Message Container Structure​

  • Use role="log" or role="feed" for the message stream
  • Provide keyboard navigation patterns: Home/End to jump to first/last, Up/Down to navigate messages

Dialog Patterns​

  • Use role="dialog" for modals with focus trapping
  • Support Escape key to close

Language & Visual Design​

  • Proper color contrast (WCAG AA minimum)
  • Large enough fonts for readability
  • Avoid jargon and acronyms in chatbot responses

React Implementation Insights​

The assistant-ui library provides reference implementation for:

  • Streaming message display
  • Auto-scrolling with user override
  • Accessibility by default
  • Keyboard shortcuts
  • Retries and error handling
  • Markdown and code highlighting

WCAG 2.2 in React​

  • Semantic HTML forms the foundation (<nav>, <main>, <article>)
  • ARIA enhances dynamic UIs with roles like 'button' or 'alert'
  • ARIA patterns prevent 70% of common accessibility pitfalls

AI-Specific Accessibility (AAG v0.1)​

Emerging guidelines for AI interfaces include:

  1. Multimodal Support: Text, speech, visuals — users should be able to choose
  2. Keyboard & Voice Navigation: AI must support interaction beyond mouse/touch
  3. Adjustable Pace & Interruptibility: Users should control timing of AI outputs
  4. Consistent Interaction Patterns: Navigation and behavior should be predictable

Implementation Checklist​

Based on this research, a conversational UI should have:

  • Capability disclosure at conversation start
  • Guided input with button options + free text
  • Placeholder text with prompt guidance
  • "That's not what I meant" correction action
  • Typing indicators during AI processing
  • Progress indication for multi-step flows
  • Session persistence for interrupted conversations
  • Touch targets ≥ 24×24 CSS pixels
  • role="log" on message container
  • aria-live regions for new messages
  • Home/End keyboard navigation
  • Edit previous answers capability
  • Smart auto-scroll (pause on user scroll)