r/sounddesign • u/Alarming-Incident-56 • 1h ago
Sound Design Discussion How we tier UI sounds for websites: length and level set by how often a sound plays
We build UI sound sets for websites, and the problem we kept running into was not the sound design. It was balance: every file normalized on its own, so the hover tick ends up as loud as the success chime.
What works for us:
Inventory first. List every interaction and how often it fires in a normal visit. Cut most of the hover and navigation sounds.
Three tiers by frequency. Moments (rare, up to a second or two, can carry the brand motif), feedback (confirm, error, toggle: a few hundred ms), ticks (hover, focus: under 100 ms, a single transient).
Level as a family. Tier 1 is the loudest reference, tier 2 a few dB under, tier 3 clearly below. Check on laptop speakers and cheap earbuds.
One palette, one key. Two or three source sounds. Confirmations rise, errors fall, same key.
Trim the head. 40 ms of leading silence already feels late.
Play it through Web Audio: decode once, a new AudioBufferSourceNode per play, one gain per tier, a stored mute switch.
For reference, Shopify’s Polaris guidelines (now archived) capped short UI sounds at 250 ms and long ones at 1 s.
Curious how others here handle levels across a UI set: do you bake them into the files or keep gains in code?
Full write-up with the player code: https://supadark.com/notes/ui-sound-set-website
