Was mir ein Kartoffelchip über UI-Sounddesign beigebracht hat

UI-Sounddesign im Web: warum Websites stumm sind, wie Sound-Feedback die UX verbessert, Regeln zur Barrierefreiheit und Tipps zur Web Audio API.

2004 setzten zwei Forscher in Oxford Freiwillige in eine Kabine, gaben ihnen Kopfhörer und einen Haufen Kartoffelchips und stellten eine einfache Frage: Wie knusprig ist dieser hier?

Die Chips waren alle gleich. Das Einzige, was sich änderte, war das, was die Leute beim Reinbeißen hörten. Massimiliano Zampini und Charles Spence nahmen das Knacken mit einem Mikrofon auf und spielten es in Echtzeit zurück, mal lauter, mal mit verstärkten Höhen. War das Knacken lauter oder heller, bewerteten die Leute denselben Chip als knuspriger und frischer. Die Studie gewann 2008 einen Ig-Nobelpreis, die Auszeichnung für Forschung, die erst zum Lachen und dann zum Nachdenken bringt.

An diese Chips denke ich jedes Mal, wenn ich höre, Sound auf einer Website sei eine Spielerei.

Denn auch ein Interface hat ein Knacken. Du drückst einen Button, und irgendetwas muss dir sagen, dass es geklappt hat. Designer nennen das Feedback. Auf den meisten Websites ist dieses Etwas rein visuell. Die Farbe wechselt, ein Spinner dreht sich, und dein Ohr bekommt nichts. Dann habe ich für ein Studienprojekt einen Konzept-Kiosk für das Parasitologische Museum Meguro in Tokio gestaltet, und das Ohr war plötzlich die halbe Arbeit.

Warum das Web verstummt ist

Wer in den 2000ern im Internet unterwegs war, weiß, warum Websites aufgehört haben, Geräusche zu machen. Ein Musikplayer, der von selbst startete. Eine Werbung, die aus einem Tab brüllte, den man nicht fand. Sound kam, ohne dass jemand danach gefragt hatte, also lernten die Leute, zuerst nach dem Stummschalter zu greifen.

Die Browser haben verstanden. Seit 2018 lässt Chrome eine Seite erst dann Ton abspielen, wenn der Besucher mit ihr interagiert hat, und seit Chrome 71 gilt diese Regel auch für die Web Audio API (Chromes Autoplay-Richtlinie). Die Nutzer schalteten trotzdem weiter stumm. 2016 berichteten Publisher gegenüber Digiday, dass bis zu 85 % ihrer Facebook-Videoaufrufe ohne Ton stattfanden.

Also zog die Branche einen Schluss: Die Leute hassen Sound im Web.

Aber lies diese Geschichten noch einmal. Die Leute hassten Sound, um den sie nicht gebeten hatten, in einer Lautstärke, die sie nicht gewählt hatten, ohne Möglichkeit, ihn abzustellen. Das ist eine Beschwerde über Verhalten. Das Medium hat die Schuld aus Versehen abbekommen, und UI-Sounddesign zahlt seitdem den Preis dafür.

Was UI-Sound kann und Pixel nicht

Für die UX hat Sound zwei Vorteile: Er ist schnell, und er braucht deine Augen nicht. Du kannst in die falsche Ecke des Bildschirms schauen und trotzdem wissen, dass die Datei verschickt wurde. Das allein würde schon reichen, aber in der Praxis habe ich ihn noch drei weitere Dinge tun sehen.

Er bestätigt, ohne Aufmerksamkeit zu verlangen. 1986 schlug der Forscher William Gaver Auditory Icons vor: Interface-Sounds als Karikaturen echter Geräusche, sodass eine Datei, die in einem Ordner landet, ein bisschen wie etwas klingt, das landet. Man muss nicht lernen, was sie bedeuten. Die Ohren wissen es schon. Drei Jahre später beschrieben Meera Blattner und ihre Kollegen die andere Familie, Earcons: kurze, abstrakte Tonfolgen, die man lernt, wie der Ton einer gesendeten Nachricht. Das meiste UI-Sounddesign mischt heute beides.

