How to Offer Great UX When Using Video
Daniel Schwarz has some thoughts on presenting a great video UX. This article is originally from sitepoint.com. SitePoint is a hub for web developers to share their passion for building incredible Internet things. Founded in 1999, SitePoint is for web professionals, byweb professionals: developers, designers, programmers, product creators and entrepreneurs alike. Daniel Schwarz is a full-time design writer and digital nomad. When he’s not writing about design and code, he’s actually doing it (sometimes) at Airwalk Studios, a creative studio of which he’s the founder. Image courtesy of mast3r via Bigstockphoto.
Video in web design was anticipated to be a top trend in 2016, and what was once thought of as impossible is now a widely-consumed concept by users in certain industries. Video is designed to captivate the user emotionally so this trend mostly applies to travel websites, hip startups and e-commerce stores selling luxury items.
In short, video can bring a sensual notion of a time and place that still photography can struggle to match.
Airbnb’s captivating video-based header depicts how “at home” you can feel by choosing an Airbnb over any other type of accommodation.
But video can be heavy, in terms of both of megabytes and screen real estate, and it should be used with extreme caution. Let’s take a look at some of the ways that we can make websites with video more accessible to the average user, andmuch more accessible to the more-common-than-you-might-think disabled user.
How Much Real Estate Should Video Acquire?
Video can be a high-risk web component, but it isn’t hard to maximise its effect and optimise its user experience. Most of the decision-making comes down to “how big should it be?”, and the answer solely depends on exactly what you’re using it for.
Ambience Videos
While most “hero” headers tend to use big background images, videos are becoming more commonplace too. How these differ from “explainer” videos is quite clear. Ambience-style videos don’t take a central focus on the webpage; the colours, speed, tone, mood and overall impression subtly induces emotional feelings, leaving the user with a desire to keep reading and scrolling.
Ambience videos are usually full-screen, and in-turn of lower quality; this is to keep the webpage size low and the loading times fast. Sometimes they’re blurred or even abstract – as long as they make you feel the way the website wants you to feel.
Here’s an example: a travel agent website selling luxury island holidays may want you to feel adventurous, so their video might slowly transition between various scenic island destinations with soft lighting and relaxing hues, making you feel as if you were literally right there in the moment. It can make all the difference between “Ah! Yes! Please!” and “Ehhh, maybe someday.”
Explainer Videos
Explainer videos (which are smaller/not full-screen) have been around since as far back as I can remember. Historically, they’ve converted very well and they’re usually set in the middle of the hero header, but other emerging trends (like card-based design) have allowed us to use video in smaller, more modest ways.
Facebook videos are now set to autoplay but no sound will be appear unless you imply in some way that you’re watching the video, such as full-screening or interacting with the video.
I adore this kind of non-invasive functionality and we’re now starting to see it in effect with card-based designs, meaning compact, user-friendly videos that can be combined with text alternatives to satisfy a wider crowd. And that’s a huge deal.
HubSpot’s multimedia card-based approach.
Autoplay functionality helps those with motor disabilities to interact more easily with video media, but the overall reduced frame of the component means that we can sum up the video in text side-by-side, sort of like visual alt attribute. Videodoesn’t have to be invasive anymore; it can heighten the experience without warding off users with simpler needs.
Multimedia websites allow catering for all types of users.
How to Handle Sound
Deaf users (like myself) are immediately turned off when they see video, much like the average user is when sound begins to blare through a quiet office (much to the dismay of irritated colleagues!). Sound control makes everybody happy, but auto-mute or text alternatives aren’t the only way to handle it…there’s subtitles too. But beware, you run the risk of users not knowing there’s subtitles and clicking the back button anyway.
Quality vs. Performance
Video is expensive. It costs a lot of megabytes, so only when the internet became faster over time did we begin to consider it as a viable type of media for the web. Sadly, internet speeds still have a lot of work to do (especially on low-bandwidth mobile devices), and this is where the inevitable question, “do we need to use video, or are we trying to be trendy”? needs to be asked.
If your website isn’t aimed at huge first-world markets, I wouldn’t consider using video components at all. A large statistic of the world still isn’t connected to the internet and many of those that only have access to slower connections.
Where to Find Great Footage
Stock video is actually quite easy to come by. Perhaps not as common as stock images, but that will change as we become more accepting of video. Pexels is the most well-known source of free stock videos, but I have to say that Adobe Stock trumps on quality.
Conclusion
Because video is a type of media, it can only move forward as new web design trends appear on the scene. More trends equals more web components, which means new ways to implement the media. Video will surely advance further than this in 2016.
