UX

UI Sounds: From Zero To Hero

Hello! I am Roman Zimarev, a sound designer and musician, and I develop sounds for movies, cartoons, advertisement materials, and software. Within one of the last projects – together with the Icons8 team – we produced a UI sounds library that was used in IKEA’s advertising campaign.

Oftentimes, I hear people say that sounds in non-game apps are rude and annoying. There is a rationale behind such an opinion due to the many examples of failures. However, sound can significantly improve the users’ experience and be useful where GIU can not. All that it takes is to put good sounds in the right places.

In order to be successful in finding good sounds for your project, let’s explore what kinds of sounds are there, what their functions are, and where we actually need to use them.

Sound Categories

We can divide most of the UI sounds into two groups: notifications sounds and interaction sounds.

Notifications Sounds

The main function: to draw the user’s attention to a certain event.
The main specifics and advantage of this category is its independence from the graphic interface – the sounds can work in situations where GUI cannot. When we do not look at the screen, the only thing that can attract our attention is a sound notification. So, sounds can broaden our possibilities.

A video clip of the Slack notification system:

Interaction Sounds

Main function: react to the user’s actions and make the user’s experience more pleasant.

These guys are a part of your interface; they are complementary to it as they impact the auditory sense. It is always pleasing to sense the results of your activities and to realize that everything went well. When your interface responds with an unobtrusive “click” after a message has been sent or an item in your “To Do” list has been completed and/or anything else, it really adds some positive and pleasant emotions. Thus the dialogue between the user and the application becomes a true bilateral interaction.

Example: a simple and unobtrusive “pop sound” when you refresh the window on Twitter.

What Shall We Start With?

We shall start by answering two important questions, and that will enable us to avoid a bulk of mistakes that are typical for newbies.

What Should Come With A Sound?

First of all, you need to give it some thought – what should produce sound in your app and why? The most important thing here is not to overdo it. You do not want your app to sound like a slot machine club during busy hours.
Every time you add sounds to an event, it would be a good idea to ask yourself the following question: “Do I really need a sound here?”. It is important to understand what the function of each individual sound component is, and remove whatever you do not need. Only the sounds that provide useful information or improve the user’s experience should stay.

An example from Facebook Messenger – when you send a message, there is a double click. The first click tells you that the message has been sent, and the second click tells you that the message has been delivered. And there is one more notification that the other person has read the message.

Each sound provides useful information, and thus, the uptake of the events occurs subconsciously. There is no need to look at the small elements of the graphic interface to understand what is going on.

How Should It Sound?

Together with graphic components, sounds must create a harmonious picture with just one style. In many cases, a simple click or a pop sound would be enough – they perfectly do what they ought to, they are unobtrusive, and they fit almost any design.

It is a bad idea to use sounds that are not a good match for the graphic interface. In Skype, for example, water is the prevailing theme and it is quite clearly pursued in the sound design as well.
Since we mentioned the adherence to one style we would like to mention the game Hidden Folks:

Everything is excellent in the game, including the sound. As a sound producer, I sit on the edge of my chair waiting for an opportunity to develop something as elaborate.

As we discuss the sound of your app we can also think about sound identity.

Sound Identity

Like a logo, sounds can become part of your visual identity (brand). On my phone, the notifications for new messages in various messengers (Telegram, WhatsApp, simple text messages) come with the same sound. Only when I get a message in Facebook Messenger do I know which messenger it’s from, even without looking at my screen.

Here is a brief overview of examples with the best recognizable audio-identity along with a short explanation:

From Theory To Practice

There are three options for how to “wire for sound” your application:

  • Find a “pre-packaged” solution
  • Hire a sound designer who will do everything for you
  • A combination of both bullets above – hire a sound designer who will complete what you had found so far

Option 1: You find it by yourself

You can find it in the stocks, and the stocks are in plenty ( just Google!). Be prepared to listen to a lot of sounds as you try to find anything decent and suitable.
Select a package ready to be used. There are a few pre-packaged solutions on the Internet. Appsounds.pro provides a good basic set of everything necessary and is sorted by sound categories: notifications, clicks, etc. It is also grouped by styles: sounds in sets are a good match for one another. There are packages for 1000+ and 50+sounds. Here are some short previews:

