Auto-play videos are a powerful way to teach users about your offerings, but many of us hesitate to use them because of bad experiences of going to websites that immediately start playing sound. Some smart companies are starting to use silent video and HTML animations to improve conversions.

How are they doing it?
 

1: Silent Autoplay Explainer Videos

MailChimp

 

MailChimp is the first site that I noticed using a silent auto-play explainer video. To be technically correct they are not using a video, but rather have coded the animation into their homepage. These animations are typically built with HTML5, CSS3 and JavaScript.

I personally feel MailChimp’s animation is one of the best examples of an auto-play explainer. They are able to convey a lot of information in only seven seconds.

 

Fresh Dish

 

Fresh Dish is interesting because it is not a SAAS app. It is a personal chef service. Instead of showing how a user would use the app, they show the experience of having a chef cook a wonderful meal just for you and what it would be like to enjoy that wonderful meal with your friends.

 

KISSmetrics

 

Like MailChimp, KISSmetrics has an animation of a user using the app. The animation is also a coded animation.

 

2: Silent Autoplay Background Video with a Call to Action

Asana

 

I’m in love with how Asana is using their silent auto-play video to draw the Web visitor into clicking their call-to-action. In this example the call to action is to watch their explainer video.

It appears that they are doing this with Wistia, a video hosting service that allows users to easily embed videos of various sizes with calls to action. In this case it appears Asana has a large silent auto-play video stretched across the entire section with a button to play their explainer video.

As you scroll down their webpage it is very difficult not to be drawn into their call to action to play the video. I imagine that using this technique would improve results a good bit.

 

3: Silent Autoplay Carousel of Social Proof

HubSpot

 

HubSpot is using an HTML animation to rotate tweets from happy customers. Much like Asana’s example, it is difficult not to be drawn into this important section of their web page. But it also makes the visitor feel like there are tons of happy HubSpot customers. I believe it creates a much more powerful emotion than simply having static tweets.

 

4: Silent Autoplay Videos in a Blog Post

Wistia

 

 

Wistia uses videos of them playing softball for a blog post about their company’s softball team. The post has two short videos of their team playing softball. The videos are on a loop so they keep playing as you scroll down the post.

I’m sure the use of auto-play video in a blog post could be debated at length, but I’m a fan, obviously, as I’m using them in this post. I also used them in my post, What Makes Great Marketing Content. I feel the videos are a great way to show examples of what you are discussing in a post and a way to add more depth.

 

The User Experience

I reached out to Aubrey Johnson, Designer in residence at Science and user experience guru, to better understand the user experience of silent auto-play videos and HTML animations. Johnson also designed the Fresh Dish site above.

 

Sound vs. No Sound

Johnson explained that the origins of these auto-play videos and HTML animations were from years ago when websites first started using flash intros. Some of the intros used music and essentially hijacked the users’ computer. The interface was very focused and the sound would take over and sometimes embarrass the user.

The next step was embedded videos with auto play enabled on their site to explain their product. According to Johnson, the designers felt watching a video was easier than reading. These experiences were often viewed as being annoying and fell out of style.

These later experiences using silent videos and HTML animations are more refined because they’re not invasive and they ensure that the users are considered and cared about versus the other experiences where the user was not cared about. Johnson explained that before it was more about pushing a point across versus teaching, sharing or having some sort of engaged level of communication. The examples above show that they are considering the user and showing them that you care about their environment and their experience.

 

Autoplay vs. Click-to-Play

Johnson stated click-to-play lets the person visiting your site control their experience and their depth of engagement. The drawback is that they have to want to do that. If they don’t want to do that or they don’t notice your video, then you miss what is potentially a large piece of value that you can deliver to a visitor, which is why companies are using silent auto-play videos and HTML animations. They don’t want to miss the opportunity, but they also want to consider the user. Silent auto-play videos and HTML animations are a compromise that works for the company and visitor.

Video vs. HTML Animation

Johnson explained that the pros of using HTML animations through procedural graphics like JavaScript or CSS are that if you do it right, you get a ubiquitous experience across desktop and mobile. Users get the same timing and everything moves very similarly. But if the animations aren’t considered for mobile devices, you can blow the whole thing. Johnson stated bad animation is far worse than having static image. He said the con is that they take time to create and there can be a high cost associated with that approach.

Video provides a lot of flexibility. You can use a video across other channels such as YouTube and possibly get a viral effect. The cons are some mobile phones such as iPhones running iOS have Flash blockers that keep videos from auto-playing.

Advice for Starting a Project

Non-technical marketers should use tools like Keynote, PowerPoint or Hype to create mock-ups, suggested Johnson. He said there’s plenty of YouTube tutorials on how to do animations in Keynote and PowerPoint if people do not know how. You can build the idea in Keynote in an afternoon and then give that to an engineer and say, “Animate this in HTML, CSS or JavaScript.”

Johnson warned that you shouldn’t undertake an HTML animation project if you don’t have the resources to do what you want to do across your entire target offering, desktop and mobile. According to Johnson roughly half of the traffic that visits most sites on the Web is going to come through mobile and if it comes from email then the traffic gets significantly higher for mobile, because a lot of people will read email on their phones. The communication that you present during the first experience or landing page of your site needs to work for everyone if you intend to convert them into customers. He said it doesn’t make sense to compromise your conversion on a particular mobile device to have an amazing desktop experience.

For example, Johnson noticed that the MailChimp animations do not play on Chrome or Safari for iOS. MailChimp is using the animations to show how easy it is to use their product, but on mobile, it’s all lost.

On mobile Asana uses an image with a play button in place of the auto-play video. You have to engage it on mobile, but that’s at least better than a simple static image. Johnson stated that in the Asana example the communication isn’t necessarily a critical element so it wasn’t a huge loss, but if it were critical, core to the user’s experience, then the click-to-play isn’t optimal because you have to click on it.

The KISSmetrics animations worked across all platforms, mobile devices and desktop browsers. Johnson said it appears that they’ve put in the time and the effort to have consistency across all platforms and the reward is that they have a seamless experience for everyone.

Summary

The possibilities for using silent auto-play videos and HTML animations are endless and exciting. There are so many different ways to engage your users with these techniques. I hope this post has inspired you to utilize these on your site!

Do you have other examples of how to use silent auto-play videos and HTML animations?

About The Author

Torrey Dye is a B2B Marketer and founder of FunnelCake Labs.
FunnelCake Labs helps B2B companies create amazing content more quickly.Google+