Sound attributes can be adjusted in a variety of ways to create a specific effect.


Representing sound

Sounds have measurable characteristics that can indicate how effective a sound will be at creating a desired effect. A technique that portrays these characteristics is called sound visualization. On a graph, the x-axis portrays one characteristic (such as time) and the y-axis portrays another characteristic (such as amplitude). In some cases, a characteristic is graphed using only a single axis.

These guidelines describe how sound can be visualized as a function of time, frequency (how high-pitched or low-pitched a sound is), or timbre (the character of a sound).

Time

To represent sound as a function of time, display time on the x-axis and amplitude on the y-axis. This graph shows the shape of a sound over time, so that the sharpness (or softness) of its peaks are apparent. mio-db-diagram.mp4Sound visualized as a function of time shows time on the x-axis, and amplitude on the y-axis.


Frequency

One way to represent sound as a function of frequency is to display amplitude on the y-axis and frequency on the x-axis. This shows the pitch of one sound relative to another. mio-db-diagram.mp4Sound visualized as a function of frequency shows amplitude on the y-axis and frequency on the x-axis.


Timbre

To represent sound as a function of timbre, you can display amplitude on the y-axis and timbral attributes on the x-axis.

Many aspects of timbre can be represented visually, and you can choose which aspects are important to display. timbre-spectrum-02.mp4Sound visualized as a function of timbre shows a timbre range on the x-axis, and amplitude on the y-axis.


Timbre

The timbre of a sound describes its quality and character (without regard for its pitch or volume).

Timbre types

There are many characteristics to consider when exploring different timbres. One aspect of timbre that can be styled to suit your user experience is brightness (the amount of high-frequency sound):

  • Bright sound has more high-frequency content, giving it a louder presence.
  • Muted sound has less high-frequency content, making its sound subtle and quieter, especially in noisy environments.

Each sound type is appropriate for different contexts. Brighter timbres feel more rich and playful. Muted timbres feel heavier and serious.

When choosing a product’s timbre, consider its audience and the context in which each sound plays.

soft-timbre-do.mp4Do
Use softer, quieter timbres for low-priority sounds.

sharp-timbre-dont.mp4Don’t
Don’t use loud, bright timbres for low-priority sounds

sharp-notification-03.mp4Do
Use bright timbres for important notifications. Brighter sounds feel louder, allowing the notification to be heard in busy environments.

soft-notification-03.mp4Caution
Use caution when playing muted timbres with notifications. Muted sounds feel quieter, making it hard to hear the notification in busy environments.


Tonality

Tonality refers to two types of sounds:

  • Tonal sounds, which are more musical in nature, including melody, motif, and harmony
  • Atonal sounds (also called non-harmonic sound), which resemble everyday sounds or noise – they don’t conform to traditional musical compositions

Sounds can be designed using tonal or atonal elements, and sometimes a sound will be comprised of both.

Tonal sounds work best to communicate personality, emotion, and state changes, whereas atonal sounds better support motion transitions and express a sense of haptic feedback.

Tonal sounds

Simple melodies

A melody is a tonal sound that has a short, rhythmic succession of singular pitches. Simple and succinct melodies can be repeated in a UI with minimal distraction. simple-motif-do.mp4Do
Create melodies that are simple, intuitive, and don’t distract from an interaction.

simple-motif-caution.mp4Caution
Use unresolved melodies with caution as it can make things sound ambiguous.

Common motifs

A motif is a melody that is repeated, making it a recognizable pattern. Common motifs can quickly and effectively communicate simple emotional and informational cues.

They often follow these patterns:

Upward motion commonly indicates starting, openness, positivity, or assurance.

Downward motion commonly indicates ending or closedness.

Repetition commonly indicates thinking, waiting, or lack of progress.


Atonal sound

Atonal sound is often suitable for sounds that are not melodies, which imply a sense of haptic feedback, motion, or skeuomorphism.

Skeuomorphic sound

Skeuomorphic sound should be used when an interaction has a strong real world association, such as a photo shutter click with the camera. Other non-harmonic sounds include a swiping sound when dismissing cards, or a tap sound attached to selecting an item.

A tap sound is an example of a non-harmonic sound texture

A camera shutter is an example of a skeuomorphic earcon


Dynamics

In sound design, dynamics refer to changes in volume or loudness on either a micro scale (volume changes to a single sound) or a macro scale (volume changes to a set of sounds). Dynamic variation allows sounds to feel natural and realistic.

Dynamic changes can highlight sonic moments of interest, create a sense of progress through a musical narrative, and give sound a natural quality.

Do
Use dynamic variation to highlight specific moments in a sound.

Caution
Little dynamic variation makes the sound feel simpler


Envelope

The envelope of a sound refers to changes in a sound’s amplitude over time. An envelope is comprised of many technical components, but the two most basic are the rise (attack) and fall (decay) of a sound.

Attack

The attack refers to the initial speed of a sound, before it reaches maximum amplitude.

A softer attack is more ambient.

A sharper attack is more energetic.

Decay

The decay refers to the amount and speed at which a sound’s amplitude decreases after its attack (until its amplitude is zero). The larger the decay, the longer and slower a sound will feel.

A short decay feels small and fast.

A longer decay feels large and slow.


Effects

Reverb and delay are effects that can add a sense of space and depth. To keep sound effects from becoming too prominent a part of an earcon’s sound, they should be used sparingly.

The more reverb and delay a sound has, the more wet the sound is as opposed to dry.

Reverb

Reverb, or reverberation effect, is an effect applied to sound that gives it more presence. When used subtly, it creates the effect of hearing a sound in a real-world environment. reverb-spectrum.mp4A dry sound has less reverb. A wet sound has more reverb.


Delay

Similar to reverb, delay uses echoes of the original sound blended in with that sound to create a decorative effect. Delay should be used purposefully and sparingly. delay-spectrum.mp4A dry sound has less delay. A wet sound has more delay.