20 05 2020

UX Sound Guide:
a quick guide to designing sounds for interfaces

Mating calls, warning grunts, and supportive coos are some of the sounds heard throughout the animal kingdom. All species use finely-tuned noises to communicate to one another and inform others of an action or behavior. We humans aren’t all that different.
Although we have a spoken language that is heavily complex, humans also use sound to communicate (the French, for instance, have an array of verbal cues that never form a word). As we’ve constructed cities and societies, we use all sorts of sounds to signify meaning. A truck beeps to warn others as it reverses, the kettle whistles when the water boils and the sound a highly-designed BMW car door makes when it closes signifies engineering prowess. And, with the ever-present digital world, a text message ping draws attention to a notification.
Audible sounds are integral to making sense of the world and our surroundings. Shouldn’t they be just as considered in the interactive experiences of UX design?

1.

Sound is used to communicate in the animal kingdom and in the experiences that humans have constructed throughout society. Sound shouldn’t go overlooked as designers create experiences in the digital space.

I
Why consider UX in sounds?

Just as a dog’s growl provides feedback to an antagonizer, sound in a digital situation should function in the same way. Jakob Nielsen, creator of the 10 Usability Heuristics Principles, is adamant that feedback is essential to a successful user experience. It’s useful in sharing the status of a user’s action, in preventing errors, and in equipping the user to recognize, diagnose, and recover from errors.
What designers often forget is that visual components aren’t the only way to accomplish these things. Sound design in UX can (and should) contribute to:

Providing feedback on a user’s action or system status
Building context and understanding of a use case
Drawing attention to important information, such as a warning or opportunity
Establishing brand personality and recognition

II
Balance form and function

A sound that is beautiful but doesn’t serve a UX purpose and a sound that functions but doesn’t match the brand’s tone of voice are both missing critical components. Creating interface sounds involves both an ergonomic/usability perspective and a creative/branding one. The key to making them converge into a refined final result is to think of them as interdependent. The following tips will provide a guide for creating sounds as part of UX design that are both useful and beautiful.

III
First, focus on utility

When interacting with features on a product, people love what they find useful. Audio features are no different. Therefore, before diving into Ableton to design striking sound effects, designers should first think about the key actions for which users might want to receive feedback.
The best way to identify possibilities for sound cues is to look at the user flow. Consider where sound can enhance the full user experience. Is the upload done? Did something go wrong while saving a file? Is the device charging? Does the user need to act on something? The function of sound can be most effective when providing audible feedback to an interaction.

IV
Use Metaphors instead of Skeumorphism

When interacting with features on a product, people love what they find useful. Audio features are no different. Therefore, before diving into When creating a “match between system and real world” (a fundamental usability principle from Nielsen’s Usability Heuristics) a designer can either reference physical objects or feelings and experiences.
The first approach is called skeuomorphism, a method that makes digital interfaces look or flow like their analog counterparts. You’ve probably seen this first hand if you’ve ever used Apple’s Notes app mimicking a yellow lined pad of paper, or if you’ve deleted a file and heard the crumpling of paper.
While this strategy might seem like a user-friendly solution, it generally renders soulless interfaces. Skeuomorphism rarely creates an emotional bond with a user. Unless the design calls for 90s nostalgia, it’s best to not use literal visuals and sound effects.
A more humanized and sophisticated approach is to evoke or mimic the emotions surrounding a certain interaction. Designers can use the sonic metaphor: abstract audible feedback that users can immediately interpret and recognize because it feels like experiences they’ve had in the past. Emotions associated with scenarios like a surprise, a new beginning, and completing a task can be incorporated into their digital counterparts.
Unlike skeuomorphism, metaphors do not demand literal visual or sound recognition. Rather, the sensation a metaphor evokes during an interaction connects to a familiar and emotional experience.Ableton to design striking sound effects, designers should first think about the key actions for which users might want to receive feedback.

2.

Sound enhances user action in the app Discord. When someone joins the call, a bright, upward sound plays, evoking the joyful feeling of having a friend around. When someone leaves the call, a mellow, downward sound plays.

V
Create a “sound style guide”

A brand or design system uses a set of predetermined elements at every touchpoint that establishes consistency and cohesiveness in the user experience. Sound should be treated the same way as creating a style guide for a visual interface. It should be seen as various rearrangements of a set of elements. Perhaps a product could use similar timbres for each tune, or incorporate natural sounds, such as water drops, windy whispers, and a sand rattle.
It’s important to note that these concepts both emerge from, and build a product’s brand personality. Visual UI design components, microinteractions, and sounds will all aggregate in the user’s perspective and shape how they perceive a brand.

