User Interface (UI) sounds are the brief device sounds you hear when you interact with an app, product, or platform. You may affectionately refer to them as the “bleeps and bloops” you hear from your devices.
They let you know when you receive an email, or give a little cha-ching when you’ve sent someone money through a cash app. They’re also the sounds that accompany you when using a remote to move around your favorite streaming service.
You may not have really noticed them until now, but these subtle sounds help connect you to your experience, giving you (hopefully) helpful, intuitive feedback, and at the right moment, a sense of specialness or reward.
In this article, we’ll discuss how we at Made Music Studio create an intuitive sonic gesture, and how to pick a sonic color palette. This approach helps to create intuitive but also unique and branded sounds for an experience.
First off, we need to define what types of messages UI sounds can convey. For now, let’s group them into three broad categories: Feedback, Navigation, and Notification.
We’re all familiar with the image of a check mark ✓. Whether it’s big, small, blue, green, has a circle around it, or made with a jagged line, we all know what it means.
We can take the same approach when designing sounds. No matter what instruments, synths, or SFX we use, we can still give it a shape or gesture that makes its meaning intuitive and immediately understandable.
Made Music Studio has done global research studies around the intuitive meaning of sounds, and what we found is that, universally, we can convey three things: that a sound is positive, neutral, or negative.
A positive sound may have an upward gesture, almost reminiscent of the shape of a check mark. This could be a confirmation-type sound, like signaling that you’ve successfully placed an order.
A neutral sound is, well…neutral. These are helpful when used for navigation (moving left, right, up, and down), but also when an action didn’t go through. Think about a sound that lets you know you entered the wrong password and is prompting you to “try again.”
A negative sound alerts us to a problem. This could be a notification of a fraudulent transaction, or even something as serious as an amber alert. These sounds are typically more dissonant, and potentially more aggressive; they’re trying to get your attention.
In addition to designing sounds that are positive, neutral, and negative, we can add additional elements to give them more connotation. For example, if we take our positive, confirm sound, and add a little coin sound at the end of it, we can connote that a financial transaction has been completed.
When interior designers pick colors for a project, they often come up with a palette that all works together. The same is true with designing UI sounds: sounds are grouped with similar character to create a palette.
These could be very simple sounds without a lot of complexity. These types of sounds may be made with a very simple sine wave on a synthesizer.
They could be very rich and bold. This could be a combination or layers of sounds played at the same time: that same sine wave on a synth, plus a plucked piano string, plus a swoosh sound effect.
They could be very soft and organic. These could be made up of real recorded organic sounds (a guitar harmonic note with a lot of sound of the room).
You may choose a palette that is sonically reminiscent of the design of the experience. If your app has very simple lines and primary colors, you could choose a palette of sounds that are very simple like the example above.
An interesting alternative is to create sounds that have a lot of contrast to the visual design. So in our example of the app of simple lines and primary colors, we could choose a very rich and bold palette, helping to fill out the experience.
This hopefully gives you a better understanding of how to create intuitive and colorful UI sounds that are perfect for your app, product, or platform. Just like interior design, if you need a sonic designer, give us a call!