Er gibt Dingen ein Material. Das ist die Lektion der Chips. Ein Drag, der mit einem weichen dumpfen Ton endet, fühlt sich schwerer an als derselbe Drag in Stille. Gleiche Pixel, gleiche Animation, anderes Objekt.

Er macht eine Bewegung fertig. Gamedesigner haben dafür ein Wort: Juice. In ihrem Talk Juice it or lose it von 2012 nahmen Martin Jonasson und Petri Purho einen nackten Breakout-Klon und fügten so lange Feedback hinzu, bis er lebendig wirkte, und Sound stand auf dieser Liste. Der Trick ist das Timing. Das Gehirn klebt einen Ton an eine Bewegung, wenn beide zusammen ankommen, und es ist nachsichtiger, wenn das Bild etwas vor dem Ton kommt als umgekehrt (Vroomen & Keetels, 2010). Löse den Sound also im Moment des Kontakts aus, nie zu Beginn der Animation.

Das Museumsproblem

Das Parasitologische Museum Meguro gibt es wirklich, und es ist das einzige Museum der Welt, das ganz den Parasiten gewidmet ist. Meinen Kiosk gibt es nicht: Er ist ein Studienprojekt, ein Konzept, das das Museum nie in Auftrag gegeben hat. Die Aufgabe war, sich eine interaktive Ebene vor seinen Vitrinen auszudenken: vier Ausstellungen, ein Minispiel in jeder und Präparate, die Besucher per Drag in eine virtuelle Box sammeln würden. Das Briefing zielte auf Kinder, ohne die Fachleute im selben Raum zu verlieren.

Selbst auf dem Papier ist dieser Raum das ganze Problem. Ein Kiosk ist kein Handy in der Hosentasche. In einer Ausstellung wie dieser würden andere Besucher einen Meter entfernt stehen und in Stille lesen, also war alles Laute oder Arcade-hafte ausgeschlossen, bevor es überhaupt eine Designentscheidung war. Der Sound sollte den Kiosk wie ein Spiel wirken lassen, ohne wie eines zu klingen.

Die naheliegende Idee waren schmatzende Kreaturengeräusche bei jedem Greifen. In einem Parasitenmuseum schreibt sich dieser Witz von selbst. Genau deshalb habe ich ihn verworfen: Er hätte sich beim zweiten Präparat abgenutzt, und er hätte sich über das Thema des Museums lustig gemacht. Stattdessen habe ich organische Texturen gewählt, taktil genug, um sich wie das Anfassen von etwas Echtem anzufühlen, und dabei angenehm statt eklig.

Das hat mir dieses System beigebracht.

Mit einem Klangbett anfangen, nicht mit Effekten

Im Prototyp steht das System auf einer ruhigen Ambient-Schleife aus Unterwassertönen, die leise unter dem ganzen Kiosk läuft. Mit ihr hat jeder Effekt etwas, worauf er sich legen kann. Ohne sie landet jeder Klick in einem leeren Raum und klingt lauter, als er ist.

Ein Button, ein Sound

Jeder Navigations-Tap nutzt denselben tiefen, ruhigen Klick, in der Seitenleiste wie überall sonst. Die Richtlinien von Material Design sagen, dass Sound selten zu Aktionen passt, die man oft ausführt, und im Prinzip stimme ich zu. Auf einem Touchscreen bekommt der Finger aber nichts vom Glas zurück, und ein leiser Klick ist der einzige Beweis, dass der Tap angekommen ist. Also habe ich ihn behalten, leise gemacht und jedes Mal identisch, damit er zum Button gehört statt ein Ereignis zu sein.

Fehler nicht bestrafen

Die Minispiele spielen bei Erfolg ein leichtes Signal und bei einem Fehler einen sanften Ton. Sich vor den Eltern zu irren ist peinlich genug. Der Kiosk muss nicht auch noch summen.

Den lauten Moment für ein einziges Mal aufheben

