Conversational UI Design

Instructions

Conversational Design Principles

• Turn-Taking: Clearly communicate the system state at every moment — listening, thinking, responding. Users must never wonder whether the system heard them. Use typing indicators, streaming text, or progress signals to bridge latency.
• Grice’s Maxims: Every system response should be truthful (don’t fabricate), relevant (answer what was asked), appropriately informative (enough detail, not a wall of text), and clear (plain language, no jargon in system messages).
• Consistent Persona: Define a persona with specific voice characteristics — tone (warm, direct, professional), vocabulary level (plain language vs. domain-specific), and cadence (short punchy sentences vs. flowing explanations). The persona stays consistent across all interactions.
• No Dead Ends: Every response must give the user a path forward. If the system cannot help, offer alternatives — rephrase the question, try a different approach, restart the flow, or escalate to a human.

AI Interface Patterns

• Disclosure & Trust:
• AI-generated content must be identifiable as such — visual labels, metadata, or consistent framing
• Provide confidence signals when appropriate (“Based on 3 matching records…” not unqualified assertions)
• Offer citation or sourcing (“How did you get this?”) for factual claims
• Allow users to correct, regenerate, and rate responses — feedback loops build trust
• Progressive Complexity:
• Start with the simplest interaction pattern (single-turn Q&A) before introducing multi-turn or agentic flows
• Provide suggested prompts and example queries for new users — don’t drop them into a blank text field
• Reveal advanced capabilities progressively; show what’s possible without overwhelming on first contact
• Loading & Latency:
• Prefer streaming responses over spinners — partial information arriving is better than waiting in silence
• Use skeleton states for structured outputs that take time to generate
• Provide accurate time estimates for long operations (“This usually takes 10-15 seconds”) rather than indefinite loading

Voice UI Design

• Prompts: Keep voice prompts short and action-oriented. Front-load the verb. “Say the city name” not “Please tell me which city you would like to search for.”
• Help: Provide always-available help commands (“say ‘help’ at any time”). Users cannot scan a voice interface — discoverability requires explicit guidance.
• Audio Cues: Use earcons (short distinctive sounds) for state changes — message received, processing complete, error occurred. Consistent audio signatures reduce cognitive load.
• Multi-Modal Fallback: When voice fails (noisy environment, recognition error), offer a graceful visual fallback. Never strand users in a voice-only loop with no escape hatch.

Error & Failure States

• Error Classification: Distinguish between user error (ambiguous input), AI uncertainty (low-confidence response), and system failure (service unavailable). Each requires a different tone and recovery path.
• Blame Frame: Never blame the AI or the user. Use neutral, forward-looking language: “I need a bit more detail to help with that” — not “I couldn’t understand you” or “That’s not something I can do.”
• Recovery Options: Every error state offers concrete alternatives — rephrase the request, restart the conversation, try a simpler version, or contact human support. List options explicitly; don’t make users guess.
• Failure Logging: Log failure patterns (common misunderstood intents, frequent error triggers, abandonment points) to drive iterative improvement. Review failure logs weekly.

Best Practices

• Write the voice and tone guide before designing any UI — persona definition is the foundation
• Define persona moods: neutral (default), supportive (help/guidance), urgent (errors/warnings), celebratory (task completion/milestones)
• Test with real tasks from real users, not scripted demos — scripted tests miss the messy reality
• Map every conversation path including adversarial inputs (gibberish, prompt injection, off-topic, abusive)
• Empty state and onboarding are the most critical screens — they set expectations for the entire experience
• Design mobile-first for chat interfaces — the majority of chat interactions happen on small screens
• Never let the system sound infallible — calibrated uncertainty builds more trust than false confidence
• No jargon in system messages; save technical language for developer-facing logs