Conversational UI Pattern Library
50+ patterns for chatbots and conversational interfaces. Each pattern includes usage guidelines, do's and don'ts, and code examples.
Overview
Conversational interfaces are fundamentally different from traditional GUIs. Users expect natural interaction, context awareness, and intelligent responses. This pattern library provides battle-tested solutions for common conversational UI challenges, from handling ambiguity to managing multi-turn conversations.
Pattern Categories
The library organizes patterns into six categories: Conversation starters (onboarding, prompts, suggestions), Message types (text, rich media, quick replies), Input methods (typing, voice, hybrid), Error handling (disambiguation, fallbacks, escalation), Context management (memory, reference, continuation), and Feedback loops (confirmation, correction, rating).
Implementation Guidance
Each pattern includes detailed guidelines for when to use it, how to implement it, common pitfalls to avoid, and accessibility considerations. Code examples show how to implement patterns in popular frameworks, and Figma components provide ready-to-use design elements.
What's Inside
- 50+ conversational UI patterns
- Onboarding flow templates
- Message bubble variations
- Quick reply patterns
- Voice interaction patterns
- Error and fallback states
- Context indicator components
- Feedback mechanisms
- Code implementation examples
- Accessibility guidelines
Who It's For
- Designers building chatbots
- Conversational AI product teams
- Developers implementing chat UIs
- Product managers planning conversational features
- Anyone designing voice interfaces
How to Use
- 1.Download Figma file and documentation
- 2.Review pattern categories and use cases
- 3.Identify patterns relevant to your product
- 4.Study implementation guidelines
- 5.Customize patterns for your brand
- 6.Reference code examples for development
- 7.Test patterns with users
- 8.Iterate based on feedback
File Info
Found This Useful?
Get in touch to talk through how these patterns could apply to your product.
More Resources
AI UX Design System Template
Everything you need to design consistent, user-friendly AI/ML products
User Research Plan Template
Plan, conduct, and synthesize user research for AI products
Reading List: AI for Designers
Essential reading to level up your AI design knowledge