Cosa mi ha insegnato una patatina sul sound design delle interfacce

Sound design UI per il web: perché i siti sono muti, come il feedback sonoro migliora la UX, le regole di accessibilità e consigli sulla Web Audio API.

Nel 2004 due ricercatori di Oxford hanno fatto sedere dei volontari in una cabina, hanno dato loro delle cuffie e un mucchio di patatine e hanno fatto una domanda semplice: quanto è croccante questa?

Le patatine erano tutte uguali. L'unica cosa che cambiava era quello che le persone sentivano mentre mordevano. Massimiliano Zampini e Charles Spence catturavano il crunch con un microfono e lo rimandavano nelle cuffie in tempo reale, a volte più forte, a volte con gli acuti amplificati. Quando il crunch era più forte o più brillante, le persone giudicavano la stessa patatina più croccante e più fresca. Lo studio ha vinto un premio Ig Nobel nel 2008, il riconoscimento per le ricerche che prima fanno ridere e poi fanno pensare.

Ripenso a quelle patatine ogni volta che sento dire che il suono su un sito web è un gadget.

Perché anche un'interfaccia ha il suo crunch. Premi un pulsante e qualcosa deve dirti che ha funzionato. I designer lo chiamano feedback. Sulla maggior parte dei siti quel qualcosa è solo visivo. Il colore cambia, uno spinner gira, e il tuo orecchio non riceve niente. Poi, per un progetto scolastico, ho progettato un concept di chiosco per il Museo Parassitologico di Meguro, a Tokyo, e l'orecchio si è rivelato metà del lavoro.

Perché il web è diventato muto

Se hai navigato su Internet negli anni 2000, sai perché i siti hanno smesso di fare rumore. Un player musicale che partiva da solo. Una pubblicità che urlava da una scheda introvabile. Il suono arrivava senza che nessuno lo chiedesse, così le persone hanno imparato a cercare prima di tutto il tasto muto.

I browser hanno capito il messaggio. Dal 2018 Chrome permette a una pagina di riprodurre audio solo dopo che il visitatore ha interagito con essa, e da Chrome 71 la regola vale anche per la Web Audio API (la policy di autoplay di Chrome). Gli utenti hanno continuato comunque a togliere l'audio. Nel 2016 alcuni editori hanno raccontato a Digiday che fino all'85% delle loro visualizzazioni video su Facebook avveniva senza audio.

Così il settore ha tratto una conclusione: la gente odia il suono sul web.

Ma rileggi quelle storie. La gente odiava un suono che non aveva chiesto, a un volume che non aveva scelto, senza modo di spegnerlo. È una lamentela su un comportamento. Il mezzo si è preso la colpa per sbaglio, e il sound design delle interfacce ne paga il prezzo da allora.

Cosa fa il suono delle interfacce che i pixel non fanno

Per la UX, il suono ha due vantaggi: è veloce, e non ha bisogno dei tuoi occhi. Puoi guardare l'angolo sbagliato dello schermo e sapere comunque che il file è partito. Basterebbe già questo, ma nella pratica l'ho visto fare altre tre cose.

Conferma senza chiedere attenzione. Nel 1986 il ricercatore William Gaver ha proposto le icone uditive: suoni d'interfaccia costruiti come caricature di suoni reali, così che un file che arriva in una cartella suoni un po' come qualcosa che atterra. Non devi imparare cosa significano. Le tue orecchie lo sanno già. Tre anni dopo, Meera Blattner e i suoi colleghi hanno descritto l'altra famiglia, gli earcon: brevi motivi astratti che si imparano, come il suono di un messaggio inviato. Oggi la maggior parte del sound design delle interfacce mescola le due cose.

Dà una materia alle cose. È la lezione delle patatine. Un trascinamento che finisce con un tonfo morbido sembra più pesante dello stesso gesto in silenzio. Stessi pixel, stessa animazione, oggetto diverso.

Dà una fine al movimento. I game designer hanno una parola per questo: juice. Nel loro talk del 2012, Juice it or lose it, Martin Jonasson e Petri Purho hanno preso un clone spoglio di Breakout e hanno aggiunto feedback finché non sembrava vivo, e il suono era in quella lista. Il segreto è il tempismo. Il cervello incolla un suono a un movimento quando arrivano insieme, ed è più tollerante quando l'immagine anticipa leggermente il suono che il contrario (Vroomen & Keetels, 2010). Quindi fai partire il suono nel momento del contatto, mai all'inizio dell'animazione.

Il problema del museo

Il Museo Parassitologico di Meguro esiste davvero, ed è l'unico museo al mondo interamente dedicato ai parassiti. Il mio chiosco no: è un progetto scolastico, un concept che il museo non ha mai commissionato. L'esercizio era immaginare uno strato interattivo davanti alle sue vetrine: quattro esposizioni, un minigioco in ognuna e dei reperti che i visitatori trascinerebbero per collezionarli in una scatola virtuale. Il brief puntava ai bambini, senza perdere gli specialisti nella stessa sala.

Anche sulla carta, quella sala è tutto il problema. Un chiosco non è un telefono in tasca. In una galleria come questa, altri visitatori leggerebbero in silenzio a un metro di distanza, quindi qualsiasi cosa rumorosa o da sala giochi era esclusa prima ancora di diventare una scelta di design. Il suono doveva far sembrare il chiosco un gioco senza farlo suonare come tale.

