curiositech/windags-skills

App Sound Design

Makes the design decisions about when, what, and how sounds should appear in applications. This is not about audio engineering (that is sound-engineer) or retro sound effects (that is win31-audio-design). This skill answers the hardest question in UI sound: should this interaction make a noise at all? And if yes, what kind?

When to Use

Use for:

• Deciding which interactions in a web or mobile app should have sound feedback
• Selecting appropriate sound characteristics for notifications, confirmations, errors
• Creating AI-generated UI sounds with ElevenLabs, AudioCraft, or Stable Audio
• Implementing procedural sounds with Web Audio API
• Pairing haptic feedback with audio on iOS/Android
• Establishing a sonic brand identity for a product
• Auditing an app's existing sound design for annoyance vs. helpfulness

Do NOT use for:

• Professional audio mixing/mastering -> use sound-engineer
• Windows 3.1 themed system sounds -> use win31-audio-design
• Music composition or soundtrack -> use sound-engineer
• Accessibility screen reader audio -> use accessibility-expert
• Game audio systems (3D positional, dynamic music) -> use sound-engineer

The Fundamental Question: Should This Make a Sound?

Does the interaction need FEEDBACK?
|
+-- User initiated action (tap, click, submit)?
|   +-- Is the result visible on screen?
|   |   +-- YES and obvious --> Sound is OPTIONAL (often skip)
|   |   +-- YES but subtle --> Sound HELPS (gentle confirm)
|   |   +-- NO (background process) --> Sound RECOMMENDED
|   +-- Is the action destructive?
|       +-- YES --> Sound RECOMMENDED (distinct warning tone)
|       +-- NO --> Sound OPTIONAL
|
+-- System initiated event (notification, alert)?
|   +-- Is the user in the app?
|   |   +-- YES --> Subtle in-app sound
|   |   +-- NO --> Notification sound (follow OS conventions)
|   +-- Is it time-sensitive?
|       +-- YES --> More urgent/attention-grabbing sound
|       +-- NO --> Can be silent or ambient
|
+-- Ambient/atmospheric (background state)?
    +-- Does the app benefit from presence? --> Subtle ambient
    +-- Is the user working/focused? --> SILENCE

---

The UI Sound Vocabulary

Every application needs sounds from these categories. Not all categories are required — most apps need 3-5.

Tier 1: Essential (Most Apps Need These)

Sound Type	Purpose	Character	Duration	Example
Confirm	Action succeeded	Bright, rising pitch	100-300ms	Slack message sent
Error	Action failed	Low, flat or descending	200-400ms	Form validation fail
Notification	New information arrived	Distinctive, medium energy	300-600ms	Slack incoming message

Tier 2: Polish (Apps That Care)

Sound Type	Purpose	Character	Duration	Example
Transition	Navigation between views	Subtle whoosh or tap	50-150ms	iOS page turn
Toggle	Binary state change	Crisp click or snap	50-100ms	Switch on/off
Hover	Mouse-over feedback	Barely audible tick	20-50ms	Menu item hover
Selection	Item chosen from list	Soft pop or pluck	50-150ms	Dropdown select
Delete	Destructive removal	Hollow thud or swoosh	150-300ms	Trash action

Tier 3: Delight (Apps With Personality)

Sound Type	Purpose	Character	Duration	Example
Achievement	Milestone reached	Musical, celebratory	500ms-2s	Duolingo lesson complete
Ambient	Background presence	Looping, atmospheric	Continuous	Noisli, Forest app
Brand Sting	App open/close	Iconic, memorable	500ms-1.5s	Netflix ta-dum
Easter Egg	Hidden delight	Playful, unexpected	Variable	Konami code reward

---

Platform Conventions

Apple (iOS / macOS)

Apple HIG mandates specific audio behaviors:

• System sounds are sacred: Never override or replace system alert sounds
• Respect the silent switch: If the physical mute switch is on, your app sounds STOP (except media playback)
• Audio session categories matter:
  • ambient — mixes with other audio, respects silent switch
  • soloAmbient — silences other audio, respects silent switch
  • playback — ignores silent switch (for media apps ONLY)
• Haptics pair with sounds: Use UIImpactFeedbackGenerator alongside audio

Apple's Sound Characteristics:

• Clean sine waves and filtered tones
• Minimal overtones (pure, not buzzy)
• Short decay (sounds do not linger)
• Consistent volume relative to system sounds

// iOS: Play a system sound
import AudioToolbox
AudioServicesPlaySystemSound(1057) // Standard keyboard click

// iOS: Haptic + custom sound
let generator = UIImpactFeedbackGenerator(style: .light)
generator.impactOccurred()
// Play your custom sound simultaneously

Material Design (Android)

Google's sound design principles:

• Functional first: Sound should inform, not decorate
• Subtle by default: UI sounds should be quieter than media
• Haptic-first on Android: Prefer haptic feedback; add sound only when haptics are insufficient
• Sound ON only when meaningful: Default state should be silent for most interactions

Material Sound Characteristics:

• Short, crisp percussive sounds
• Subtle harmonic content (not pure sine waves)
• Slightly warmer than Apple (more mid-frequency)
• Designed to work on low-quality phone speakers

Web Apps

Web has the WEAKEST sound conventions, which means more freedom but also more risk of annoyance.

• Never autoplay sound — browsers block it and users hate it
• Require user gesture first: Web Audio API requires a user interaction before playing
• Provide volume control: Always let users mute or adjust
• Consider headphone users: What sounds fine on laptop speakers may be jarring on headphones

---

Creating Sounds with AI

ElevenLabs Sound Effects

Best for: Realistic, high-quality UI sounds with specific character descriptions.

# Generate a confirmation chime
curl -X POST "https://api.elevenlabs.io/v1/sound-generation" \
  -H "xi-api-key: YOUR_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "text": "Short bright upward chime, digital, clean sine wave, 200ms, UI confirmation sound",
    "duration_seconds": 0.5
  }'

Effective prompts for ElevenLabs:

• Confirm: "Short bright ascending two-note chime, clean digital, warm, 200ms"
• Error: "Low hollow thud with slight buzz, digital, 300ms, not harsh"
• Notification: "Gentle three-note xylophone melody, friendly, 400ms"
• Toggle: "Crisp mechanical click, plastic switch, 50ms"
• Delete: "Soft hollow swoosh moving downward, 200ms"
• Achievement: "Bright ascending arpeggio, sparkly, celebratory, 1 second"

Meta AudioCraft (Open Source)

Best for: Developers who want full control and no API costs.

from audiocraft.models import AudioGen
from audiocraft.data.audio import audio_write

model = AudioGen.get_pretrained('facebook/audiogen-medium')
model.set_generation_params(duration=0.5)

# Generate UI sounds
descriptions = [
    "short digital confirmation beep, ascending pitch, clean",
    "low error buzz, brief, not harsh, digital",
    "gentle notification chime, two notes, pleasant",
]

wav = model.generate(descriptions)
for i, w in enumerate(wav):
    audio_write(f'ui_sound_{i}', w.cpu(), model.sample_rate)

Stable Audio Open

Best for: Longer ambient sounds, background textures, brand stings.

import torch
from stable_audio_tools import get_pretrained_model
from stable_audio_tools.inference.generation import generate_diffusion_cond

model, model_config = get_pretrained_model("stabilityai/stable-audio-open-1.0")

# Generate ambient background
conditioning = [{
    "prompt": "calm ambient digital texture, warm low hum, suitable for productivity app background, loopable",
    "seconds_total": 10
}]

Post-Processing Checklist

AI-generated sounds need cleanup before shipping:

1. Trim silence — remove leading/trailing dead air
2. Normalize volume — all UI sounds should be at consistent perceived loudness
3. Fade in/out — 5-10ms fade prevents clicking artifacts
4. Compress dynamic range — UI sounds should have consistent volume
5. Export as WAV (for native) or OGG/MP3 (for web, under 50KB per sound)
6. Test on target speakers — phone speakers cut frequencies below 200Hz

---

Web Audio API: Procedural Sounds

For web apps, generating sounds procedurally eliminates the need for audio files entirely. Smaller bundles, instant availability.

class UISound {
  private ctx: AudioContext | null = null;

  private getContext(): AudioContext {
    if (!this.ctx) {
      this.ctx = new AudioContext();
    }
    return this.ctx;
  }

