UX/design Best Practices for displaying video on a website's homepage

Part
01
of one
Part
01

UX/design Best Practices

Three best practices regarding UX and design strategies for displaying videos on a website's homepage include using short videos on the homepage as they hold users' attention longer, auto-mute on auto-play videos to avoid scaring users away, and a background video that is darkened together with light text to increase engagement with the user.

METHODOLOGY

During our research, we found several articles that discussed best practices regarding UX and design strategies for displaying videos on a website's homepage. To select three best practices, we used the best practices that we found over ten times on different digital marketing, graphic design, and UX design websites. Below, we have provided an overview of each best practice along with examples of company websites that implement them.

BEST PRACTICES

#1: USE SHORT VIDEOS

UX Planet notes that websites' homepages should not be overly reliant on videos to convey information, indicating that keeping a video short will cut down on information overload, as shorter videos hold the users' attention longer.

According to Bittbox, one of the best practices for keeping users happy with homepage videos is to consider short videos and provide alternatives for mobile users. The content in the video should make a good first impression on the homepage; it should also be able to relay enough information to the user so that they may be able to understand what they are watching and find value in it.

#2: AUTO-MUTE AUTO-PLAY VIDEOS

When using a video that auto-plays, use auto-mute to avoid surprising users on the homepage. According to Bittbox, for a homepage, it is best to consider low or muted volume for videos and no volume when a video is on auto-play. Although Chrome and Firefox automatically mute auto-play videos for users because auto-play videos have become very popular, they don't mute the accompanying audio.

According to FMG Suite, auto-play with sound can be embarrassing for users if they do not have headphones in their device. The embarrassment may cause users to leave the website and never return. Also, Wistia finds that marketers like auto-play because of its effectiveness and immediacy, regardless, the videos should be muted or have the option to turn on the sound.

OTHER BEST PRACTICES FOR LINEAR VIDEOS

  • Depending on the video (if it has audio), there should be more control for the user to pause the video, start the video, and alter the volume.
  • For users who require more accessibility, a full transcript of the video would be beneficial.
  • At the end of the video on the homepage, it would be essential to consider what you want the user to do next. Adding links to product pages or more information would help guide the user to the next step in the UX.

#3: DARKENED BACKGROUND VIDEOS

There should be adequate contrast between video and text. Most videos have an overlying layer to darken them which helps the text stand out, enabling the user to engage with the message. The video will be used to grab the user's attention to initiate a call to action to the text that will stand out on a darkened video.

A light text on a dark background improves readability; a dark background helps shift focus toward the main content area. When done correctly, a background video leads to more engagement with the user on the homepage as background videos tend to be very visually appealing. A background video on the homepage also shows that the company is technologically forward.

OTHER BACKGROUND VIDEO PRACTICES

A background video may slow down the homepage loading, so a rule of thumb would be to keep the video under 5MB, use a smooth loop for the video, and compress the video as much without reducing the quality. Slow homepage loading times can cause 39% of potential customers to abandon the homepage, and 53% of mobile users will leave if the website does not load after three seconds.

Also, a full-screen video element may cause users to think that the video is the entire webpage and any information listed below will be missed. For mobile device users, it is suggested to use a static image.

EXAMPLE WEBSITES

  • Model Apparel is a company that helps businesses keep track of ordering uniforms, and its website homepage uses a background video to show how Model Apparel makes its products and gets them to its customers. Its homepage video is darkened so that the text on top of it pops out and draws attention.
  • Wishpond is a company that uses a self-serve platform to offer tools for pop-ups, landing pages, forms, and other market automation tools. The video on its homepage shows how its customers may use its software on desktop and the phone.
  • Fix Asphalt's homepage has a video that shows an example of the size of a job its team can handle. To supplement the video is a clip art video that shows its process.
  • Alaska Tours' homepage offers a collection of videos that draws website visitors into wanting to make reservations with Alaska.
  • Zendesk's homepage has a video on its Zendesk Suite webpage that is intriguing in a way that draws in its customers to see more about what Zendesk is about and what it offers. The video is intriguing because it uses only shapes and minimal text to describe the company's abilities to its potential customers. The video is being used to introduce the new look of Zendesk while highlighting its key abilities.

EXAMPLES FROM EMAIL MARKETING COMPANIES

  • Rise Interactive is an email marketing company that has a linear video on its homepage that is not on auto-play.
  • Binge Surfer is an email marketing company that has a background video on its homepage.
  • Landis Communications Inc. uses a linear video that is not on auto-play at the bottom of its homepage.
  • Square 2 Marketing also uses a linear video at the bottom of its homepage.
Sources
Sources