Tuesday, March 1, 2016

How to Offer Great UX When Using Video

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 video-based header 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, and much 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.

Ambience videos

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.

Explainer videos

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 card-based videoHubSpot’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. Video doesn’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.

Continue reading %How to Offer Great UX When Using Video%


by Daniel Schwarz via SitePoint

No comments:

Post a Comment