Es gibt genau einen Sound im ganzen System, der nicht ruhig ist. Wenn die Präparatebox voll ist, spielt eine kleine Fanfare, während ein Papierstreifen abreißt und den Museumsgutschein freigibt, Klang und Bewegung reißen zusammen. Das würde einmal pro Besuch passieren, und deshalb darf es groß sein. Material nennt das Hero Sounds und empfiehlt, sie selten und konsistent einzusetzen. Ich würde es direkter sagen: Wenn alles feiert, feiert nichts. Dieselbe Regel gilt für Belohnungen generell, wie ich in Was Gamification wirklich ist erkläre.

Der Code ist der einfache Teil

Die Technik ist leichter, als man denkt. Die Hintergrundmusik ist ein einfaches <audio>-Element mit 35 % Lautstärke, die Musik auf dem letzten Screen läuft mit 20 %. Die Effekte laufen über die Web Audio API, mit ein paar Details, die sich zu übernehmen lohnen:

let ctx: AudioContext | null = null
const cache = new Map<string, AudioBuffer>()

function getCtx() {
  if (!ctx) ctx = new AudioContext()        // bei der ersten Geste erzeugt
  if (ctx.state === "suspended") ctx.resume()
  return ctx
}

export async function play(src: string, gain = 2.5) {
  const c = getCtx()
  let buf = cache.get(src)
  if (!buf) {
    buf = await c.decodeAudioData(await (await fetch(src)).arrayBuffer())
    cache.set(src, buf)                     // nur einmal geladen und dekodiert
  }
  const source = c.createBufferSource()
  const volume = c.createGain()
  source.buffer = buf
  volume.gain.value = gain                  // über 1, um über die Musik zu kommen
  source.connect(volume).connect(c.destination)
  source.start()
}

Der Audio-Kontext wird erst bei Bedarf erzeugt, weil ein Kontext, der vor jeder Interaktion entsteht, wegen der Autoplay-Regeln pausiert startet. Dekodierte Sounds landen im Cache, also spielt das zweite Greifen sofort. Und der Gain liegt über 1,0, damit kurze Effekte über dem Ambient-Bett hörbar bleiben. Wenn du das auch machst, hör dir zuerst deine lauteste Datei bei voller Lautstärke an: Über 1,0 übersteuert ein Sample, das schon laut ist.

Sounddesign-Regeln, die ich jedem für den Anfang geben würde

Nichts davon braucht einen Sounddesigner im Team. Es braucht ein paar Regeln, die man nicht bricht.

• Nie Sound beim Laden starten. Warte auf einen Klick oder Tap. Der Browser zwingt dich ohnehin dazu, und es ist das Mindeste an Höflichkeit.
• Einen Ausweg lassen. Läuft etwas automatisch länger als drei Sekunden, verlangen die WCAG, die Richtlinien für Barrierefreiheit im Web, eine Möglichkeit zum Pausieren oder eine eigene Lautstärkeregelung (Erfolgskriterium 1.4.2). Ein sichtbarer Stummschalter, der sich seinen Zustand merkt, erledigt das.
• Information nie allein dem Sound überlassen. Die WHO schätzt, dass 1,5 Milliarden Menschen mit einem Hörverlust leben, und viele mehr surfen mit stummgeschaltetem Handy. Für die Barrierefreiheit braucht jeder Sound einen visuellen Zwilling.
• Eine Klangfamilie wählen und dabei bleiben. Gavers Auditory Icons funktionierten, weil verwandte Ereignisse verwandt klangen. In Meguro ist alles organisch oder unter Wasser. Ein einziger verirrter Arcade-Piep hätte das zerstört.
• Leiser drehen, bis man es kaum noch hört. Dann das Interface in einer echten Umgebung testen, mit echten Menschen drumherum.

Derselbe Chip

Die Fallstudie zu Meguro, das vollständige Studienprojekt, geht tiefer auf die Sammelmechanik, die zweisprachigen Inhalte und die Umsetzung ein. Du kannst sie hier lesen.

Aber wenn ich nur eine Sache aus diesem Projekt behalten dürfte, wären es die Chips. Niemand in dieser Kabine in Oxford hat einen anderen Chip gegessen. Sie haben einen anderen gehört, und das hat gereicht, um zu verändern, was sie schmeckten.

Dein Interface funktioniert genauso. Niemand wird sich an deinen Button-Sound erinnern. Man wird sich daran erinnern, dass sich das Ding solide angefühlt hat.