← BACK TO SHOP
← BACK TO SHOP

Facebook & Google Pixel

UI Sounds Pic.png

This episode was written & produced by James Introcaso.

There are sounds we interact with every single day and never give a second thought. Our phones, computers, cars, and other devices are constantly communicating with us through user interface sounds and it’s their job to be heard, but not distracting. In this episode, we speak with Will Littlejohn, Facebook’s Director of Sound Design, and Conor O’Sullivan, Sound Design Lead at Google, about the sounds they create that help connect families, friends, and communities.

MUSIC IN THIS EPISODE

Columbus - Steven Gutheinz
Inside Outside - Nick Box
Blue - Eric Kinny
Yellow - Eric Kinny
Arriving Light (No Oohs & Ahhs) - Meaning Machine
The Middle - Steven Gutheinz
Curious Robot - Eric Kinny
Your First Light My Eventide - The Echelon Effect

20K is hosted by Dallas Taylor and made out of the studios of Defacto Sound.

Follow the show on Twitter & Facebook. Our website is 20k.org.

Consider supporting the show at donate.20k.org.

To get your 20K referral link and earn rewards, visit 20k.org/refer.

Check out Bose at bose.com/20k.

Follow Bose on Twitter & Facebook.

View Transcript ▶︎

[AOL sign on SFX, ICQ uh-oh SFX, Facebook messenger typing montage]

You’re listening to Twenty Thousand Hertz, the stories behind the world’s most recognizable and interesting sounds. I’m Dallas Taylor.

[Facebook new message SFX]

[music in]

You probably don’t think a lot about user interface, or UI, sounds. These are the noises made by devices, applications, and software we interact with.

Everything from our iPhones…

[iPhone message alert SFX]

… to our airplanes…

[airplane seatbelt SFX]

… all are user interfaces, and have UI sounds. We hear them all day, everyday but many of us never think twice about them. Why is that?

Will: We're in service of the experience, and to the people who use our products. We're not in service of being noticed, in any particular experience not being noticed is the right move.

That’s Will Littlejohn.

Will: I'm the first person to pull sounds out of an experience if they don't really serve a purpose.

He’s the Director of Sound Design at Facebook. His team is responsible for the social media platform’s UI sounds.

Will: All the sounds in Messenger [Facebook messenger SFX]… all the sounds in Facebook.

[Facebook notification SFX]

If anyone knows about UI sound design, it’s Will.

[music out]

Will: I personally have been working in this space since the early 2000s. Most people aren't… even aware that they're intimately interacting with sounds on a daily basis, in a way that's very, very personal to them and personal to their quality of life.

We process so much sound that our minds don't bring a lot of that to the forefront, in terms of our consciousness. But it's so powerful in how it guides and influences our daily lives, that I've always felt that this was one of most important types of work that I do, is to really bring thoughtful [old Facebook notification SFX] and positive UI experiences to people through whatever products we're working on [new Facebook notification SFX]. If we're interacting with something in the real world, that's quite a different relationship than leaning back and watching a film or TV, and you're processing it in a different way.

[music in]

Will, like many UI sound designers, believes that most of his team’s work should go unnoticed by consumers, because when a sound does stand out, it’s a problem.

Will: They notice when things aren't right or aren't really authentic in sound, but they don't really notice when they take things to another level. That's just part of how we process sound and I've learned over the years to not take it personally.

You can create a very negative experience for the entire product purely through one sound [Samsung Galaxy water droplet SFX]. I know a lot of people that really, really hate particular products because of one sound [awful alarming SFX].

[music out]

It might seem odd that there are UI designers out there working hard to make sure their sounds aren’t noticed, but that’s the goal for most. They want their content to blend seamlessly with the visuals provided by their application. It’s not just about finding a sound that works. It’s about finding the perfect sound through a process that can take a group of people months, like when Will’s team created the Messenger notification.

Will: We call it Pop ding.

[pop ding SFX]

The first question I have is, what are our objectives? What are we trying to do with this sound? What are we trying to say? What are we trying to achieve technically? When are we going to hear this sound? How often? In what environments? That's one slice.

Another slice is, is this the voice of the product? Is there speed involved in the sound itself? Because Messenger's a very fast product. Denoting speed, embodying that in the sound itself was, in this case, a consideration.

All of these things we think about pretty deeply before we ever start to make anything at all. That, to me, is probably the most important part of the process, that informs the design from the very beginning.

Before Will’s team sits down to design, there’s one other consideration: sonic branding.

[music in]

Facebook is one of the world’s most recognizable brands and its sounds are no exception. It’s Will’s job to make sure when they create a new sound like the Pop ding…

