curiositech/windags-skills

App Sound Design (App-Sound-Design)

Trifft Design-Entscheidungen darüber, wann, was und wie Sounds in Anwendungen vorkommen sollten. Dies ist kein Audio-Engineering (das ist sound-engineer) oder Retro-Soundeffekte (das ist win31-audio-design). Diese Skill beantwortet die schwierigste Frage bei UI-Sounds: Soll diese Interaktion überhaupt ein Geräusch machen? Und wenn ja, welches?

Wann verwenden

Verwenden für:

• Entscheiden, welche Interaktionen in einer Web- oder Mobil-App ein Sound-Feedback benötigen
• Auswählen geeigneter Sound-Eigenschaften für Benachrichtigungen, Bestätigungen, Fehler
• Erstellen von KI-generierten UI-Sounds mit ElevenLabs, AudioCraft oder Stable Audio
• Implementieren prozeduraler Sounds mit der Web Audio API
• Koppeln von haptischem Feedback mit Audio auf iOS/Android
• Etablieren einer klanglichen Markenidentität für ein Produkt
• Auditing des bestehenden Sound-Designs einer App auf Nervigkeit vs. Nützlichkeit

NICHT verwenden für:

• Professionelles Audio-Mixing/Mastering -> sound-engineer
• Windows 3.1-thematische System-Sounds -> win31-audio-design
• Musikkomposition oder Soundtrack -> sound-engineer
• Accessibility-Screenreader-Audio -> accessibility-expert
• Game-Audio-Systeme (3D-positional, dynamische Musik) -> sound-engineer

Die grundlegende Frage: Soll das ein Geräusch machen?

Braucht die Interaktion ein FEEDBACK?
|
+-- Vom Benutzer initiierte Aktion (Tippen, Klicken, Absenden)?
|   +-- Ist das Ergebnis auf dem Bildschirm sichtbar?
|   |   +-- JA und offensichtlich --> Sound ist OPTIONAL (oft weglassen)
|   |   +-- JA, aber subtil --> Sound HILFT (sanfte Bestätigung)
|   |   +-- NEIN (Hintergrundprozess) --> Sound EMPFOHLEN
|   +-- Ist die Aktion destruktiv?
|       +-- JA --> Sound EMPFOHLEN (deutlicher Warnton)
|       +-- NEIN --> Sound OPTIONAL
|
+-- Systeminitiiertes Ereignis (Benachrichtigung, Alarm)?
|   +-- Ist der Benutzer in der App?
|   |   +-- JA --> Subtiler In-App-Sound
|   |   +-- NEIN --> Benachrichtigungssound (den OS-Konventionen folgen)
|   +-- Ist es zeitkritisch?
|       +-- JA --> Dringenderer/aufmerksamkeitsstärkerer Sound
|       +-- NEIN --> Kann leise oder ambient sein
|
+-- Ambient/Atmosphärisch (Hintergrundzustand)?
    +-- Profitiert die App von Präsenz? --> Subtiler Ambient-Sound
    +-- Arbeitet/fokussiert der Benutzer? --> STILLE

---

Das UI-Sound-Vokabular

Jede Anwendung benötigt Sounds aus diesen Kategorien. Nicht alle Kategorien sind erforderlich – die meisten Apps benötigen 3–5.

Stufe 1: Essenziell (die meisten Apps brauchen diese)

Sound-Typ	Zweck	Charakter	Dauer	Beispiel
Bestätigen	Aktion erfolgreich	Hell, steigende Tonhöhe	100–300 ms	Slack-Nachricht gesendet
Fehler	Aktion fehlgeschlagen	Tief, flach oder fallend	200–400 ms	Formularvalidierung fehlgeschlagen
Benachrichtigung	Neue Informationen eingetroffen	Unverwechselbar, mittlere Energie	300–600 ms	Slack eingehende Nachricht

Stufe 2: Feinschliff (Apps, die sich kümmern)

Sound-Typ	Zweck	Charakter	Dauer	Beispiel
Übergang	Navigation zwischen Ansichten	Subtiles Wusch oder Tippen	50–150 ms	iOS-Seitenwechsel
Umschalten	Binären Zustand ändern	Knackiger Klick oder Schnapp	50–100 ms	Ein-/Ausschalter
Hover	Maus-Over-Feedback	Kaum hörbarer Tick	20–50 ms	Menüpunkt Hover
Auswahl	Element aus Liste gewählt	Weicher Pop oder Zupfen	50–150 ms	Dropdown-Auswahl
Löschen	Destruktives Entfernen	Hohler dumpfer Ton oder Wusch	150–300 ms	Papierkorb-Aktion

