Sound can be applied to interactions by linking an action, or a state change, to an audio cue. These sounds are called **earcons**, and they can represent information, actions, or events. Their sound can reinforce both the meaning of an interaction and a product’s aesthetic, emotion, and personality.


To suit an earcon to a particular context, it can be designed using either inspiration from real-world situations or invented specifically to express an abstract concept. Familiar sounds that are based on experiences in the real world are referred to as **skeuomorphic**.


- Skeuomorphic sounds
- Abstract sounds


Sound as feedback

"Sound used for decoration can amplify an expressive or playful moment. It’s usually used to communicate an emotional state. This type of sound should be used judiciously and reserved for moments with high emotional resonance."

- *DO*: Use decorative sound sparingly, limited to moments that reinforce your product’s themes and unique voice. 
- *CAUTION*: Limit the frequency of decorative sound to reduce user fatigue of the sound.

Sound as decoration

Building silence into a UI design is just as important as knowing when to apply sound. In many instances, sound isn’t needed and it can actually detract from user focus and comfort. Similar to using negative space in visual design, silence creates a space for other elements to receive focus.  

For example, sound isn’t usually suitable for:  

- UIs that require privacy or discretion
- Users who have requested no interruptions
- Actions that are performed frequently  

In any context, sound should elevate the visual experience rather than detract from it.

When not to use sound

"Sound can provide feedback or add decoration to a user experience when applied to strategic moments."

- Sound as feedback
- Sound as decoration
- When not to use sound

University of Michigan - Ann Arbor

"Sound can give expression to interactions and reinforce specific functionality."

- Sound use cases
- Hero sounds
- Notifications
- System sounds
- Ambient sounds


Applying sound to UI

Material Design Documentation

Sound use cases

Hero sounds are representations of a product and brand that highlight an important moment, evoke an emotional state, or express celebration.

They occur in pivotal interactions, such as those that:

- Celebrate a significant positive action the user has taken
- Welcome users to a new app or experience
- Confirm a key moment of a product’s purpose

Hero sounds occur infrequently, and because of their prominence, they should be applied in consistent ways.

Hero sounds

Notifications are prominent requests for user attention. Their primary role is to help direct user attention, and they provide an opportunity to give a custom sound identity to emphasized interactions. Because they occur more frequently in a UI than other sounds, they should generally be shorter than hero sounds and crafted in a way that is suitable for being played multiple times.

- Environmental factors
- Notifications and alerts
- Ringtones, alarms, and timers

Notifications

- Primary UX sounds
- Usage
- Secondary UX sounds

System sounds

Ambient sound is a decorative layer of sound that expresses emotion while communicating a product’s personality or brand.

- Placement
- Usage
- Bases
- Example

Learn Before

Related

Learn After