[pop ding SFX]

… that it belongs with the rest of the sounds in the Messenger family, like the thumbs up that expands as you hold down the LIKE icon in the app.

[thumbs up SFX]

Will: You can make some really interesting sounds that may work individually in what they're trying to achieve, but if they're just kind of random in their design, there's kind of a lack of connectivity amongst them, and amongst the product. It becomes a bit disjointed in terms of the overall experience and the design.

When you approach it more from a family or a palette, it's really like painting a painting and using the same style throughout the painting, rather than going cubist in one corner and impressionist in the other. Painting a scene that's somewhat consistent in terms of the palette really applies sonically, as well.

[music out]

If you listen to the Messenger sounds [Facebook messenger SFX], you'll notice that they all have a kind of a similar sonic characteristic, in terms of their timber [Facebook messenger SFX] and frequency content [Facebook messenger SFX].

A sound family’s brand is important, but so is its utility. Individually, each sound directs the user from one point of the interface to the next. Together the sounds form a sonic roadmap that the user can interact with to get what they need out of the device or application.

Will: In Messenger there are sounds that have various levels of utility value. In this I mean they're useful, they do things for you, rather than just being a sound, they actually help the product and the overall experience to be more useful for people. That's one of our main objectives.

One of those sounds is what we call the typing sound. This is the sound that plays when somebody's typing a message to you, the little three dots are kind of galloping along and the sound kind of gallops along, too.

[typing sound SFX]

If you hear that sound, and you hear what we call the send and sent sounds, those are the, when you touch the button and when the sound is actually sent, these very simple little UI,tones. They're little, single little, small, little tiny pops...

[send and sent sounds SFX]

If you listen to those three together, they sonically have the same characteristics. They move in different ways, they're built in different ways, but if you play them all together, you can feel that they feel like they're coming from the same place.

[typing sound SFX]

[send and sent sounds SFX]

While the planning phase for UI sounds is the most important, the creative phase is the most fun. That’s when designers get to dream up new sounds, as long as they’re useful.

[music in]

Conor: You never want to play a sound just to play a sound. The sound should really only play when it has a good reason to play.

That’s Conor O’Sullivan. He’s the lead for sound design at Google.

[music out]

Conor: I have been involved with sound design on Pixel, Pixel 2, some of our other products as well, even on TV, we hear some sounds that come from our products like there's a Google brand sound that plays at the start of commercials.

[Google Mini commercial intro piano sound SFX]

That piano sound carries throughout all Google products. It’s a signal to the user that they’re about to interact with the Google brand and there’s slight variations in the sound for each product.

This is what the startup sound for the Pixel sounds like...

[Pixel startup SFX]

Conor: When you first power up the phone, you hear you see a little boot animation. You hear a short piano sound. It's actually based around the note and chord of G. The reason why we do that is because the visuals are resolving to a visual G on the screen.

Every sound Conor has created for the Pixel is just as thoughtful. He’s thinking about the Google brand, the utility of the sound he’s making, and the limitations of the hardware itself.

Conor: The phone has a smaller speaker. It has its own unique resonances that you need to work with and work around.

A lot of times, composers, sound designers, people will work with sounds that have big bassy elements or complex timbers. Really for the pixel, we try to steer away from that a little bit. It was fun to work in parts of the frequency spectrum that are sometimes neglected. Also, from a user experience perspective too, when you're out and about with your device, you're using a phone say in a noisy environment or restaurant or street, sounds that are heavier get lost.

The Pixel’s small speakers make it perfect for Google’s higher pitched UI sounds, which can be heard in many of its ringtones...

[Zen Pixel ringtone SFX]

… and alarms….

[Flow Pixel alarm SFX]

But way more thought goes into ringtones and alarms than just what sounds good coming through the device’s speakers. Conor balances each sound’s ability to grab attention without it becoming overbearing or annoying.

Conor: There's different techniques for getting the user's attention but also doing it in a respectful way. Obviously, one of them is the design choice of the style of sound hopefully couldn't be considered offensive, but also the behavior of the sound. So how for example a sound might ramp in whether it'd be a ringtone or an alarm; ramp in both in terms of actual volume, so maybe starting out a bit lower gradually increasing or in terms of complexity, so what the sound is actually doing.

[Lollipop Pixel ringtone SFX]

That's called Lollipop and that's on the Pixel 2. That's one that starts out as more of a regular ring-type persistent sound, but then increases in terms of complexity, rhythmically and also in the frequency spectrum. So it goes a little bit higher up and gets your attention. Potentially if you're in a noisy environment, you'll hear the later part of the ringtone probably a bit better.

