Motion on your website is attention grabbing and it’s also a great way to reinforce your brand. You can use motion either through standard video or by adding images/ graphics that move, known as motion graphics. Websites can see up to 138% improvement when switching the homepage from a plain image to a video background (with all other good UX practices implemented of course).
To avoid overkill, there are correct ways to apply video for your users, website performance, and search engines. Here are a few tips in case you’re considering using video on your site.
There can be a multitude of reasons why you want to implement video on your website, but some of the most common reasons are to present a product, convey an experience, or set the mood of your brand. Alohilani Resort does a great job utilizing video to show their resort off while maintaining the fresh and luxurious brand that they represent.
If you plan to use a video as a background instead of an image, it is very important to treat it like a texture. Most of our clients have a knee jerk reaction to ‘add more!’ whenever they can by wanting to overlay text on top of a video, especially in a hero section. Make sure you’re not sacrificing your UX and accessibility because you personally really like a certain shot or crop. Repeat the mantra “I am not my client” and if it’s impossible for you to distance yourself from your work, try it out on some users. Or do what we do and AB test that sucker.
If you have to add the text, be willing to adjust the color and contrast in order to compensate content being placed on top of it. It’s also best to make sure your video is edited correctly and doesn’t move too fast or too slow; this would overwhelm anyone and be a sure way to make them leave your site.
Unless you’re embedding a video from youtube or vimeo, remember that users still need to load video on their browser when visiting your site. Loading speed can make a gigantic impact on visitors, and can often be a reason for why they drop from your site. If your video file is bigger than 5mb, then it’s best to trim down the length of your video. We recommend it being no longer than 10-15 seconds. The shorter the better.
Plus we’re mobile first now and not everyone is located in a major metropolitan area with super fast fiber or wifi. The speed impacts SEO as well so make sure you keep an eye on your analytics after adding any video.
You have a choice to either run the video automatically or allow the user to manually start play and control their own experience. If you’re going to run it automatically, keep audio off. No one has ever said they enjoyed going to a website that all of a sudden made you realize that your volume was all the way up on your computer. Especially when your boss is around the corner or your baby was supposed to be sleeping.
And don’t forget that accessibility means you need to add controls for not only volume but also movement, ideally letting the user press play to get things going. If you’re providing instructional/informational video and the user has control over playing the video, feel free to keep the sound on but don’t forget the closed captioning for accessibility!
Video and motion graphics on your website helps build more trust between you and your user. It helps them get a sense of your brand values, personality, and the culture of what your company represents. They’re engaging, exciting, and add a new layer to your brand to keep them coming back for more. Chat with us if you want to learn more about implementing video capability on your site.