Articles

Ambient Video Backgrounds: Tantalizing New Trend, or Obnoxious UX-Detractor?

by . April 12th, 2014

An emergent design trend that’s capturing imaginations and driving conversations, ambient video backgrounds, can be described in many ways. Vast, complex, and attention grabbing, without being intrusive. It’s a design feature that many a developer is anxious to look into, and implement on their own sites. Yet the trend isn’t especially popular with certain usability-focused developers. Many gripe against the platform citing a lack of functionality, and a decrease in UX because of slower load times.

Apparently, just “looking pretty” isn’t enough to sway the no-nonsense types. Yet the trend is here, and doesn’t look to be headed the way of the caribou any time soon. In fact, many would argue that the effect, if implemented correctly, can be understated, beautiful, and add an incredible amount of depth to the content of a web page.

But, of course, there are always detractors, as the following exchange swiped from a comment section of another article concerning ambient videos clearly illustrates:

From: http://line25.com/articles/20-web-designs-with-stunning-video-backgrounds

Janeen, while being a bit blunt for my tastes, does bring up a good point. Though the aesthetic appeal of video backgrounds may be undeniable, does it distract from a web page’s content? Let’s take a look at a couple of examples and see if we can make an informed decision.

Todoist and Effective Illustration

First let’s review an example from task management software provider, Todoist.com. The Todoist homepage prominently features a very cleverly constructed ambient video background. The video itself meshes a few important contextual elements with attractive imagery and purposefully placed lens flares. All of this combines to create an incredibly appealing visual story which not only adds to user experience, but emphasizes the benefits of the product being promoted as well.

Todoist screen shot

Adding to the Content

First and foremost, it’s worth pointing out that while the video background on this page is attention grabbing, it isn’t overwhelming. The user is free to scroll down the page and completely avoid any possible distractions at will. Though if they do that, they won’t get to enjoy this unobtrusive introduction to the software being offered.

Todoist’s task management product is amply featured within the video, in three different short sequences that pop up between scenes of customers at work and play in, out, and around breathtaking scenery. Different instances of people using the software are displayed in such a way that would certainly suggest they have their time well-managed. The looping video casually cascades through relatable scenarios for active business people (the assumable target market) such as:

  • Travel
  • Work
  • Exercise
  • Romantic encounters
  • Leisure activities
  • Sightseeing

 

There’s even a momentary glimpse of a Jack Russell Terrier playing fetch in the park. You’ve just got to throw a dog in there for the added “Aww” factor.

Once again, it’s important to note that the thread tying all these themes together is the software itself, which is invariably shown on the screen of either a mobile, tablet, or desktop throughout the looping video. This makes three important impressions in the viewer’s mind:

  1. Effective time management allows you to enjoy life.
  2. Todoist technology facilitates effective time management.
  3. And Todoist is available at home or on the go, via desktops or smartphones.

 

When the main critical concern about a new UX technology is that it isn’t necessary and/or useful for anything, it’s vital that it serve a specified purpose in its implementation. In this case, the video background offers emphatic visual context to the product offering.

Addressing the Common Concerns

Another point to the webpage’s credit: it doesn’t include any irritating music that plays automatically upon opening. There’s nothing to take attention away from the actual offer being made. But perhaps the most notable convenience was the distinct lack of load time. The page shoots up immediately, displays moving imagery that pushes the service it’s advertising, and exudes a cool serenity that puts a user at ease.

Well, that’s obviously my biased interpretation, and granted, I’m on a high speed connection so sites like that are tailor made for my particular UX. Yet I would say this addresses some of the most poignant concerns associated with the ambient video background trend as a whole.

Still, that doesn’t make criticisms of the trend unfounded. Let’s next examine a web page that might not have such an entrancing effect on this particularly enrapt end user.

Risk Everything Should Play it a Bit Safer

Risk Everything is a company looking to provide funding for startups through some unknown means. It’s something to do with selling clothes. The exact means remain largely unknown to me because I didn’t have the patience or attention span to really look through their website.

Risk Everything screen shot

Right off the bat, they just couldn’t hold my interest with this background.

So where did they go wrong?

This is a perfect example of what our uncouth commenter, Janeen, was talking about. I have a lot of problems with this “ambient” video background. You’ll notice that I’ve chosen to isolate the word “ambient” in quotation marks. That’s because it’s a key word with a key function in describing the role that these videos should play.

The Definition of Ambient:

  1. Of or relating to the immediate surroundings.
  2. Creating a relaxing environment.

 