[music in]

When it comes to ringtones, alarms, and notifications on a phone, nothing optimizes the UI experience like the ability to customize.

Conor: Everyone is different in terms of their preferences and that's something that we do, try and provide a range of styles. People like different things. Some people would really want the loudest ringtone. They're going to be in noisy environments they want to be alerted at all possible cost. Other people prefer a lot more subtlety in their experience. So they want either a gentle introduction that may increase in complexity or just a more subtle sound overall.

[music out]

There’s one other aspect of design to consider when creating UI sounds. How do designers create sounds that don’t make the user want to rip out their hair the one-thousandth time they’ve heard it? Here’s Will again.

Will: If you have a sound that has a lot of things going on inside of it, both over duration and harmonic content, and you play that sound over and over and over again, it will become tiresome over time.

We've found that the simpler, harmonically, things are, the higher their repetitive tolerance. That makes a more usable and more delightful experience and a better overall experience in the product over time, which is really one variable that you have when you're making sounds for products that you interact with in the real world, versus watching on a screen, because you can watch this really crazy UI stuff in some kind of film or in an experience in a game, but you're not going to be watching that 5,000 times in a row.

It’s true. Imagine how much you’d hate your computer if every error message came with an alert that sounded like this…

[2001 Space Odyssey Quote: “I’m sorry, Dave. I’m afraid I can’t do that” clip]

[music in]

Now that you know how UI sounds are crafted, you might asking yourself just how important are they really? We’ll get to that and talk about a legendary messaging application that shaped the future of UI sound after the break.

[music out]

MIDROLL

[music in]

So we know user interface sounds are painstakingly crafted by designers to the point of perfection, but you might be wondering, “Are UI sounds really worth the thankless work designers put into them?” Conor and Will both agree that the less people actually notice an interface’s sounds, the better, so is there any point to them at all? Will obviously thinks so.

[music out]

Will: What I do is important because my job is really to think about how to activate the sense of sound and bring more resonant connections to people through the sense of sound. What we do here is connect people and connect communities. My perspective is that we have these vast opportunities to do that through the sense of sound. It's such an unexplored and underutilized sense. How do we activate and create these communities through sound?

The buzzes, beeps, and notifications of UI are all about communication. Though we may not think about them, UI sounds do everything from letting us know when our microwave popcorn is done…

[microwave done SFX]

… to letting us know when our boss is calling with a custom ringtone.

[Starwars Imperial March ringtone SFX]

UI sounds are even more important in developing countries, which is a revelation Will had while visiting Africa on vacation.

[music in]

Will: Just hanging out on this dirt road in this open air jeep, sitting next to these elephants that are chewing on some trees and I've got my phone out and my camera ready, in case something happens, on video. Just out of the blue, this huge bull elephant just gets, for some reason, really angry and just starts crashing through the trees and charging the jeeps.

[Elephant video clip]

And it's terrifying. I caught this elephant just looking right at me as it's charging these jeeps, and they're trying to turn the jeeps on to move and it's pretty dramatic. We got out of the way and I was kind of shaken and just like, wow, this is amazing, I can't wait to post this for my friends to see. I get it all ready to post and this was my ... I like to say, hey, I'm from the land of free Wifi and 4G. I hit post, and this was my first experience with 2G, so it was going to take 90 minutes for this little 10, 15 second video to upload.

It was a really singular moment for me, where I realized how much of the world experiences the internet.

I can see this little tiny progress bar, just starting. I realized, at that moment, I could just turn my sound on and just stick that phone in my pocket and not even think about it.

[music out]

The post sound in Facebook, this sound is a really delightful little sound...

[Facebook Post SFX]

The great utility that is brought forth by this sound is the fact that we attached it to the completion of the post and not the action of touching the post. This allows you to rely on the sound itself to tell you when the post is done, and not stare at your progress bar for one minute or an hour.

If we had not implemented that sound in that way, I would have been staring at that progress bar for 90 minutes, while I'm in this amazing environment that I flew 17 hours to go experience.

Because of that, that one little decision and how we implemented the sound, I now was able to offload. That, to me, shows the true power of really, really thoughtful sound design and UI design.

Turns out UI sounds are so helpful because we don’t have to think about them. This is even true for those of us who leave our phones on vibrate all the time. Think about your phone sitting on your desk or coffee table with nothing to notify you except vibrations. There’s a difference in sound of your phone vibrating when you get a call…

[phone call vibration SFX]

… Versus getting a text message.

[text message vibration SFX]