3.

Sound can contribute a lot to the perception of a brand or experience. These two sounds above accompany the same visual but provide two different aural experiences. (Sound by Leo Foureaux; Animation by Jordan DeVos)

VI
Keep UX sounds simple

Dieter Rams, the iconic product designer, crafted ten principles of design that still stand strong today. The tenth and final principle is: “Good design is as little design as possible. Less, but better — because it concentrates on the essential aspects, and the products are not burdened with non-essentials. Back to purity, back to simplicity.” Sounds should be concise in their intent, rather than excessive.
Harmonically complex sounds indicate priority and draw attention to things of great importance. Consequently, when sound provides feedback to an action that doesn’t require immediate attention, a complex sound isn’t appropriate. In fact, it can cause more harm than good if a user addresses the sound to find nothing of importance.
The same level of simplicity applies to the length of a sound in UX design. As a rule of thumb, a transition or micro-interaction sound should never last more than 0.3 seconds longer than its associated animation. A sound should be just short enough to be perceived by the user. As a reference point, the Samsung whistle notification sound is overly excessive.

VII
Design UX sounds for the device

When a mobile or web app is in the hands of a user, it’s likely the sounds are going to be reproduced through not-so-hi-fi speakers. Usually, mobile devices and laptops are designed to cut low frequencies down and boost mid-high frequencies. Designers should listen to their tunes through the devices they are designing for and ask:

Does the sound feel heavy or muffled? Remove some of the lower frequencies and accentuate the higher ones.
Does the sound feel squeaky or brittle? Carve out some of the higher frequencies and fatten up the medium to low range.

Since middle-range frequencies correspond to the human voice, portable devices tend to have a fairly decent response. Designers should use that to their advantage.

4.

Typical laptop speakers accentuate high frequencies and cut the low ones. See that valley on the left? It’s the Squeaky-Sounding Canyon.

VIII
Mind the repetitive tolerance in UX sound design

Have you ever set your favorite upbeat song as your alarm sound? How long did it take for it to become unbearable?
Repetitive tolerance indicates that there is a limit to how often we can stand hearing the same sound over and over. It might be satisfying to hear a “ta-da” sound every time a task is marked as complete, but by the 100th time, people might prefer to use an alternative (silent) tool to check off completed tasks. Or, worse yet, the undesirable sound might have an impact far beyond the product and cause the user to procrastinate just to avoid hearing the annoying tune. There’s a limit for the number of times a sound is repeated before we wish it never existed. What’s more, the threshold falls significantly lower the more complex a sound becomes.
Audio clutter is often more annoying to users than a messy visual interface. Users can — and will — mute apps that have repetitively aggravating sounds, such as a beep every five seconds.

HIGHLIGHTHIGHLIGHTHIGHLIGHTHIGHLIGHTHIGHLIGHT

As a general rule of thumb, the more frequently a sound occurs in a product, the more subtle, shorter, and warmer it needs to be.

HIGHLIGHTHIGHLIGHTHIGHLIGHTHIGHLIGHTHIGHLIGHT

5.

As a sound occurs repeatedly over time, it can become as painful as hearing nails on a chalkboard. Finding the sweet spot of noticeability and repetitiveness will have enormous implications for the success of a UX design.

IX
Testing UX sounds

User testing is standard practice for UX design. It’s just as important to test an interface with and without sound — mute and unmute. The user experience should be equally cohesive in both states. Additionally, users should always have an easy way to mute the product’s sound during testing and the frequency at which they toggle it on and off should be recorded.
All users’ abilities should be included in testing. While audio feedback can be very useful for visually-impaired people, a visual counterpart might be important to ensure that hearing-impaired users don’t miss an essential part of a product.
Just like the rest of an interface, iteration is fundamental to achieving sound effects that users will love. Designers should be on the lookout for unnecessary sound cues as well as interesting opportunities where sound could enhance the experience.

X
Unleash the power of UX sounds

There are biological reasons why humans rely on sounds to communicate and make sense of the world around them — audible cues often provide feedback to an action or behavior. UX designers who integrate sound design into user experiences can create a multi-sensory interaction that will prove to be very effective.
As smart devices become more ubiquitous in modern society, sounds that are both beautiful and useful can enrich an experience in a non-invasive way. Sound can greatly contribute to an impactful product’s success.

Originally published on the Toptal Design Blog. Special thanks to Jordan DeVos and Miklos Philips.

←

1