  /** Bright ascending confirmation */
  confirm(): void {
    const ctx = this.getContext();
    const osc = ctx.createOscillator();
    const gain = ctx.createGain();

    osc.connect(gain);
    gain.connect(ctx.destination);

    osc.type = 'sine';
    osc.frequency.setValueAtTime(600, ctx.currentTime);
    osc.frequency.linearRampToValueAtTime(900, ctx.currentTime + 0.15);

    gain.gain.setValueAtTime(0.15, ctx.currentTime);
    gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + 0.2);

    osc.start(ctx.currentTime);
    osc.stop(ctx.currentTime + 0.2);
  }

  /** Low descending error tone */
  error(): void {
    const ctx = this.getContext();
    const osc = ctx.createOscillator();
    const gain = ctx.createGain();

    osc.connect(gain);
    gain.connect(ctx.destination);

    osc.type = 'triangle';
    osc.frequency.setValueAtTime(400, ctx.currentTime);
    osc.frequency.linearRampToValueAtTime(200, ctx.currentTime + 0.3);

    gain.gain.setValueAtTime(0.12, ctx.currentTime);
    gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + 0.35);

    osc.start(ctx.currentTime);
    osc.stop(ctx.currentTime + 0.35);
  }

  /** Subtle click for toggles and selections */
  click(): void {
    const ctx = this.getContext();
    const osc = ctx.createOscillator();
    const gain = ctx.createGain();

    osc.connect(gain);
    gain.connect(ctx.destination);

    osc.type = 'square';
    osc.frequency.setValueAtTime(800, ctx.currentTime);

    gain.gain.setValueAtTime(0.08, ctx.currentTime);
    gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + 0.05);

    osc.start(ctx.currentTime);
    osc.stop(ctx.currentTime + 0.05);
  }

  /** Three-note notification melody */
  notify(): void {
    const ctx = this.getContext();
    const notes = [523, 659, 784]; // C5, E5, G5

    notes.forEach((freq, i) => {
      const osc = ctx.createOscillator();
      const gain = ctx.createGain();
      osc.connect(gain);
      gain.connect(ctx.destination);

      osc.type = 'sine';
      osc.frequency.setValueAtTime(freq, ctx.currentTime);

      const start = ctx.currentTime + i * 0.12;
      gain.gain.setValueAtTime(0, start);
      gain.gain.linearRampToValueAtTime(0.12, start + 0.02);
      gain.gain.exponentialRampToValueAtTime(0.001, start + 0.15);

      osc.start(start);
      osc.stop(start + 0.15);
    });
  }
}

// Usage
const sound = new UISound();
document.querySelector('#submit')?.addEventListener('click', () => sound.confirm());

---

Haptic-Audio Pairing (Mobile)

On mobile, haptics and audio should be designed as a UNIT. The haptic arrives first (immediate physical feedback), the sound arrives second (confirmation and character).

Pairing Guide

Interaction	Haptic	Sound	Timing
Tap button	Light impact	Short click	Simultaneous
Toggle switch	Medium impact	Crisp snap	Haptic 10ms before sound
Pull-to-refresh	Selection tick during pull; notification on complete	Subtle stretch sound; confirm chime	Haptic leads by 20ms
Delete swipe	Heavy impact at threshold	Hollow swoosh	Haptic at commit point
Long press	Rigid continuous	Low building hum	Haptic starts with sound
Success	Success pattern (triple tap)	Ascending arpeggio	Aligned to beat

iOS Implementation

import UIKit
import AVFoundation

class FeedbackManager {
    static let shared = FeedbackManager()

    private let lightImpact = UIImpactFeedbackGenerator(style: .light)
    private let mediumImpact = UIImpactFeedbackGenerator(style: .medium)
    private let heavyImpact = UIImpactFeedbackGenerator(style: .heavy)
    private let notificationFeedback = UINotificationFeedbackGenerator()

    func tapConfirm() {
        lightImpact.impactOccurred()
        SoundPlayer.play(.confirm)
    }

    func errorShake() {
        notificationFeedback.notificationOccurred(.error)
        SoundPlayer.play(.error)
    }

    func deleteCommit() {
        heavyImpact.impactOccurred()
        SoundPlayer.play(.delete)
    }
}

---

The Psychology of Satisfying Sounds

Why some UI sounds feel "right" and others feel "cheap":

Satisfying Sound Properties

Property	Why It Works	Example
Pitch rises	Signals progress, optimism, completion	Confirm chimes go UP
Short decay	Feels responsive and controlled	Nintendo menu sounds
Harmonic richness	Feels organic and warm	Slack's "knock" sound
Consistent volume	Feels professional and predictable	Apple system sounds
Rhythmic alignment	Feels intentional and designed	Duolingo's streak counter

