AI UX PlaygroundNewsletterJoin 2K+ AI designers and PMs on Substack. New teardowns, patterns, and prompts as they drop.

Audio

Voice Visualizer

Show real-time motion or waveform feedback during listen, think, and speak states. Without it, silence feels like the mic died.

Interactive demo

Voice visualizer

Overview

How might we design voice visualizer so people can trust and act on AI output?

When to use

  • Essential for voice assistants, voice-first applications, and hands-free interfaces where visual feedback enhances user understanding of voice interaction states.

When to skip

  • Pure text chat with no voice path.
  • Accessibility settings request reduced motion.
  • Background voice where visual feedback is irrelevant.

Rules

  • Same animation for listening and speaking, so state is ambiguous.

  • Visualizer with no caption or icon for deaf or low-vision users.

  • Flashy motion that distracts from transcript content.

  • No idle state when mic is off but UI looks “live”.

Evidence

ProductImplementation
SiriOrb and waveform states on iPhone and HomePod screens.
Google AssistantAnimated dots and color shifts for listen vs respond.
AlexaLight ring and screen pulse tied to audio activity.
ChatGPTVoice mode orb with listening and speaking animations.

Real-world examples

See all

FAQ

What states should a voice visualizer show?

At minimum: idle, listening, processing, and speaking. Optional: error, muted, and wake-word armed.

Is a visualizer required if you have a transcript?

Transcripts help content; visualizers help timing. Pair both for voice-first UX.

How do you respect reduced motion?

Offer static icons or subtle opacity changes instead of looping waveforms.

What about latency?

Show processing state within ~200ms of end-of-speech so users do not talk over the model.