L'idea ovvia erano versi di creature viscidi a ogni presa. In un museo dei parassiti, la battuta si scrive da sola. Proprio per questo l'ho scartata: avrebbe stancato già al secondo reperto, e avrebbe preso in giro l'argomento stesso del museo. Ho scelto invece texture organiche, abbastanza tattili da dare l'impressione di toccare qualcosa di reale, mantenendole piacevoli invece che disgustose.

Ecco cosa mi ha insegnato quel sistema.

Partire da un tappeto, non dagli effetti

Nel prototipo, il sistema poggia su un loop ambientale calmo, fatto di toni subacquei, che scorre a basso volume sotto tutto il chiosco. Con quello, ogni effetto ha qualcosa su cui appoggiarsi. Senza, ogni clic cade in una stanza vuota e sembra più forte di quanto sia.

Un pulsante, un suono

Ogni tap di navigazione usa lo stesso clic basso e calmo, nella barra laterale come ovunque. Le linee guida di Material Design dicono che il suono raramente è adatto alle azioni che si ripetono spesso, e in linea di principio sono d'accordo. Su un touchscreen però il dito non riceve nulla dal vetro, e un clic discreto è l'unica prova che il tap è stato registrato. Così l'ho tenuto, l'ho reso discreto e identico ogni volta, perché faccia parte del pulsante invece di essere un evento.

Non punire l'errore

I minigiochi suonano un segnale leggero in caso di successo e un tono morbido in caso di errore. Sbagliare davanti ai genitori è già abbastanza imbarazzante. Il chiosco non ha bisogno di ronzare anche lui.

Tenere il momento forte per una volta sola

C'è esattamente un suono in tutto il sistema che non è calmo. Quando la scatola dei reperti è completa, parte una piccola fanfara mentre una striscia di carta si strappa e rivela il coupon del museo, suono e movimento che si strappano insieme. Succederebbe una volta per visita, ed è per questo che può essere grande. Material li chiama hero sounds e consiglia di tenerli rari e coerenti. Io lo direi in modo più diretto: se tutto festeggia, niente festeggia. La stessa regola vale per le ricompense in generale, come spiego in cos'è davvero la gamification.

Il codice è la parte facile

La parte tecnica è più leggera di quanto si pensi. La musica di sottofondo è un semplice elemento <audio> al 35% del volume, e quella della schermata finale suona al 20%. Gli effetti passano dalla Web Audio API, con qualche dettaglio che vale la pena copiare:

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

function getCtx() {
  if (!ctx) ctx = new AudioContext()        // creato al primo gesto
  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)                     // scaricato e decodificato una volta sola
  }
  const source = c.createBufferSource()
  const volume = c.createGain()
  source.buffer = buf
  volume.gain.value = gain                  // sopra 1 per superare la musica
  source.connect(volume).connect(c.destination)
  source.start()
}

Il contesto audio viene creato solo quando serve, perché un contesto creato prima di qualsiasi interazione parte sospeso a causa delle regole di autoplay. I suoni decodificati restano in cache, quindi la seconda presa suona all'istante. E il gain supera 1,0 perché gli effetti brevi restino udibili sopra il tappeto ambientale. Se fai lo stesso, ascolta prima il tuo file più forte a pieno volume: oltre 1,0, un campione già forte distorce.

Le regole di sound design che darei a chiunque inizi

Niente di tutto questo richiede un sound designer nel team. Servono solo alcune regole da non infrangere.

• Mai avviare un suono al caricamento. Aspetta un clic o un tap. Il browser ti ci costringerà comunque, ed è il minimo della cortesia.
• Lasciare una via d'uscita. Se qualcosa parte da solo per più di tre secondi, le WCAG, le linee guida sull'accessibilità del web, chiedono un modo per metterlo in pausa o un controllo del volume dedicato (criterio di successo 1.4.2). Un pulsante muto visibile, che ricorda il suo stato, risolve la questione.
• Mai affidare un'informazione solo al suono. L'OMS stima che 1,5 miliardi di persone vivano con una perdita dell'udito, e molte altre navigano con il telefono in silenzioso. Per l'accessibilità, ogni suono ha bisogno di un gemello visivo.
• Scegliere una famiglia di suoni e restarci. Le icone uditive di Gaver funzionavano perché eventi simili suonavano in modo simile. A Meguro tutto è organico o subacqueo. Un solo bip da sala giochi fuori posto avrebbe rotto tutto.
• Abbassare il volume finché quasi non si sente. Poi provare l'interfaccia in un contesto reale, con persone vere intorno.

La stessa patatina

Il caso studio di Meguro, il progetto scolastico completo, approfondisce la meccanica di collezione, i contenuti bilingui e lo sviluppo. Puoi leggerlo qui.

Ma se dovessi tenere una sola cosa di quel progetto, sarebbero le patatine. Nessuno in quella cabina di Oxford ha mangiato una patatina diversa. Ne ha sentita una diversa, e questo è bastato a cambiare il sapore che sentiva.

La tua interfaccia funziona allo stesso modo. Nessuno si ricorderà del suono del tuo pulsante. Si ricorderanno che la cosa sembrava solida.