Annoying Sound Properties

Property	Why It Grates	Avoid
Repetitive without variation	Humans habituate, then are irritated	Same exact sound 100x/day
Too loud relative to context	Breaks concentration, startles	Notification sounds above -12dB
Pure sine at high frequency	Perceived as alarm, triggers anxiety	Any sound above 2kHz pure tone
Long sustained notes	Feels like something is wrong	Tones lasting >500ms for routine feedback
Dissonant intervals	Creates unconscious discomfort	Minor seconds or tritones in notifications

The Repetition Threshold

Any sound heard more than ~15 times per hour becomes irritating regardless of how pleasant it initially was. Solutions:

1. Vary subtly: Randomize pitch by +/- 5%, or choose from 3-4 variants
2. Reduce frequency: After the 5th trigger, reduce volume by 30%
3. Let users control: Always provide per-sound-type mute toggles
4. Silence by default: Only enable sounds that users opt into

// Subtle pitch variation to prevent habituation
function playWithVariation(baseFrequency: number): void {
  const variation = 1 + (Math.random() - 0.5) * 0.1; // +/- 5%
  const frequency = baseFrequency * variation;
  // ... use this frequency in your oscillator
}

---

Sound Design Decision Matrix

App Type	Confirm	Error	Notification	Transition	Ambient	Brand Sting
Productivity (Notion)	Optional	Yes	Yes	Skip	Skip	Skip
Social (Slack)	Yes	Yes	Yes	Skip	Skip	Skip
Gaming	Yes	Yes	Yes	Yes	Yes	Yes
E-commerce	Skip	Yes	Yes	Skip	Skip	Optional
Creative tools	Yes	Yes	Optional	Yes	Optional	Optional
Health/meditation	Skip	Skip	Gentle	Yes	Yes	Yes
Finance/banking	Skip	Yes	Yes	Skip	Skip	Skip
Children's apps	Yes	Yes	Yes	Yes	Optional	Yes

---

Anti-Patterns

Anti-Pattern: Sound on Every Click

Playing a sound on every button click, link tap, and scroll event creates an overwhelming audio assault. Reserve sounds for MEANINGFUL state changes, not routine navigation.

Anti-Pattern: Autoplay Background Audio

Web apps that play ambient sound without user consent will be immediately closed. Always require explicit opt-in. Browsers actively block autoplay audio for good reason.

Anti-Pattern: Skeuomorphic Sound Mismatch

Playing a typewriter click sound in a modern chat app creates cognitive dissonance unless the entire aesthetic is retro. Sound must match the visual design language.

Anti-Pattern: No Mute Option

Every app with sound MUST have an easily discoverable mute control. Burying it 3 menus deep is nearly as bad as having no mute at all.

Anti-Pattern: Identical Sounds for Different Events

Using the same chime for "message sent" and "message received" destroys the information value of sound. Each semantic category must have a distinct sound.

Anti-Pattern: Notification Sound in Focused Contexts

Playing notification sounds while a user is in a full-screen editor, reading an article, or watching a video. Respect focus state and suppress non-critical audio.

Anti-Pattern: Ignoring Hardware Diversity

A beautiful sound designed on studio monitors may be a harsh buzz on phone speakers. Always test on the cheapest speakers your users will have: phone speakers cut below 200Hz and boost 1-4kHz.

---

Quality Checklist

• Every sound answers "why does this interaction need audio feedback?"
• Sound vocabulary mapped: which interactions get which sound type
• Platform conventions respected (iOS silent switch, Android haptic-first)
• Mute control discoverable within 1 tap/click
• All sounds under 500ms for routine feedback (longer only for achievements/brand)
• Consistent perceived volume across all UI sounds
• Sounds tested on phone speakers, laptop speakers, and headphones
• prefers-reduced-motion considered for audio (some users want minimal sensory input)
• Repetition threshold addressed (variation, volume reduction, or frequency limit)
• Sound files under 50KB each (web) or appropriately compressed (native)
• Web Audio API used with user gesture gate (no autoplay violations)
• Haptic-audio pairing designed as a unit on mobile
• Sounds match the visual design language (modern sounds for modern UI, retro for retro)
• At least 3 people have tested the sounds in context and not found them annoying