Here’s my issue: this video isn’t surrounding anything, it’s the focus. It doesn’t add anything to my experience, it just distracts me from what the company does. Next, I’m not relaxed at all. The first image in the video is some guy lighting an M-80 firecracker, or something like it. I used to blow up action figures with those suckers when I was a kid. It wasn’t exactly a relaxing experience knowing you could blow off your fingers if you weren’t careful. I imagine that scene is supposed to correlate with the idea of risk taking, but it doesn’t inform me about the actual service.

After that, I have a lot of problems with the video itself. For one, it reveals nothing about any of the company’s products or services. It’s just a bunch of random scenes with hip young people engaged in odd activities with no unifying theme or thread between them.

It has no practical purpose whatsoever, it’s just a combination bell/whistle/pogo stick that can’t capture my interest.

Also you’ll notice in the screen shot above that you can’t see the white text against the background. This is a big pet peeve of mine. It’s pretty simple to outline the white text with a black border, making it clearly visible to the reader regardless of the background color. Yet they decided to just leave white on white and let me guess as to the text. That is if I’d ever even noticed there was white text in the first place. I might have been too distracted by the goofball doing his best Leo “king of the world” impression. The only thing missing was Celine Dion belting out the chorus of “My Heart Will Go On.”

Thank God for small favors, because that was missing.

Later the video flashes to a conversation between to other young men, one with gauges in his ears. And this is how I know I’m too crusty for my own good. Because I immediately start ridiculing him in my head, and wondering if anyone ever put a padlock in there to prank this silly misguided young’un.

I think that way and I’m in my late 20’s… I should go out more.

But this brings up the most poignant, pointed, and pointy point of all. These sites MUST be tailored specifically to a targeted audience.

UX Dilemma: Ambience Isn’t Identical Across Audiences

So we have two different sites that both employ the same trendy design technique, and both elicited opposite reactions from one user. Why? Is it because I’m fickle? Well, perhaps that’s got a bit to do with it. But the greater part of the UX that I appreciated from Todoist, but didn’t get from Risk Everything, was the added context.

I could directly relate the scenery from one video to the object of its promotion. In the other, I was left wanting, and to be frank, a little irritated.

The big takeaway here is that designers have to consider their audience. Do the target users care about bells and whistles or not? And if they do care about bells and whistles, how can they be implemented in such a way that adds to UX rather than distracts from the important content elements on the page?

I should certainly think it’s possible. You just have to know your market, and be careful not to overstep your boundaries. Discipline and restraint are always relevant to success, regardless of the field. It can be very easy to go too big and end up with an obnoxious or overbearing video, rather than the serenely disarming ambience you’re aiming for.

For those interested in how to integrate these backgrounds into their next projects, check out some of these how-to guides:

  • http://kesilconsulting.com/web-designer-magazine/html-video-background-tutorial/#axzz2rJD7LtCj
  • http://www.webdesignerdepot.com/2013/11/how-to-use-video-backgrounds-for-incredible-visual-impact-part-1/
  • http://www.webdesignermag.co.uk/tutorials/create-a-fullscreen-video-background/
  • http://dfcb.github.io/BigVideo.js/

 

To sum it up, I’d say there is a lot of potential for this trend, because it can indeed be gorgeously rendered. Load times, however, will be a factor in locations with low speed connections or on mobile devices. So remember the audience needs to be kept at the forefront of a designer’s thought process. Below are more examples of sites that use ambient video backgrounds.

 

frickmarketing

Frick Marketing | View Site

 

dougaitkenthesource

THE SOURCE | View Site

 

hoytodocambia

Hoy Todo Cambia | View Site

 

forty

Forty | View Site

 

lattrapereve

L’attrape reve | View Site

 

taginterativa

Tag Interativa | View Site

 

buildacity

Build a City | View Site

 

eclarify

eClarify | View Site

 

ffmark

FF Mark | View Site

 

yodabaz

Yodabaz| View Site

 

suffolkdance

Suffolk | View Site

 

whiteroomuk

White Room | View Site

What do you think of ambient backgrounds? Is there a place for this trend in modern design? Or are the usability issues insurmountable? Let me know your thoughts in the comment section.

 

About the Author

Zack Rutherford is a freelance copywriter. He contributes web content and especially snappy articles to TemplateMonster. Combat sports enthusiast and poetic soul, Zack endeavors to create beauty through syntax, sentence structure, and the liberal use of hyperbole. Follow him on Twitter (@zack_rutherford) or visit his website (Zackrex.com) to read all of his innermost thoughts and unfounded opinions.

ABOUT THE AUTHOR: