Sunday
Jun212009
10 tips for effective web sound design
Using sound on your website isn't always a good idea. In fact, it annoys people more often than not. This is probably caused by the enormous amount of web sites containing crappy sounds. The right use of sound though, can enhance the user experience. So if you want to do it anyway, here's a list of 10 tips to make the experience as pleasant as possible:
- Hire a sound designer
This is a good one to start with. If you don't know much about sound design, hire someone who does, preferably a person with experience in user-interface sound design. He/she will (hopefully) already know how to include all tips on this list. - No background music
A lot of people are listening to music while browsing the web. Don't interrupt them by playing music on your website. For some sites the use of music might enhance the overall experience, like web/sound-art and some specific sound-related web sites, but don't do it without warning your visitor (see tip 3). If you really want to give your website a continuous soundtrack, consider using a background atmosphere (see tip 4). - No auto-play
If you decide to use music, don't have it start without the visitors' permission. If you ever opened an auto-playing MySpace page in a new browser tab for later review, you know what I'm talking about. And provide a mute-button: if a user doesn't like the sound and there's no way to turn it off, he/she will leave your website. - Try a background atmosphere
If you keep it simple and quiet, this might work. Make a field recording at a location representative of your website and play it in the background at a low volume, like in this example. - Unobtrusive interface sounds
Adding sounds to user-interface items can absolutely enhance the usability of your site. Try to keep these sounds unobtrusive in a way that a user can still hear them, even while listening to music, but without being disturbing while browsing in a quiet environment. - Keep sounds short
A good way to prevent sounds from becoming annoying is by keeping them short. Imagine navigating a website with a second-long sound playing for every link your mouse cursor touches, that wouldn't be a pleasant experience, would it? - Use the right frequencies
The human ear is most sensitive to sounds between 1kHz and 5kHz, so if you want people to hear the sounds, even on crappy laptop speakers set to low volumes, focus on this frequency range. - Add extra functionality
Do it right or don't do it at all. If you decide to use sound on your website you can give it extra functionality, more than just providing auditive feedback. Variations in timbre and pitch of the sounds can be used to tell the user more about the menu or the page he/she is browsing. - Make sound and design match
Try to create sounds which match the design of your site as close as possible. If your design is rather futuristic, it would be strange to use very natural or recognizable instrumental sounds. In this case abstract electronic sounds would most probably complement the graphic design much better. - Care about the overall user experience
Don't just add sounds to your website because you think it's cool. Ask yourself what it means to the user, and how it will improve the overall user experience. If you don't find a clear answer to these questions, don't do it. Most internet users still prefer web sites to be silent. Be precautious, don't act like you don't care.
Do you know of a website with good sound design? Have you ever made sounds for the web? Do you have anything to add to this list? Please tell us by leaving a comment.
Reader Comments (11)
Websites with built-in sound have to be one of the most annoying and unprofessional things in the world. Most people who surf the net constantly are already playing MP3s, Podcasts or Netradio, so there is no point in adding sound to the navigating experience.
IMHO, If someone insists in adding sound to their website, the most important thing is to make sure the music is not set to autoplay.
I personally find sound a great way to expand upon experience. It's hard to decide when it's appropriate though.
The hardest problem I would face is deciding if my site deserves so much attention. Each bit of sensory your site takes (animation, sound, etc..) displaces what someone might otherwise have for other things going on around them including other sites or applications.
I tend to like staying on the light side of that line as a minimalist so I'd usually avoid uses of sound because in reality I have many many other things going on at the same time.
The case I'd rather focus on is interaction. Sound is an excellent tool that can give very positive user experiences when done as an interaction. This tends to be less distracting and doesn't interrupt anything else if done properly.
Finally, I will say that the sites I'm thinking of are more general. The web is a canvas for creative composition of hypermedia and I appreciate creative work when I see/hear it. It's just that most sites don't really fall under that category.
Interesting. I don't know of many web pages that use sound in this manner, but it sounds like it should be the way to go if a client asks for sound.
I would add: Don't start sounds until focus is on webpage. I'm not sure how feasible this is across browsers, but when I have multiple tabs open, don't start your flash/sound/whatever until your tab is frontmost (Safari does this automatically, but I don't think Firefox does). I'm wondering if some kind of javascript focus event could determine this.
@Enigmafon: Thanks for your opinion. I think a lot of people feel the same way, although I have to say I don't listen to music a lot while browsing the web, as I find it hard to listen and concentrate on reading at the same time.
@Brian: You're right, there are many different kinds of websites, so maybe it would be better to make a distinction between highly functional sites and more 'arty' web sites, although the tips I give are quite general.
And I agree, sound can improve the interaction. For instance as written in tip nr.8.
@Stephen: That's a good one. Although I don't know if you can do that, technically in all browsers. Thanks for the addition!
Hi Hugo,
I meant to contribute on your other post about this. I like the site tokyoplastic.com for their use of sound (and animation, and other design elements). Their splash page is jarring, but it's short and grabs your attention and sets the tone for their company.
Great post, and great comments as well. I would tend to be conservative for web audio. I've liked certain button rollover and clicking sounds on sites before, but having to search for a stop button to stop music OR nicely done ambiance is a big no no.
Hi Matt, thanks for your comment! I guess you're in the majority of people who like the web to be a quiet place. I have to say, the site you mentioned doesn't really take in account many of my tips. It's rather loud and disturbing, although it does fit the design.
Nice tips in what should be considered for having web sound in your site; I agree that we should considered the user of the site in putting sound in your site, because it may irritate them when it automatically play and hurry to leave your site.
Interesting feedback about using web audio.
Personally I think the web 2.0 necessarily requires adapting audiovisual experience.
Excellent example of the atmosphere on the link to the website!!.
Thank you very much @Yorkoholic, I am glad you like it!
Hugo -
Can we do an interview for PlanetShifter.com Magazine and openmythsource.com/?
Thanks!
WP
@Willi Paul: sure!