Audio and Video on Websites: How to Use Them to Improve User Experience

Audio and video on websites work when they serve a purpose: short sounds that confirm an action, music that sets the mood of a product presentation, an audio version of your text for accessibility, and videos that explain quickly. Keep files light, load them after the page, give users the controls and add a transcript.

Key takeaways

• Use sound with a purpose: to confirm an action, set the mood of a presentation, reward users or read text aloud for accessibility.
• Keep sounds short, pleasant and rare, and match them to your audience and to the place where your website or app is used.
• Load audio after the page has loaded, and consider the Web Audio API to create custom sounds.
• For video, provide several formats, a poster image, the right size and length, a player that works on every device, and captions or a transcript.

Since the beginning of the internet, web designers have tried to use audio and video to improve the user experience. The results have not always been well received. You may remember websites with annoying music playing in the background, or welcome pages with video presentations that took forever to load.

As a result, web designers now use audio sparingly, or not at all. However, used appropriately and with a specific purpose in mind, audio can still be valuable to your users and improve the overall quality of your website or web app. Deciding where sound and video belong is part of good design, and part of our website design services.

How to Use Audio in Web Design

Adding an audio file to a website or a web app requires careful planning and good insight into your audience.

Websites with music playing in the background are rare today, but a good piece of music can still be the right choice in several scenarios. Moreover, we interact with sounds every day on websites and apps, and without them our user experience would be poorer.

Think of familiar sounds such as the WhatsApp or Skype notification, or the camera shutter sound when you take a picture with your phone. These sounds help us interact with the application, and when we do not hear them, we think something is wrong.

Here are some common scenarios in which a sound can improve your users’ experience.

Create a Positive User Interaction

Have you ever taken an action on a website without knowing whether it worked? Web designers usually add visual effects to help users understand what is happening. A sound can reinforce the user interface (UI) interaction even more, reassuring users that their action was successful.

Enhance the Mood of the User

If you feature a product or a service presentation on your website or app, background music can affect the emotions of your users. Choose your audio carefully, and you can strike a positive note with your audience, who will be more inclined to take action.

Reward Users

Some websites use games to entertain their audience: they ask users to perform specific tasks in exchange for a reward, such as special discounts or points. Once a user completes the task and receives the reward, a sound can convey a feeling of accomplishment.

Improve Accessibility

It is easy to forget that some visitors may be visually impaired. Give attention to these users and make your content accessible to them: audio is a good option here. When you offer an audio reading of your text, you serve the needs of your visually impaired users much better.

How to Decide When to Use Audio on Your Website or App

As discussed above, audio can improve websites and web apps, but it must be used wisely. Consider several factors before adding or choosing a sound.

Is the Audio Necessary?

Audio is not there to entertain the user. It must make an action obvious or send a clear message. Associate the sound with an action that requires the attention of your user, and avoid sounds for general interactions while the user navigates your website or app. For instance, you do not need a sound every time they click on a link.

Is the Audio Annoying?

This depends on the kind of sound you choose and on how often it is repeated. Make sure the sound is short and pleasant to listen to, and do not repeat it too many times, especially if it is not strictly necessary.

Where Will the User Most Likely Use the Application?

Some web apps are mainly used in open, possibly noisy environments. Others are used in offices or quiet settings. The environment where the app is most often used tells you what type of audio to use. In a noisy environment, for instance, your sounds must be louder and higher-pitched, while in an office, deep-toned sounds are more appropriate because they are less distracting.

Who Is Your User?

Your audience is a primary factor in choosing the sound you add to your website or app. Are you addressing young people, children, business professionals or others? Make sure the sound you choose resonates with your audience. The topic of your website matters too: an app used for leisure will have very different sounds from an app used for finance.

Think About Performance

Adding sounds should never hurt the performance of your website or web app. If your site or application slows down because of audio files, the user experience will suffer. Audio files can be very large, even larger than most images. A good practice is to avoid downloading audio files together with the HTML and images: performance improves if the audio loads in the background after the page has loaded.

Even better is the Web Audio API, whenever possible. When this article was first published in 2019, the Web Audio API was not yet supported by all browsers, but it already worked in the main ones, such as Chrome, Firefox, Safari and Opera. According to MDN’s Web Audio API reference, it has been available across browsers since April 2021. It also lets you create your own custom audio from scratch.

How to Use Videos on Your Website or App

Videos are a major factor to attract visitors and encourage user engagement.

However, adding a video to your website or app is not enough to get good results. Keep several technical factors in mind to make your videos useful without hurting performance.

Video Compatible with Multiple Formats

Users visit your website from different browsers, and not all of them support the same video formats. Your web developers need to provide the video in several formats, otherwise some of your users will not be able to play it.

Choose a Poster Image

Instead of a black screen with a play button, add a poster image to your video. The right poster image encourages users to click on the play button and watch the video, so it should be eye-catching and clearly show what the video is about.

Size the Video Correctly

This point affects both the performance of your website and the experience of your users. Videos are large files and can slow down your website, so do not upload videos with a higher quality or a larger frame than the platform can handle. The same applies to length: videos that are too long weigh down your website, cause long load times and may bore your users.

As for the user experience (UX), the video should never be larger than its container. Otherwise, your users will not see the whole video or will not be able to use the controls.

Customize the Video Player

Every browser displays videos in its own way, and device orientation is an additional issue on mobile devices. Set up your video so that it works flawlessly on any device or browser and creates a pleasant user experience.

The controls must also be easy to reach. At all times, users must be able to start, stop, rewind or fast-forward the video as they like.

Add Video Text Tracks

Remember that not all your users can interact with your video in the same way. Some may have hearing impairments, others may watch the video in a noisy environment, and others may not fully understand the language.

To support these users, add captions and a transcript of the video. Your content then stays accessible and useful in any situation.

What Should You Do Next?

Audio and video on your website or web app are a great way to engage your audience, give them a better user experience and generate more conversions. Used properly, they are an asset; used carelessly, they can drive users away.

Start with a short list: which action deserves a sound, which page needs a video, and how much weight each file adds. If your website targets China, host video files on your own server rather than embedding a player from a foreign platform.

QPSoftware has been developing websites and web apps since 2009. Our team provides UI and website design in Shanghai and can help you add video or audio content to your website or app, with the right UI and UX for your users. Contact us today to learn how to implement audio and video on your website or web app.

Frequently Asked Questions