Sounds

Principles

Selectively urgent

The duration, volume, and character of a sound should all be dictated by the level of urgency of an event. For example, an alert indicating that a customer is struggling to complete checkout requires more urgent attention and immediate action. An alert indicating that a customer has arrived at a storefront is informative, but doesn’t require immediate action. The sounds used during these events should be customized to reflect the differences in urgency.

Avoid annoying repetition

Some sounds occur many times per day. While appealing on first listen, a sound may become irritating after ten, and unbearable after a hundred. Merchants that hear a sound repeatedly may quickly grow tired of it. Our sounds should be informative and not annoying. When possible, use data to determine how often a sound is triggered.

Distinct and succinct

Merchants are likely to hear our sounds in a variety of contexts. Clean, focused, and succinct sounds convey information better than muffled or distorted sounds.

Test across devices

While you may be testing your designs using headphones or loudspeakers that reveal the audible frequency spectrum clearly, a smartphone speaker will affect the quality of the sound. Smaller speakers are more susceptible to distortion. Sounds on mobile devices should be played at lower levels than on a desktop computer or laptop. Test sounds on a variety of devices and volume levels.

Think beyond sound

Some people can’t rely on sound to receive cues or notifications. Merchants may have a disability that affects hearing or auditory processing. Depending on the merchant’s preferences and technologies, they may receive sound cues through haptic or visual feedback, but don’t assume that they’ll be able to perceive sound. Always include an alternative method to convey information, like text-based notifications or visual changes in the interface.

When to use sound

Sounds in our product help convey information. There’s an important balance between having too many sounds and not enough. Useful and well-planned sounds will help with merchant understanding. Unnecessary sounds will reduce the perceived quality of our product.

Even though merchants might miss important information if they turn off their sound, we should always provide the option for them to do so.

Common sound events

• For an event that requires a merchant’s immediate attention, use an alert to encourage them to pause their workflow and take care of things.
• For something that’s useful for a merchant to do, but not necessarily immediately, use a notification.
• To confirm success, use feedback for a successful action.
• For statement of failure, use feedback for unsuccessful action.

How to approach sound design

Be creative and intentional with your sound design. And remember:

• Short sounds should be no longer than 250ms, long sounds no longer than 1 second.
• Sounds should be in the same “family.” If you introduce a new note, key, or timbre, make sure there’s a good reason.
• Create two versions of every sound:
  • A louder version for desktop applications.
  • A quieter version for mobile applications where the speakers are smaller and may distort more easily.

Design sounds with as much intentionality as other design aspects of Shopify’s products.