2013_03_video_featured Design

10 Ways How Video Can Improve The User Experience

We love to get entertained. That’s why we like going to the movies, listening to cabaret shows, or visiting concerts. If we had a choice, our entire lives would be focussed much more on enjoyment, rather than dealing with all the serious stuff. Online we are no different. Sure, most of the time, we have a goal and probably some virtual time frame for reaching it. But what we really want is to have fun and to enjoy ourselves — of course while solving all our problems on the side.

There are many different ways how you can make your website more enjoyable. For example, you can work with parallax scrolling, make your website more personal with full page background images, or incorporate storytelling in your design.

Another way to make your website stand out and to engage your visitors is through the creative use of video. Here are 10 examples that show how video can improve the user experience of your website.

Create atmosphere

Video is a great way to create a certain atmosphere on your website. Motion picture is an emotional medium. Together with the right sound, this can be a very effective tool for drawing people in and creating a certain mood or sentiment.

Spotify


The full-page background video takes you through different worlds with all different kind of emotions.

Spoitify does a great job using video as emotional trigger. They use a full-page background video, which takes you through different worlds and lets you feel all different kind of emotions, such as fun, freedom, relaxation, excitement, and happiness. The one big tagline says: “Music for every moment”, which perfectly reflects the content of the video. Also the optional audio is chosen very carefully as a soundtrack for the emotional journey you take on the site.

blacknegative


Watching the site you get the feeling of standing in a forest, looking up at the sky, feeling light and carefree.

The creative agency blacknegative use a lot of video on their website and in their work. Video becomes a very strong emotion carrier when browsing through their site and reference projects. On the homepage, they welcome you with a very subtle and appealing animated view of the sky, which is mostly covered by treetops. Watching the site you get the feeling of actually standing in a forest, looking up at the sky, feeling light and carefree.

Entertain your visitors

Video is also a great tool to entertain your visitors. We like to watch videos, because it’s so easy and we don’t need to anything else but sit and wait for what comes next. It’s exciting because we don’t know what to expect. We might get surprised, shocked, or simply informed. Anyways, usually it’s worth finding out.

Kickstarter


Kickstarter is an awesome example of how to use video to entertain your visitors.

Kickstarter is an awesome example of how to use video to entertain your visitors. They decided to use video for their team page. However, they don’t just play one video that you can watch once and that’s it. They show a loop of a video sequence in which every single team member has a couple of seconds to make an impression. The video can be scrolled horizontally and when I first stumbled upon this page, I enjoyed it so much that I probably stayed on that page for half an hour. This really is one of a kind team page. You should check it out and let us know in the comments if you like it as much as I do!

Tori’s Eye


Rather than having a boring stream of your Twitter search, Tori’s eye makes the presentation of your search results fun.

Then there is Tori’s Eye. You probably know the site. It’s a Twitter visualization tool, inspired by papercraft and origami. Rather than having a boring stream of your Twitter search, Tori’s eye makes the presentation of your search results fun. I admit, it’s not exactly handy as your only twitter app, but it is fun to use for browsing a certain topic.

Attract attention

Also, with video you can attract attention and draw your site visitors in. Movement attracts our attention. While this might not be the case anymore for animated ads and banners, it holds true for animated content. If we realize that the animation is not there to distract us from reaching our goals, but if it actually helps us solve them, we are very responsive to movement.

Le singe fume sa cigarette


On this website, one subtle animation draws attention to the CTA.

The French group Le singe fume sa cigarette make use of very subtle motion picture effects on the site of their new album. While the video covers the entire page, the only animation is the smoke that comes from the cigarette. This draws immediate attention to the monkey and subsequently to the central call to action button in the middle of the page.

Weroll


Subtle animations draw attention without overwhelming the visitor.

The site Weroll use an animated header. This is a very effective way to draw attention to the headline and more important to the two call to action buttons. The header shows a car driving through a landscape. While the scenery stays the same, the colors change, giving you the impression of different times during a day. This animation is very subtle, but it shows the flexibility of the concept and draws attention without overwhelming the visitor.

Tell a story

Video is the medium to tell stories with. And why shouldn’t you explain your product with a story? Don’t make people read or even interpret an info graphic. Make use of the fact that people like to watch video and wrap your message in motion pictures.

G-Star


After watching the entire video, there is a story and the creepy dog suddenly makes sense.

I love what G-Star does on their site. They welcome you with “THE ART OF RAW” and the running skeleton of a dog, wearing a denim jacket. On first sight this is very abstract and maybe even macabre. But when you look closer and especially after watching the entire video, there is a story behind it and suddenly this creepy dog makes sense.

Flipboard


The simplicity of the design is very appealing and yet time there are many details that add to the user experience if the site.

When you visit the website of the Flipboard app, you really don’t need to do anything else but sit back and watch. If you do that, you will know what to expect from the app — and if you are not yet using Flipboard, you probably will after visiting the site. The simplicity of the design is very appealing and at the same time there are lot’s of small details that add to the user experience of the site, such as the patterned background, the blossoming rose, the hand that is interacting with the iPad, and last but not least the shadow effects, which add a sense of depth to the whole scene.

Add personality to your site

Personality — what would a good user experience be without it? exactly, not much. Video or animations might be just what adds that important personal touch to your site. Remember, video doesn’t need to be professional, or super complex to be effective.

HitReach


Small details, such as a responsive Team page, can add a lot of personality to your site.

The Team page of Hit Reach is a nice example of how video can make your site more personal. The overall design of the site is very clean and professional. However, Hit Reach does not appear a distant or impersonal design agency at all. Thanks to many small details, such as their responsive Team page, they have added quite some personality to their site. When hovering over the different team members, you get to see a quick video of their personal lives.

Denise Chandler


Even simple and very small animations can add huge value to your site

Denise Chandler gives us an example of how even simple animations can add huge value to your site. The animated fair shows us that a lot of thought has been put into the design and that Denise has an eye for detail. Sure, she is far from being mainstream, but who cares about mainstream anyways? The site offers you a great reference point of her work.

Your thoughts?

What are your experiences with video in modern web design? Do you have more inspiring examples that you want to share with us? Or do you disagree? Let us know your thoughts in the comments below!

Leave a Reply

Your email address will not be published. Required fields are marked *