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…

sui1

> 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

sui2

> 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…

sui3

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.

sui4

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. steve says:

    It’s gotten to the point now that anytime I go to a band’s website I expect to hear their music as soon as the page loads. And I find that it only annoys me when a) I don’t particularly like the cut they chose to represent themselves or b) it’s such a particularly poor recording that it make it tough to listen to (which I find amongst many myspace independent artists). The Chew Lips is a really great example of a site where, as soon as it loads, I’m met with who the band are and what they are up to (the copy) and how they sound (the player). Exactly what I would hope to find on a fan focused site. It just so happens in this case that I like the cut, and it’s well produced. It makes me want to listen to more, and because the player is obvious, it’s easy to figure out where the music is coming from and how I can listen to another track. I had never heard Chew Lips, so thanks for the link!

    The Autoplay Ambiance notion is a different story. On rare occasion do I appreciate it, because it usually leads to some multimedia presentation that’s trying to sell me something. If I want to see your ad, I’ll find it on youtube. If I’ve heard about your stupendous product and want to read about more about it, I’ll go to your website. Often I find the integration of the two cumbersome at best. This Nokia page has great production value, they obviously went to a lot of trouble to get me to want this phone (that is what they were selling, right?) For what it is, the integration of the autoplay ambiance works well, it instantly puts you in the scene. But I got about two clicks and an action sequence in before I just closed the page.

    Button and mouseover sounds have always been something that I’ve waffled about. When done right, they add weight to the click and make it feel (albeit temporarily) that you are looking past the screen and actually interacting with an object. When done poorly, they’re just a hokey barrage of noise that detracts from the content.

    The Hara Museum page has a nice character to it’s sound, crisp and tactile. My only gripes are that it’s a little loud for my taste, and I don’t need the sound of new menu items popping up (I think we all understand that if you click on words at the top of a page, more information related to that word will magically appear).

    I remember when the Skywalker Sound webpage first added ambiance and mouseovers to their site. In my opinion at the time, it made complete sense. They make sound, their webpage should have sound right? Then conspicuously, the mouseovers went away, the ambiance got waaaay quieter and only loaded on the splash page. Much more peaceful. Today? They’re completely silent.

  2. tim says:

    thanks for your comments Steve, re the Hara Museum site being too loud; unlike Film & TV where there are set standards for audio levels, as far as I know there is no standard for volume with websites, other than there being an obvious upper limit of 100% full level of a digital file, which is what most music is mastered to, or close to. So is your comment about that website being too loud relative to other elements on that website or relative to other music/sound you are listening to ie your general listening level?
    The obvious problem of using sound in UI is that each person will listen at a different level & unlike dialogue driven media (radio/tv/film etc) where the minimum level is dictated by intelligibility and you can therefore rely on a minimum level, no such thing exists online. The best guess would then be relative to eg a soundcloud stream of music mastered to 100% level…..

  3. Steve says:

    I’m simply using the previous sites as a frame of reference. I had adjusted my monitors for the Chew Lips player to be at a comfortable listening level and simply went on from there. It’s true that it’s impossible to have any consistent frame of reference, save full scale, and where I may prefer to set my playback volume may be completely different than where anyone else would. So in the case of the Hara museum I guess I am being a bit nitpicky. More than likely, I may also completely change my point of view if I was listening through a built-in computer speaker rather than my studio monitors. That being said though, I guess my initial thought was not that it was too loud necessarily, simply loud enough to be a little distracting. I’m looking more for a subtle rather than a .

    BTW I absolutely love your blog, thank you for being so dedicated to it recently. I can’t wait ’til your schedule frees up some more so I can read more of your incredible finds. šŸ™‚

  4. tim says:

    Thanks for the kind words!

    And I wasnt hassling you šŸ˜‰ More interested to try & prove my theory that the only level reference for sound use on a website is relative to the volume of a streaming music file…

  5. tim says:

    via @Russ Adams:

    “Are there any good reasons to add sound to a website?”

    & an hour later:

    “Only found 2 reasons to add sound to a website.
    1) If a user clicks with the purpose of hearing something
    2) Piss people off”

    I think there is a third… but I am going to try & put my theory into practice
    & see if it holds true – it would be very much tied to the metaphor used
    for the site. And in content, volume & activation the main aim will be to
    augment the experience in a fun/intriguing way, rather than ‘piss people off’

  6. The only auto-play I’ve ever liked on a website was on an old version of Ottmar Liebert’s blog – when you got to the site it started an mp3 of 30 minutes of silence followed by a nice mellow chime (maybe a singing bowl, I can’t remember for sure). It let you know that it was time to stop reading blogs and get back to work! He even offered the file as a download to use as a meditation timer!

    To me, there’s just too many variables – like you mentioned, I may open 10 sites at a time, and I don’t want to have to search out the one that’s playing some horrid song. And half the time, the players screw up and the stop button doesn’t work! Then there’s the volume – I forget I had it turned up while mixing something, and get blasted at 3am while the family is trying to sleep – not cool!

  7. For me auto play is NEVER acceptable. If im really intrested in the site/product I will look for the mute button but 98% of auto play sites I close instantly.

    As already mentioned I either have music playing, some times really loud so to have crap yelling at me at random is not appreciated. And/Or I am at work where I dont want people to know Im looking at band sites!

    I also make sites and have a constant battle convincing clueless clients that they dont want autoplay music OR auto play video (Just as annoying as autoplay music just takes up more bandwidth making the site slower to load).

  8. Steve says:

    Tim – Not feeling hassled at all, just trying to clarify. And in the spirit of clarifying, that last line of the first graph should read:
    Iā€™m looking more for a subtle click rather than a CLICK.

    Andrew – That’s easily the best use of auto-play I’ve ever heard about.

  9. tim says:

    interesting use of sound in the menus for this site:

    http://www.buildingsound.org/

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

  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.