Option 2: You will work with a sound designer

As a professional, he will look at the situation from a different angle, think about everything that perhaps did not occur to you, and take care of all the technical issues. It is sometimes challenging to speak about sounds, so it is quite alright to support words with references.
Your sound designer may ask for a screencast of your application in action and work based on that. That is one of the simplest solutions.
And thereafter – tests, corrections, tests, and corrections, etc.

Option 3 consists of two prior ones – hire a sound designer, who will modify (if need be) the sounds you have found, and will add the missing ones and bring everything together.
And finally, a couple of subtleties.

Subtleties

The right moment

That is, at what particular moment there is a sound. Some events may consist of several sub-events, and it makes a big difference in which of the events is connected to sound. Example:

The Facebook posting application has a peculiar sound notification. It is important that it plays not when the post is being sent (i.e., the button is pushed, as usual), but when it is actually posted. Why is it important? If it is a “heavy” post, it will not be published immediately, and after clicking the “send” button the user can do something else (e.g., scroll the friend feed). Only when the user hears the sound a bit later does he/she know that everything went well.

Facebook is a good example in many cases. They have one whole team that handles sounds for their projects. But this does not mean that you, too, will need to employ one whole team or bear significant costs.

Long Sounds

With long sounds, there are more chances to make a mistake. They may be too obtrusive, giving the impression of a “lagging” interface and, in general, having a negative impact on users‘ experience. When I hear a long sound notification, I sometimes have enough time to think to myself, “When on earth does it stop?!”

The short sounds take up less space, which will positively impact your product’s total size. But “be careful” doesn’t mean “never ever do that.”

Volume

Carefully select the volume level for each of your sounds. Too loud and obtrusive sounds are the reason for skeptical attitudes to sounds in apps that are not games – they cause irritation to both users and those who are around them. Set the volume at the level when you “rather feel it than clearly hear it”. Then, users will get the right response to his/her actions and nobody will scowl (if there are people around).

One more subtlety: all mobile devices have built-in processors (digital sound processing, DSP) at the audio output port. It pulls out all the sounds, however, and the speakers of the devices are unable to reproduce the sounds at high volumes with high quality. Perhaps you will be surprised at how awfully bad and wrong something sounds that you quite liked listening to with your computer. Therefore, set the volume lower and everything will be OK.

Obtrusiveness

One must be extremely careful and ensure that the sounds are not too frequent, as frequent sounds may irritate users.
If there still is such a need, find short and neat sounds that will not drive anybody crazy if they are too frequent.

Also, it is essential to give the user a chance to use the application in soundless mode by switching the sound off.

Sounds Around Us

We do not think about it, but everything around us produces sound (nature, life, etc.) The sounds rarely irritate us unless we are near a highway. Sounds as such is not an issue, but how they are implemented may become an issue. I remember that I loved the button lock sound in the iPhone 4 – the sound that the button produced. Try it out if you can – you will love it; it is so cute! Apple has a special lab where they study the sounds of the buttons of their devices.

But sounds are not only aesthetics. Quite recently, I found a story told by a blind woman. She shared how her life changed with new technologies. It is more than improving the user’s experience—using voice commands and voice assistants, she finds the right bus stop, listens to newspapers, and can do many other things.

This is a good reason to consider how sounds can be useful in different situations.

Recent Posts

Dark mode 101: everything you need to know as a designer

A (nearly) scholarly article on dark mode that covers its benefits and drawbacks and explains…

6 days ago

#000000 Friday deals for designers

Check out our compilation of the most tempting 2024 Black Friday deals for graphic and…

2 weeks ago

Choosing the right video file format for your project

Some video files have just the video track, others carry 3D data. Some take up…

1 month ago

Boo! Halloween graphics for your spooky designs

Sweeping list of Halloween’s visual symbols enriched with some fun facts to know. Icons, illustrations,…

1 month ago

Try on Halloween costumes with Human Generator: for free!

Halloween is almost here. It's time to think about costumes. If you're looking for something…

2 months ago

Swap faces and haunt your friends this Halloween

Create spooky, funny, or creative face swaps for your Halloween celebration with Face Swapper.

2 months ago

This website uses cookies.