How to enhance mobile interactions with sound design

Will Littlejohn
Design at Meta
Published in
7 min readJun 27, 2017
Photo by Teresa Kluge

When I talk with people about sound design and the role it plays at Facebook, many people seem puzzled at first.

“Sound? Facebook?” they ask.

I don’t take it personally. People don’t tend to consciously think about the sounds we hear most of the time. While tens of thousands of people are employed as sound designers across many industries, it’s a largely unknown profession. I’ve been a full time sound designer for a few decades now, so I’ve had a lot of practice talking about sound. A few minutes of conversation usually pulls the curtain back for most people.

To sum up what we do: sound designers bring context to your world, and use the sonic realm to do it. The sounds you hear while you experience other sensory input play a large part in how you interpret reality. For people focused on sound, designing in this medium is fascinating, infuriating, and deeply satisfying.

This article is focused on interaction sound design, one of the lesser known areas of a little-known discipline. To help you think about this misunderstood and underutilized form of design, I and the sound design team at Facebook are sharing some interaction sounds with the design community along with a few things we’ve learned along the way.

I’ll focus on insights we’ve learned around designing sound for mobile products. Sound design is a vast subject, so keep in mind that these tips may not translate to other mediums where sound design plays a role.

1. Keep it simple

If you’re considering sound as part of your product design, I encourage you to keep it simple.

Sounds that are harmonically complex or overly long can have adverse effects on your product experience over time. Think about the flow of your sounds as you move through the experience of your product. For mobile products in particular, I’ve found that people are more comfortable with subtle, warm sounds.

As an example, listen to some of the interaction sounds in Messenger:

Examples of Messenger sounds in a conversation

2. Make it a family affair

You may notice that these sounds all have similar characteristics, but are distinctly different. That’s intentional, as I’ve found palettes of sounds can create a more cohesive experience when they’re sonically related to each other.

I encourage you to design your sounds so they work together as a system, just as you would with visual design components.

3. Remember: Less is more

It sometimes surprises people when, as a designer, I’m the first to ask the question “is this sound really necessary?” Similar to cluttering the visuals of a product, it is very easy to sonically clutter an experience.

Ask yourself if a given sound really serves an important purpose for the people using the product. Too many sounds can diminish their effectiveness, and become irritating over time.

4. Make your sounds unique — or not…

When you are approaching designs for each of your sounds, context is everything. In some cases you may want the sound to be identified with a very specific action, but in others the sound may represent something as broad as a state change in the app.

As you craft a sound, think about its use case. Consider when the sound will be used and where. Is the action positive or neutral? Do you want people to hear the sound and immediately think about a specific thing? If so, that’s a good opportunity to create a unique sonic element that doesn’t sound like anything else in the product—and then tie the person’s action to the sound. People will quickly associate this designed sound to the action they’re taking.

In other cases, however, you may want your sounds to be very generic and non-specific to any action taken. In this scenario, double down on simplicity in your designs.

Develop sounds that fit within the sonic palette of your app, but don’t call attention to themselves by being overtly unique just for the sake of uniqueness. If the purpose of your sound is to provide feedback for a variety of actions, then make sure it satisfies this objective and can be heard often by people without becoming annoying.

Speaking of which…

5. Repetition, repetition, repetition…

A very critical consideration when using sound in products is the concept of “repetitive tolerance.” This is simply how often you can hear a sound without absolutely hating it.

Do you remember the first time you heard a backup beeper on a truck? “Wow, that’s neat!” you may have thought. Well, how do you feel about them now?

Also, big sonic flourishes are interesting and fun the first few times you hear them, but can become downright torturous the 1,000th time. When you integrate sound into a product, you must consider how often people will hear the sound, and how sonically complex it is.

6. Focus on utility

A hidden superpower of interaction sounds is the opportunity to extend the utility of your product. If you use sound to provide people with more value, they’ll love you for it.

My favorite example of this is the “post” sound in the Facebook mobile app. We designed this sound to create a simple, yet satisfying moment when people posted content, but we carefully considered its placement in the flow of the action. We saw an opportunity to make the sonic element more helpful by attaching it to the actual publication of the post, rather than just the action of tapping the button.

This key decision created additional utility for people. For uploads that take longer to complete, people don’t need to stare at the progress bar. Instead, the “post” sound plays once the post is published. This allows people to move on to other things they’d rather be doing instead of watching the progress bar. It’s the same cognitive shift you make when you use a timer while cooking dinner.

7. Implementation is key

Thoughtful implementation of visual design work is important to creating a great product experience, so it shouldn’t be surprising that this applies to sound design as well. You might design the perfect sound intended for a key moment or action in your product, but still create a negative experience if the implementation isn’t crafted with care.

The smallest details around implementation will make or break a sound’s effectiveness. That’s why it’s so important to pay close attention to the timing of sounds in relation to visual components. Also consider the behavior of sounds in stress cases or uncommon scenarios.

One of the most important considerations is the relative volume of each individual sound in relation to all other sounds in your product as well as the overall volume of your sound set in relation to similar products.

Perception is everything, so make sure your sounds are perceived as you designed them. For example, the most pleasant, useful sound will be aggressive and cloying if it’s too loud. Unfortunately, it’s all too easy to distort sounds emerging from the tiny speakers in a typical mobile device, so take great care in setting your volume levels.

8. Testing, 1, 2, 3…

You can never test enough. Once you’ve implemented all your sounds, take some time to experience your product as a whole, complete with sonic cues, just like a person using it would.

Test your sounds on all of the devices your product is designed for. Watch for distortion when those devices are set to full volume. If distortion is present, adjust the levels of your individual sounds where necessary.

Pay attention to the frequency content of your sounds. Do they feel too heavy in the experience? Remove some low frequencies to lighten them up. Are your sounds feeling brittle or too shrill? Reduce some of the offending upper frequencies.

When I test sounds in this way, I listen very closely to each sound individually to optimize it independently of others. You can do this by using a parametric equalizer. As you design and test, keep in mind that mobile device speakers aren’t great at reproducing lower frequencies, and really accentuate certain higher frequencies.

A typical software-based parametric equalizer with an applied curve. The X axis represents frequency in hertz, and the Y axis represents amplitude in decibels. Notice that all of the lower frequencies have been removed, and certain narrow frequency bands have been reduced.

Introducing the Facebook Sound Kit

To help designers explore how sound can impact their work, the Facebook sound design team has created a collection of interaction sounds that you can use in your work.

Think of this set as a starting point for your sound design work. Among other things, we’ve included some “polish & feel” sounds, which are useful for high-repetition actions. These moments can benefit from very subtle, almost tactile feedback. Attach them to high-use buttons or switches and make sure they’re implemented at low volume. They’ll bring added depth to everyday interactions in your product and help to shape how people feel about it over time.

Wrapping it up

Very simple sounds can have a dramatic effect on how people feel about your product, and specifically how people feel at the moment of a critical interaction. Think about the most resonant moments in your product experience, and these are the most likely areas where a sound can bring the interaction to a new level.

Like I said before, sound design is “fascinating, infuriating, and deeply satisfying.” I hope these tips and the Facebook Sound Kit help you in your journey toward a deeply satisfying sound experience for your mobile product.

--

--

Will Littlejohn
Design at Meta

Sound Design Director @ Facebook. Sonic troublemaker for 30+ years.