User Interface (website) sound design

Question

I may soon be making my first foray into designing sound for a website user interface. I'd be interested to hear some tips and experiences from those that have done this before.

How do you strike a balance between a full, varied audio experience and a cluttered one? Would you have both rollover and click sounds for a given element, or only a sound for one of those states? I understand that a certain amount of this would be briefed by the client, but I'm sure our discretion would come into play as well.

My specific example is a digital/retro-futuristic one, but I'm interested in general concepts of interface design. (@NoiseJockey I think this one might be for you!)

Answer 1

The use of sound on a website really depends on what type of site it is. An autoplay BG ambiance can be very effective for a site such as a promo for a documentary or film (eg: Green). But as Audile has said, in many instances autoplay ambiances/music can be irritating for the user. If your client decides to go with this, make sure they are not too loud (try to ensure you are involved in the testing once the sounds are implemented).

Rollover SFX can be a great tool to aid usability but again, be cautious not to use sounds that are too "in your face". A great example of an effective button-click sound can be found on the Devine Sound website. It's not a rollover sound but a mouse-up sound for each menu item (i.e. when the user releases the mouse button). Very subtle and very slick. But bare in mind that this is a sound design and music production website, so sounds are a big selling point.

Make sure you liaise with the client and fully understand their needs and wants. Keep things simple (I would say don't have both rollover and click as this may confuse the user). Ensure you have a level of consistency through the sounds in the site. Don't forget, silence can be a useful tool when designing sound for a website. And most importantly, make sure there is a sound on/off button that is easily accessible for the user.

Answer 2

This is so tough to work on! First imagine all users coming to the website either a] having music already playing or b] appreciating silence (or c] being in a quiet work environment).

For any ambience, do account for tabbed browsing and/or leaving the desk for whatever reason. Not uncommon to have 10 tabs open and if one of them plays a continuous background ambience, things quickly get annoying, as the user's aural focus is somewhere their visual focus isn't. Best to fade it out after a while or just monitor if the user is still on the site. (You can do so by following their mouse x-y position or querying window.focus or something)

Hover/Rollover sounds on buttons - very, very subtle. Once you make them that subtle, make them even more subtle. Do account for devices that don't have hover states! iPad, iPhone and such.

Click sounds on buttons = great challenge. I tried doing a set of click sounds a while back. The user must not wait for a sound to play before they see their content. We're talking half-a-second-kind-of-sound. The timing resolution of the ear + the lag on trackpad clicks can give you grief as you should expect up to half second of delay between the click and the sound playing back.

Preload your sounds ;)

Maybe not a good idea to mix at full scale digital. Imagine someone playing classical music on their headphones whilst browsing.

Hope these help....

Answer 3

Keep everything subtle, roll over and click sounds work well, but blend them in to the background so that they sound natural rather than overt.

Answer 4

Apologies if this is digging up an old question, but I wanted to contribute my own thoughts and perhaps just add some contrast for anybody else who reads the Q&A.

My first instinct is to ask the question 'why?'. Why do you (or the site owner/ developer/ designer etc) want to use UI SFX? I have a foot in both camps here, so from a web design perspective, I'd ask how sound adds value to the site or improves its functionality.

Sometimes, web designers have a tendency to be self-indulgent and project their own aesthetic values onto a client's site. It might look great visually, but does it work for the client and their audience? Simplicity wins out quite often.

Think about the environment the website's audience will be using it in. If it's a business-to-business site viewed by people in offices, there's a good chance they won't even be able to hear anything because sound is disabled on their system. If it's a mobile site, visitors might not want sounds played every time they click on something (how annoying would that be for people sat on a bus?).

Here's a good example of when sound might not be appropriate or useful (and might even work to your disadvantage): http://novalight.net/NOVALIGHT.html

There are times when sound is clearly appropriate - with Flash-based games and with the prospect of so much more creativity with HTML5, sound can be an important part of the creative mix.

