The Case for Adding Sound
Notifications and Alerts
Few things let you know that you should be paying attention like a fairly high-pitched noise. Teachers have their fingernails on the chalkboard, phones have their ringtones, and cats and babies use very similarly pitched sounds specifically to drive us mad/get what they need from you. Interface and product designers made use of this principle long before personal computers were even a thing. It’s effective. I think these are only acceptable for chat conversations, or for notifications that users specifically request. When you’re waiting for information, and you need to pay attention the moment it arrives, an alert sound might well be appreciated. Examples include everything from Facebook Messenger and Slack, to news aggregators, to dating apps of all kinds.
Success Alerts
One pattern we might use a little more in our web and app design is actually a little bit of sound to tell people things went right. Those of us gamers, at least, often have fond memories of victory music that played every time you won a battle, or completed a level. If you can find a short “success” sound that evokes nostalgia and a dopamine hit instead of just annoying people, you may have a winner.Accessibility Enhancement
Alert sounds are all well and good, but what about using the power of audio to help people with, say, sight problems? Sure, there are screen readers and such, but if you know that a large portion of your user base have vision problems, you might consider giving them optional audio cues to make things easier. Think of “clicking” sounds on buttons, a tone that changes pitch when you use click and drag on a slider, a general sense of haptic feedback that might usually be represented by animation. To people with poor vision, sound is a very useful form of skeuomorphism.Artistic Experiments
And then, of course, we have the sort of thing that might be in the “experimental” section of your portfolio, or on your CodePen profile. Here’s a site full of them: Chrome Music Lab.
General Tips for Implementing Sound
Actually Playing the Sounds
JavaScript is sort of the only way to do it. Sure, you can just embed a sound with HTML5, but that will only provide you with an audio player. If you’re trying to integrate sound into your UI in a more functional way, JS is the only way to do it. I mean, sure, technically we still have Silverlight, but who’s going to go back to using plugins? If you’ve never intentionally added sound to your own page before, or just aren’t that familiar with JS, here’s how to play a sound on click. Now, that’s all well and good, but what if your users are having trouble finding the buttons to click on them in the first place? You might want to look at this tutorial from CSS-Tricks about how to play sound when someone hovers over an element.You Still Have to Try Not to Annoy People
Always, always, always give people a way to shut sounds off, for good. The next question is, of course, whether you should have sound on by default. My vote? No… well, in most cases. Again, if you expect to have a lot of visually impaired people on your site, you might consider making sounds play by default, and putting in a big “You can turn these sounds off off, please don’t run away!” notice front and center.And Lastly…
Sound files can, depending on their quality, hit people real hard, right in the bandwidth. Use a CDN for your bandwidth, and cache the heck out of any sound files for the sake of your users’ bandwidth. Next, have a look at at Aural style sheets, and think real hard about how your site is presented to screen readers. And would you look at that? I’ve just about convinced myself that sound on the Internet is a good idea. I should probably stop, now.WDD Staff
WDD staff are proud to be able to bring you this daily blog about web design and development. If there's something you think we should be talking about let us know @DesignerDepot.
Read Next
Exciting New Tools for Designers, October 2023
This month, we have a whole bag of goodies for designers, developers, and designevelopers alike. (Yes, we did just make…
The 10 Most Successful Rebrands of All Time - Ranked
We’re all familiar with rebrands going wrong, but what happens when they go right? From McDonald’s health kick to…
By Max Walton
3 Essential Design Trends, October 2023
Every now and then, website design trends can leave you scratching your head. This month’s collection includes some of…
Weekly Design News #2
Every Sunday, we round up the best stories from webdesignernews.com. This issue features UX principles to improve your…
By Louise North
24 Best Creative Portfolio Websites in 2023
For anyone working in a digital creative field, whether design, illustration, animation, video, or a combination of…
By Simon Sterne
15 Best New Fonts, September 2023
Nothing upgrades your designs like selecting the right font. It’s all too easy to fall into the trap of using the same…
By Ben Moss
Weekly Design News #1
Every Sunday we’re rounding up the best of the previous week’s stories from webdesignernews.com, and in this issue #1,…
By Louise North
The 20 Most Controversial Logos of All Time (Ranked)
When you hire graphic designers to create your company's logo, what do you expect? Professional designs, culturally…
By Robert Reeve
LimeWire AI Studio Generative Art App
If you’re looking for the most exciting way to launch a career in AI-generated art, then you’re in the right place.
By WDD Staff
20 Best New Websites, September 2023
Are you in need of design inspiration? Are you looking for the best websites designed in 2023 to pull ideas,…
The Dangers of Deceptive Design Patterns (And How to Avoid Them)
As web designers, our role in crafting user-friendly digital landscapes is critical. We are tasked with creating user…
By Louise North
10 Best Ecommerce WordPress Themes in 2023 [September update]
You plan to set up shop with an online store. You know there’ll be competition. And to compete with or beat that…
By WDD Staff