What’s the proper role of audio in web design? It seems that, for as long as we’ve been building websites, designers have looked for a way to use sound effectively. Sometimes we’ve hit the mark (audio interactions within games) while other attempts are a bit more forgettable (auto-play background music).
As the web has matured, we have continued to find better uses for sound. And, as long as we make users aware of our intentions ahead of time, it can be a welcome edition to the overall experience.
Today, we’re going to explore some ways audio can enhance modern web applications. We’ll also provide you with some incredible examples from the new sound library at Envato Elements. Your Elements subscription provides you with access to 8,300+ audio tracks and 76,000+ sound effects. You’ll have an amazing variety of sounds available for all of your projects.
1. Reward Users
Many popular websites have embraced gamification as a way to keep users coming back. Completing various tasks such as reaching a participation threshold are rewarded with points, badges or even product discounts. This is where the right sound effect can add to that sense of accomplishment. Look for something short and sweet to bring a smile to your loyal users.
The Game Reward sound effect clocks in at just two seconds. That, coupled with its magical tone will have users coming back time and again. They’ll quickly associate this sound with something good.
2. Improve Accessibility
When we talk about making content accessible, sound is not always at the top of our list. But it does have a potential role to play. For example, websites that enable audio readings of printed text can be of help to users who are visually impaired. Text-based CAPTCHA fields, for instance, have offered audio alternatives for years.
A sound collection such as Male Voice Colors Pack could be of use in an eCommerce site. It’s dead-simple, with a male voice reading out various color names. But it could make the selection of a product variation that much easier for some. And, it gets us thinking of other ways we can make the web more accessible to all.
3. Strike a Positive Note
Music provides a great vehicle for creating an emotional connection with others. And it’s not just for streaming services or the radio. Website product demonstrations, for example, can also benefit from a well-selected tune. A song with the right vibe can bring about positive emotion in users, potentially leading to a more positive sales outcome.
Uplifting Upbeat Inspiring & Motivational is an excellent choice for adding personality to a product demo or company video. The song has a light, airy feeling that is perfect for background music. Coming in at 2:48, it hits the sweet spot for this type of presentation.
4. Paint a Picture for Your Readers
Storytelling on the web has become its own art form. Whether it’s a fictional short story or a true journalistic account, you can take the opportunity to create an immersive experience. The use of audio can add to the scene, helping to transport the user to another time and place.
For a story set by the ocean, Sea Waves Crashing Into Pier brings you almost close enough to smell the salty air. The atmospheric sounds of water make for a gentle complement to a riveting tale.
5. Reinforce UI Interactions
Visual cues, such as microinteractions, are often used as a means to guide users through an interface. Adding hover effects to a button, for instance, conveys that the element is clickable. Sound is a great way to take things a step further. A reassuring sound when someone clicks that same button confirms that the intended action was a success. It’s another little thing we can do to increase user confidence.
Sounds like Rich Click Pop are perfect for UI elements. They’re quick (this one measures just one second) and unobtrusive. Yet they still add something positive to the overall experience.
Music to Our Ears!
Sound can help us do some amazing things on the web. We can leverage it to create both a connection with users and a better UI. In some circumstances, sound can even heighten the accessibility of our projects.
So, the next time you’re building a web application and want to give it that something extra, consider the role sound can play. There are any number of creative ways that it can be responsibly implemented while enhancing the interface.
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.Update me weekly
Envato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!Translate this post