I often try to ask myself "who is this for and what does it do?" when I plan out a web page. It's really hard, because the process will never result in perfection, but by trying to justify elements of a page, I am at least evaluating the value of what is on-page.

If you must add sound to a website, at least give people the option to disable sounds, using clear ideograms in anticipated locations on-page. Personally, I prefer an indication of some kind that the site uses sound, so I'm not taken by surprise (that really, really bugs me).

Answer 5

Jeez, I'm so late to the party that all the good answers are taken. :-p I'll only expound on what's already been said, or add new perspectives.

I think the most important aspects to work backwards from are A) the brand at play, B) the type of website it is (if business, what vertical), and C) its users. Get ready for Supremely Extreme Generalizations™!

Brand and website type should drive your broad palette. Brand is the underlying emotional core of your sounds, the equivalent of the driving themes in a film or the emotional content of a scene: Warmth, musical vs. texture, etc. Business will shape the texture of your sounds: High tech, organic, bubbly, severe, minimal, rich, etc. As others have said, this is where discussions with clients is key. Get emotional brand descriptors, those are critical.

Users are what gives your sound context. A website whose features will be consumed by busy people during the day will probably warrant a different approach than a website meant to be used at home, at night. Part of the challenge of online UI sound design is the same as designing for TV: You have no control over the end playback device, or the room or even the context surrounding how people are consuming the media. I also seemed to have coined the term "least common expectation," the emotional equivalent of the "least common denominator." Like visual effects, the kind of user you have will influence how much they're even expecting sound, and if they are, what their aesthetic minimum expectations are. And, people being people, they are the ones triggering the sounds, so like in game sound design, you need to 1,000% ensure that your sounds won't trigger fatigue...having slight variations triggered with some very simple programming can pay off bigtime. Please, treat button presses like foley footsteps in games, your users will LOVE YOU for it.

Over the last 3 years, I've found most of my work in this area breaking down into two types: Musical effects and digital effects for interfaces. Vast variances in each, but very distinctive. Listen to the XBox menu system for a great example of musical UI effects; if you like abstract IDM or "microsound" electronic music, then those ultra-short, crisp, digital sounds can often work well in interfaces, too, on the other end of the spectrum.

Finally: Be consistent. Rollover, mouseDown, mouseUp...be consistent in what user input triggers sounds. The richness of the visuals often guide your hand and ears here. Rollover and mouseUps are minimums, in my opinion, but don't forget about screen transitions, lists unfurling, alert messages...UI is about a LOT more than buttons.

My best recommendation is really to think about every digital UI sound design project as a device or product: Whole unto itself. It'll get your work past the "sound for website" stage and into the "digital interface effects" stage. My Roomba, my Mac, my PC, and my MINI Cooper have completely different sonic vocabularies, and it really does imbue each of them with different personalities.

Sorry I'm late, hope that helps!

Answer 6

Make sure you don't make "autoplay" default for music. (if you plan to put one for background and such). It simply annoys most people.

Answer 7

I personally think a subtle sound for when the mouse rides over a link or button is professional, sort of like the first Starcraft but even more subtle and a lower frequency - blend this in with background sounds like Iain suggested and I think you would have a step up on many sites out there.

Don't forget to try wetting down the button clicks with a bit of reverb. For example, I love the reverb they put on the lock button sound on my iPod touch.

Answer 8

One of the best design guidelines ever was that of Abram Games: 'strive for maximum meaning from minimum means'.

I can't honestly recall many website interfaces which were enhanced by the addition of sound effects when navigation buttons and the like were clicked on.

Browser games and kids' websites like Club Penguin are different, so I guess it's down to who the audience is and what their expectations are.

One game which had good, subtle sound design throughout its interface was Eufloria

Answer 9

if you are looking for some examples you can check out a few that i have that are playing audio with the site UI. www.neutrinogaming.com www.ariesrevenge.com maybe this will help.