Stufe 3: Vergnügen (Apps mit Persönlichkeit)

Sound-Typ	Zweck	Charakter	Dauer	Beispiel
Errungenschaft	Meilenstein erreicht	Musikalisch, feierlich	500 ms–2 s	Duolingo-Lektion abgeschlossen
Ambient	Hintergrundpräsenz	Schleifend, atmosphärisch	Kontinuierlich	Noisli, Forest App
Brand-Sting	App öffnen/schließen	Ikonisch, einprägsam	500 ms–1,5 s	Netflix Ta-dum
Easter Egg	Versteckte Freude	Verspielt, unerwartet	Variabel	Konami-Code-Belohnung

---

Plattform-Konventionen

Apple (iOS / macOS)

Apple HIG schreibt bestimmte Audio-Verhaltensweisen vor:

• System-Sounds sind heilig: Überschreibe oder ersetze niemals System-Alarmtöne
• Respektiere den Stummschalter: Wenn der physische Stummschalter aktiv ist, stoppen deine App-Sounds (außer Medienwiedergabe)
• Audio-Session-Kategorien sind wichtig:
  • ambient – mischt sich mit anderem Audio, respektiert Stummschalter
  • soloAmbient – schaltet anderes Audio stumm, respektiert Stummschalter
  • playback – ignoriert Stummschalter (nur für Medien-Apps)
• Haptik mit Sounds paaren: Verwende UIImpactFeedbackGenerator zusammen mit Audio

Apples Sound-Eigenschaften:

• Saubere Sinuswellen und gefilterte Töne
• Minimale Obertöne (rein, nicht brummig)
• Kurzes Abklingen (Sounds verweilen nicht)
• Konsistente Lautstärke relativ zu System-Sounds

// iOS: System-Sound abspielen
import AudioToolbox
AudioServicesPlaySystemSound(1057) // Standard-Tastaturklick

// iOS: Haptik + eigener Sound
let generator = UIImpactFeedbackGenerator(style: .light)
generator.impactOccurred()
// Gleichzeitig deinen eigenen Sound abspielen

Material Design (Android)

Googles Sound-Design-Prinzipien:

• Funktional zuerst: Sound soll informieren, nicht dekorieren
• Standardmäßig subtil: UI-Sounds sollten leiser als Medien sein
• Haptik zuerst auf Android: Bevorzuge haptisches Feedback; füge Sound nur hinzu, wenn Haptik nicht ausreicht
• Sound NUR an, wenn sinnvoll: Standardzustand sollte für die meisten Interaktionen still sein

Material-Sound-Eigenschaften:

• Kurze, knackige perkussive Sounds
• Subtile harmonische Anteile (keine reinen Sinuswellen)
• Etwas wärmer als Apple (mehr Mittenfrequenzen)
• Für den Einsatz auf minderwertigen Telefonlautsprechern ausgelegt

Web-Apps

Das Web hat die SCHWÄCHSTEN Sound-Konventionen, was mehr Freiheit, aber auch mehr Risiko von Nerverei bedeutet.

• Sound niemals automatisch abspielen – Browser blockieren es und Benutzer hassen es
• Zuerst Benutzergeste erforderlich: Web Audio API erfordert eine Benutzerinteraktion vor der Wiedergabe
• Lautstärkeregelung bereitstellen: Benutzern immer erlauben, stumm zu schalten oder anzupassen
• Kopfhörer-Benutzer bedenken: Was auf Laptop-Lautsprechern gut klingt, kann auf Kopfhörern schrill sein

---

Sounds mit KI erstellen

ElevenLabs Sound Effects

Am besten für: Realistische, hochwertige UI-Sounds mit spezifischen Charakterbeschreibungen.

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

Effektive Prompts für ElevenLabs:

• Bestätigen: "Short bright ascending two-note chime, clean digital, warm, 200ms"
• Fehler: "Low hollow thud with slight buzz, digital, 300ms, not harsh"
• Benachrichtigung: "Gentle three-note xylophone melody, friendly, 400ms"
• Umschalten: "Crisp mechanical click, plastic switch, 50ms"
• Löschen: "Soft hollow swoosh moving downward, 200ms"
• Errungenschaft: "Bright ascending arpeggio, sparkly, celebratory, 1 second"

Meta AudioCraft (Open Source)

Am besten für: Entwickler, die volle Kontrolle und keine API-Kosten wünschen.

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)

# UI-Sounds generieren
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

Am besten für: Längere Ambient-Sounds, Hintergrundtexturen, 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")

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

Post-Processing-Checkliste

KI-generierte Sounds müssen vor dem Versand bereinigt werden:

1. Stille abschneiden – Führenden/nachlaufenden toten Raum entfernen
2. Lautstärke normalisieren – Alle UI-Sounds sollten konsistente wahrgenommene Lautstärke haben
3. Ein-/Ausblenden – 5–10 ms Einblendung verhindert Klick-Artefakte
4. Dynamikbereich komprimieren – UI-Sounds sollten eine konsistente Lautstärke haben
5. Als WAV exportieren (für nativen Code) oder OGG/MP3 (für Web, unter 50 KB pro Sound)
6. Auf Ziellautsprechern testen – Telefonlautsprecher schneiden Frequenzen unter 200 Hz ab

---

Web Audio API: Prozedurale Sounds

Für Web-Apps macht die prozedurale Erzeugung von Sounds Audio-Dateien überflüssig. Kleinere Bundles, sofortige Verfügbarkeit.

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

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

  /** Helle, aufsteigende Bestätigung */
  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);
  }

  /** Tiefer, abfallender Fehlerton */
  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);
  }

  /** Subtiler Klick für Schalter und Auswahlen */
  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);
  }

  /** Dreitönige Benachrichtigungsmelodie */
  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);
    });
  }
}

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

---

Haptik-Audio-Kopplung (Mobilgeräte)

Auf Mobilgeräten sollten Haptik und Audio als EINHEIT konzipiert werden. Die Haptik kommt zuerst (sofortiges physisches Feedback), der Sound kommt später (Bestätigung und Charakter).

Kopplungsleitfaden

Interaktion	Haptik	Sound	Timing
Tippen auf Schaltfläche	Leichter Impuls	Kurzer Klick	Gleichzeitig
Schalter umlegen	Mittlerer Impuls	Knackiger Schnapp	Haptik 10 ms vor Sound
Pull-to-Refresh	Auswahl-Tick während Ziehen; Benachrichtigung bei Abschluss	Subtiler Streck-Sound; Bestätigungschime	Haptik geht 20 ms voraus
Wischen zum Löschen	Schwerer Impuls bei Schwelle	Hohler Wusch	Haptik am Commit-Punkt
Langer Druck	Starrer Dauerimpuls	Tiefer, ansteigender Brumm	Haptik startet mit Sound
Erfolg	Erfolgsmuster (dreifacher Tipp)	Aufsteigendes Arpeggio	Auf den Takt ausgerichtet

iOS-Implementierung

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)
    }
}

---

Die Psychologie befriedigender Sounds

Warum manche UI-Sounds sich "richtig" und andere sich "billig" anfühlen:

Eigenschaften befriedigender Sounds

Eigenschaft	Warum es funktioniert	Beispiel
Tonhöhe steigt	Signalisiert Fortschritt, Optimismus, Abschluss	Bestätigungschimes gehen NACH OBEN
Kurzes Abklingen	Fühlt sich reaktionsschnell und kontrolliert an	Nintendo-Menü-Sounds
Harmonischer Reichtum	Fühlt sich organisch und warm an	Slacks "Klopf"-Sound
Konsistente Lautstärke	Fühlt sich professionell und vorhersagbar an	Apple-System-Sounds
Rhythmische Ausrichtung	Fühlt sich absichtsvoll und gestaltet an	Duolingos Serienzähler

Eigenschaften nerviger Sounds

Eigenschaft	Warum es nervt	Vermeiden
Wiederholung ohne Variation	Menschen gewöhnen sich, dann werden sie gereizt	Denselben Sound 100x/Tag
Zu laut im Verhältnis zum Kontext	Unterbricht Konzentration

… [gekürzt für Übersetzung]