Interface sounds
Eight sounds an interface might make, synthesised as they play, each beside the control it belongs to and the motion it lands with: the more often a sound is heard, the shorter and quieter it is.
Press
A click so short it's mostly felt: twenty milliseconds of bright noise and a falling blip. Heard all the time, so it's the quietest here. The button presses in on the same frame.
Switch
Two notes a fourth apart, up for on and down for off, so you can hear which it was without looking. They land as the thumb slides.
Choose
A tick, lighter than a press: choosing between options is browsing, not committing.
Send
Noise swept upward through a filter, a breath leaving, with a rising note under it. Long enough to follow the message as it rises out.
Save
A rising arpeggio in A major. Saving is rarer than pressing, so it can take half a second. The spinner turns into a tick on the first note.
Mistake
Two low notes falling a semitone, out of the key everything else keeps to: wrong, without being alarming. The field shakes in time.
Notification
A bell: two pure tones and an out-of-tune overtone, as a struck bar has, ringing for most of a second. The rarest sound here, so the longest. The card pops in at the strike.
Delete
- Draft for Monday
- Old screenshot
- Notes from the call
A pitch falling away, the item going down and out. The row shrinks and fades as it falls.
// Every sound is a recipe, not a recording: tones and filtered noise, each
// rising over its attack and dying over its decay. The rule is the one the
// site's motion follows: the more often it's heard, the shorter and quieter.
export const LIMITS = {
constantly: { seconds: 0.04, loudness: 0.2 },
often: { seconds: 0.12, loudness: 0.25 },
sometimes: { seconds: 0.6, loudness: 0.45 },
rarely: { seconds: 1.2, loudness: 0.5 },
};
tap: {
often: "constantly",
voices: [
{ kind: "noise", filter: "highpass", from: 3000, attack: 0.001, decay: 0.01, gain: 0.1 },
{ kind: "tone", wave: "sine", from: 1800, to: 1100, attack: 0.001, decay: 0.018, gain: 0.05 },
],
vibrate: [8],
},
// Playing one: an oscillator through an envelope, scheduled a few
// milliseconds ahead so every voice starts exactly on time.
const gain = context.createGain();
gain.gain.setValueAtTime(0.0001, start);
gain.gain.linearRampToValueAtTime(voice.gain, start + voice.attack);
gain.gain.exponentialRampToValueAtTime(0.0001, start + voice.attack + voice.decay);
oscillator.frequency.setValueAtTime(voice.from, start);
if (voice.to) oscillator.frequency.exponentialRampToValueAtTime(voice.to, end);How often
Motion on this site follows one question: how often will this be seen? Sound has to take the same question more seriously, because a sound can't be glanced away from. A press is heard all day, so its click lasts twenty milliseconds and is barely there; a switch or a choice gets a little more; saving, sending and deleting, heard a few times, may take a few tenths of a second; a notification, the rarest, rings for most of one. A test holds every sound to the length and loudness its frequency allows.
No recordings
Nothing here is a file. Each sound is a recipe of voices: a tone that may glide from one pitch to another, or a burst of white noise through a filter whose centre can sweep, each rising over a few milliseconds and dying away. The clicks are noise and the notes are tones. Web Audio schedules every voice a few milliseconds ahead, so they start exactly together, through one compressor, so two sounds at once never clip. The audio starts with the first press, the only time a browser allows it.
One key
The tuned sounds keep to A major pentatonic, so any two of them sound well together, and so does the arpeggio that says something was saved. On and off are the same two notes, up and then down, so the ear learns which is which at once. The error is the one sound that leaves the key, falling a semitone, low and soft: wrong, without being an alarm. The bell has an overtone at two and three-quarter times its pitch, out of tune on purpose, as a struck metal bar has.
Sound with motion
Each sound lands with a movement. The button presses in on the click, the switch's thumb slides as its notes play, the message rises as its breath sweeps up, the field shakes in time with the error, the card pops in at the bell's strike, and the row shrinks as the pitch falls. On a phone that can, each also buzzes, a pattern no longer than the sound. Under reduced motion the sounds stay and the movements go.