The differences in these two sounds goes beyond just the length of time of the vibration. If we played both for the same amount of time, I bet you can still tell a difference between the call…

[phone call vibration SFX]

… and the text message…

[text message vibration SFX]

UI sound designers also have a hand in device’s haptics, or interactions involving touch. Here’s Conor again.

Conor: I focus on non-visual design. I think about haptics and sound in the same way. Sound is caused by vibration. So you really think about them together. I've done a lot of work on haptics., I've worked with some of the researchers and designers here that focus on haptics. It's important to think about all these things together.

[music in]

When it comes to UI sound design, there’s one application that should be top of mind for most Gen Xers and Millennials: the America Online Instant Messenger, or AIM as we called it in high school. This messaging application was one of the firsts of its kind and and it was full of UI sounds.

[AIM message received and sent SFX]

Everyone from middle schoolers to business executives used AIM every single day [AIM message SFX]… and it had a big impact on the way we create UI sounds today.

[music out]

Conor: It was probably one of the first early mass market adoption of web communication technology. So as a sound designer today I think that was important for opening up audiences to the idea that sound and web could go together [AIM message SFX]. And also that sound could play a role that was both functional [AIM sign on SFX] heavy users got to understand exactly, which sound meant what. Also sound became part of their brand, part of the digital experience [AIM cash register SFX]. That's super important from my perspective today.

One of the great things about AIM was that it allowed you to customize sounds. You could have the application play a custom noise to alert you that a specific friend signed on. You might use the telephone for your bestie...

[AIM telephone SFX]

And the arrow thwack [AIM arrow thwack SFX] for your crush…

Ask anyone who was around in the late 90’s and early 2000’s about AIM and - most likely -they’ll still be able to tell you their favorite sound from the application.

Will: The cow sound [AIM cowSFX] was really a fun one. I always thought that was such a random sound and so hysterical every time I heard it, that it always brought a smile to my face.

For me, the doors opening [AIM doors open SFX] and doors closing [AIM doors close SFX] are, by far, the most meaningful for me and mean a lot of things. The thing that always comes to mind is if I'd forgotten and left my computer on and the doors keep opening [AIM doors open SFX] and closing [AIM doors close SFX] all night long. I still can remember doing that and experiencing that.

The AIM door sound effects were the default signals that friends were signing on and off in the application. They’re a skeuomorphic sound. I’ll let Will explain.

Will: Skeuomorphism is basically creating a design that looks exactly like something in the real world. Audio skeuomorphism is basically using a recording of the same thing that's happening in the real world. How the AOL sounds influence UI design today is this kind of skeuomorphic approach to audio design for UI is something that we use as a team, but we don't do it literally. We don't actually record an action and then play that back, but what we do do is we use the patterns that are established by those types of sounds. The movement, the action, the frequency sweeps. All those patterns, you can use as inspiration to design sounds that can have meaning embedded in them.

[music in]

So AIM has had a huge influence on UI sound design. We’re paying our respects because AOL Instant Messenger is shutting down. This likely isn’t a surprise to most of you, or if it is, it might be because you didn’t know AIM had lasted this long, but it’s impact on sound design is just as important as the influence it had on our work and social lives. It has a revolutionary place in the history of UI sound design.

Now you know the work that goes into creating UI sounds and just how important these little blips and beeps are to everyday life. So, next time you wake up to a happy alarm [iPhone Constellation ringtone] or get notified about a message from someone you love [iPhone text sent SFX], take a moment to remember that there’s a sound designer out there who created it. Actually… scratch that… don’t think about them at all… and just go about your day.

Twenty Thousand Hertz is produced out of the studios of Defacto Sound, a sound design team that supports ad agencies, filmmakers, and video game developers. Checkout recent work at defacto sound dot com.

This episode was written and produced by James Introcaso… and me, Dallas Taylor. With help from Sam Schneble. It was edited, sound designed and mixed by Colin DeVarney.

Thanks to our guests Will Littlejohn, director of sound design at Facebook and Conor O’Sullivan, sound design lead at Google. Without their work, we literally would be less connected to our friends, families, and the world.

All of the music in this episode is provided by our friends at Musicbed. You can listen to these tracks, including this one “Your First Light My Eventide” by The Echelon Effect on our exclusive playlist which you can find at music dot 20k dot org.

You can say hello, submit a show idea, or give general feedback through Facebook, Twitter, or over email. Our email address is hi at 20k dot org.

Finally, the most important thing you can do for us is recommend the show to a friend. Say it in person, send a text, or give us a shout on social media.

Thanks for listening.

[music out]

[AOL “Goodbye” SFX]

Recent Episodes