SUI: Sound User Interface in Web Design

I’m kind of interested in the idea of user interface design from a sound perspective, as it is so rare to come across a website where it is used, sucessfully. So I’ll list a few sites that I think do make interesting use of sound but I would be very interested if there are any that you’ve come across in your travels?

> Autoplay Music
I’ve always hated websites that autoplay music at you, even if its a site for a band I’m interested in. Its interesting to read how myspace has removed autoplay due to the cost (up to $10 million a month) of streaming, but I personally consider the greater cost of autoplay to be that if I open a site and it autoplays, then if I cant mute it in under a second I will simply exit the site & not return. There are a number of reasons for this, first would be that I am usually already listening to music so autoplay causes a mashup of the worst kind. Second I usually have multiple sites open in tabs & may well open eg ten sites so they can load in the background while I read the first one. So if one starts autoplaying in the background & I have to go through looking for it, it becomes VERY irritating. So as far as I’m concerned Autoplay = FAIL. But a site that seems less irritating in tis use of autoplay is for the band Chew Lips. By using a SoundCloud embed to autoplay at least the source of the music is instantly apparent & identifiable, & therefore easy to stop. Theres no hunting around the site looking for where the designer has chosen to place a mute or volume control.
But does autoplay annoy you? Have you ever used it on a site? And if you have used autoplay, what did you set playback volume at? Considering most music is mastered within a dB of maximum level, having a song come blaring out at full volume seems to me to be a potentially bad idea… Ok so go check the Chew Lips site & see if (a) autoplay annoys you and (b) do you find the mute/playback control easily? Comment – I’m interested to know…


> Autoplay Ambience
The only reason to have autoplay of music on a site is to try to ‘push’ the music to you, so that hopefully you realise you like it & will leave it playing, but what other uses of Autoplay is there? Well this site for Nokia N96 cellphone uses a lovely track of night crickets as ambience and combined thematically with beautiful video footage & motion graphic design, sparse music, great sound effects & foley this is one example of autoplay ambiences that totally works for me. Check it out here


> Button & Mouseover Sounds
We’ve all seen Star Trek etc and are used to the idea of ‘high tech’ machines beeping, whether to alert us or simply as user feedback devices when activated. Similarly many cellphones default to beeping on user actions eg entering txt etc. But it is rare to see it used on a website, not that anyone wants to be ‘beeping’ on every click, but there is the potential to add to the character & feel of a site via use of sound… I can’t think of a site I’ve been to that literally uses beeps but I have noticed a number of Japanese sites that use tiny clicks on mouse clicks & I quite like the effect. A good example site of this technique is the Hara Museum of Contemporary Art – go give it a try. The advantage of such short percussive sounds is they are small in file size (ie load quickly) and being percussive they don’t annoy by clashing with music that you may already be listening to…


Another, more complex example site would be this one: Life Meter – its an impressive project, you enter your birth date in the form of YEAR, MONTH, DAY and it then calculates a number of statistics based on your life. The use of the ticking clock works for the concept, as does the backwards music, but if you choose eg Nutrition and move your cursor down over the rotating menu, every mouseover produces a resonant bleep which is nicely pitched to harmonise with the music… But also note that from the first instance of sound, there is a clearly defined SOUND: OFF option at the bottom right of the screen.


While there are plenty of bad examples of autoplay music on sites, its more difficult to find good examples so please feel free to comment with a link to any site that you think does use sound effectively. Theres also a relevant article here, titled ‘Why is that thing beeping?’ and via the comments in that article heres a few more sites worth visiting…

– ICAD – International Community of Auditory Display
– Sound in Product Design
– Sonic Interaction

12 Responses to SUI: Sound User Interface in Web Design

  1. Pingback: steve

  2. Pingback: tim

  3. Pingback: Steve

  4. Pingback: tim

  5. Pingback: tim

  6. Pingback: Andrew Munger

  7. Pingback: Rupert Brown

  8. Pingback: Steve

  9. Pingback: tim

  10. Pingback: User Interface Analysis & Application of Audio -

  11. Pingback: Practical Web Audio -Telerik Developer Network

  12. Pingback: Add depth to your project with practical web audio - O'Reilly Radar

Leave a Reply

Please use your real name instead of you company name or keyword spam.