Skip to content

How to Offer Great UX When Using Video

January 22, 2017

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, 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. 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. 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% http://goo.gl/sUOejK
via http://www.remelehane.me

Source: www.sitepoint.com

Advertisements

From → Scoop.it

Leave a Comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: