User Experience analysis: Introduction to interactive video Design

Recently, The Red Hot Chili Peppers launched a new single Look Around. What I love as an interaction designer is that they made an interactive music video for this single! This interactive video has caused minor repercussions in both the entertainment industry and the technology industry. I believe more artists will use interactive videos to increase fan engagement in the future!

Viewing address: http://redhotchilipeppers.com/videos/47-look-around-interactive

　　

 

Drag the mouse to watch the performances of the four band members in different scenarios. by clicking the furniture in the room, you can also watch the live photos when the band members take music videos. It is said that fans watched 6 times before and after to see the complete performances of four people and all the Atlas ......

In fact, the concept of interactive video has been around for some years, but the interaction methods are different. The innovative interactive experience perfectly caters to the public's greedy pursuit of freshness. It is necessary to study such a dynamic interactive media.

1. What is interactive video?

Interactive video is a new type of video that integrates the interactive experience into a linear video through various technical means. Its popularity originated in 2005. With the increase in broadband access speed and the maturity of multimedia playback Technology (mainly flash), more and more interactive videos were available. Originally, it was mainly advertising videos sponsored by advertisers. They used various novel interaction methods to attract people to watch and increase product exposure, which can be regarded as virus marketing. Today, we have created a variety of companies specializing in interactive video production. Even individuals can easily create interactive videos on YouTube.

2. Types of interactive videos

Interactive videos can be roughly divided into three categories:

Category 1: Customizable

This type of interactive video (interactive video, the same below) allows users to adjust variable elements of some videos during watching, but the video itself is still linear, this makes everyone see the same and different videos. The music videos of the Look Around interactive edition mentioned at the beginning are representative of this category (music videos won't change the paragraph as users click, it keeps playing, but everyone sees a different room ). The most basic experience is to move the mouse over an object to display the tag of the object information during video watching. The most common way is to use it as a clothing shopping guide.

Category 2: Session

This means that users can directly participate in changing the sequence or even results of videos in a way similar to sessions. videos can no longer be linear. Video designers prepare many endings and paragraphs for viewers to choose their own. For example, if Windows is a video, it is a conversation. we interact with Windows through a session window.

Category 3: exploratory

As the name suggests, exploratory interactive videos generally only provide few prompts (or even no prompts), allowing users to explore interactive points and ways in their own videos. This type of video is generally used in real-life scenarios (which makes it easier to generate a sense of substitution). It will be played cyclically until the user discovers an interaction point.

3. Tools and cases for implementing interactive videos

Tool 1: YouTube

　　

 

Many commercial and non-commercial interactive videos have been created on YouTube, and basically all of them are interactive. Thanks to the powerful online video editing function of YouTube, the designer can add a hyperlink annotation to the video. During the video playback process, design the time when the comment appears based on the plot content, when you select a viewer, you can link to the corresponding video. This is very simple and the effect can be very good.

(Action on annotation: http://www.youtube.com/t/annotations_about)

A case of making an interactive visual screen with comments: http://www.youtube.com/watch? V = m3MT59zc6Ms, which is actually an advertisement of the Psychological Counseling Center

　　

 

Tool 2: Flash

Flash I believe everyone is familiar with it. The Flash video embedding technology is said to have gradually declined in the form of HTML5 lust, but the so-called "Skinny camels are bigger than horses ", flash occupies almost 100% of the market share in interactive videos, thanks to its strong scalability, multi-platform compatibility, simplicity and flexibility. (The video editor of YouTube uses FLash technology)

Here we recommend 22 Flash interactive video clips designed by Otaku (Visual Testing) designer Olivier Otten. All are exploratory interactive videos, which are fun. You may be able to create a complete interactive video by combining several ideas.

Http://www.selfcontrolfreak.com/

　　

 

Tool 3: Creative coding

Software engineers can save the world. The omnipotent Coding can achieve a variety of unexpected interactions. Recently, engineers PetrosVrellis used openFrameworks (an open-source C ++ Toolkit) to implement an interactive version of Van Gogh's Starry Night. The effect was shocking and I was totally impressed. The demo in the video runs on the touch screen and is expected to appear in the form of an App.

Viewing address: http://v.youku.com/v_show/id_XMzUxMzcxMDc2.html

　　

 

With regard to the implementation of this technology, Petros introduced: "I have developed an algorithm that can generate a" flow "effect. About 80 thousand points can then be automatically generated by the computer, I have to set it manually. It is very difficult to do it right... I got 30 frames per second at a resolution of 1920x1080, with the intel i5-2500K CPU and geforce GTX560 graphics card multi-touch tracking with ofxKinect and ofxOpenCV background music took a lot of effort, but also a lot of luck Components)

Tool 4: Hybrid

Hybrid is the method that combines all the methods and types mentioned above for creation. This can often achieve the effect of 1 + 1> 2.

A famous advertisement on YouTube, "a hunter ___ A bear", is a custom combination of conversation styles, YouTube comments, and Flash animation.

Http://www.youtube.com/watch? V = 4ba1BqJ4S2M

　　

 

There is also a more high-tech, 360 ° panoramic experience interactive video, similar to the video version of the street view map, people have a kind of feeling into the dumb meditation basin, there is wood?

　　

 

URL: http://im360.immersivemedia.com/watch/im360/

The website also made iOS version of the application, download experience address: http://itunes.apple.com/us/app/nimmo-bay-360/id476439088? Mt = 8

4. Money prospects for interactive videos

As I said at the beginning of the article, the earliest interactive video comes from advertisement creativity, so the application prospects in the commercial market are naturally very promising. It turns out that users are buying this kind of interactive experience, and investors are often able to produce at a low cost. Compared with traditional media, it is easier to convert the audience into your customers.

　　

 

In the United States, a group of companies specializing in interactive video production have emerged. Here, we will provide you with reference. Among them, there are many well-known TV stations and top five hundred luxury companies in the world.

Http://www.videoclix. TV

Http://www.clikthrough.com/

Http://www.wirewax.com/

For a variety of well-known reasons, the domestic online video industry has not yet reached such a level of development. However, based on the Internet development experience, the Chinese market's demand for interactive video production will gradually increase, and we look forward to the efforts of creative workers, designers and engineers from all walks of life.

(This article is from the Tencent CDC Blog. Please indicate the source when reprinting)