Interactive Video
Published in

Interactive Video

Plot branch component

This interactive ability supports the audience to make plot choices based on their own positions or preferences.

When playing to the key nodes of the plot, this component can set 2 or 4 interactive options for the audience, and after making the choice, the audience will enter the corresponding branch plot or the corresponding ending.

The branch plot components are divided into two categories: “countdown selection” and “Interruption selection”.

User value: the audience makes choices based on their own positions or preferences and affects the development of the plot, so that users can gain achievement and pleasure in their choices and changes. )

Branch plot.

This interactive ability supports the audience to make choices based on their own positions or preferences, participate in and influence the development of the plot.

Because of different choices, the audience will enter into different content to experience.

Branch option component.

The branch option component can be used to achieve the interactive ability of the branch plot, and the standard components of the component include:

  • Title: used to guide users to interact, explain the interactive scene and so on.
  • Countdown progress bar: it is used to limit the interactive operation time, while ensuring that users can watch the video content normally according to the default selection result without interaction.
  • Option button: display the content of the option and feedback the user’s choice.
  • Component floating layer: distinguishes the interactive component area and the dynamic effect of the bearer component appears / disappears to ensure that the interactive component is displayed smoothly and amicably and prompts the user to enter the interactive point.

The standard composition styles of the branch option components we provide are as follows:

For the use of branch option components, creators need to start with the following links and comprehensively consider the design of shooting, editing and branch option components, in order to achieve the balance between audience interaction cognitive processing and content rhythm.

Shoot specific content for component stay period.

When using the branch option component, it is necessary to reserve time for the audience to select the branch during the component stay period.

Unlike promoting the development of content at a normal pace, the video content during this period will mainly serve as the reference content for the interactive choice of the audience, filling in the selection time of several seconds.

(Note: in order to ensure a good interactive experience and content rhythm, we recommend that content creators specifically design and shoot this part of the content! ).

1. Specific content serve for interactive.

The specific content used in the component stay period usually does not contain important plot information, which aims to render the situation and atmosphere in which the audience chooses, or to show the thinking process of persona selection, so as to enhance the audience’s sense of substitution.

2. Leave more clearance at the bottom of the content screen.

Because the floating layer of the bearing option in the branch option component occupies the height of the picture from below, it is easy to cover more content of the picture in extreme cases. Therefore, for these shots images, the creator needs to adjust as much as possible to the bottom clearance.

Ensure that the audience completes the interactive cognitive processing quickly.

The cognitive processing process of the audience starts from understanding the interactive scene to the end of making a choice.

Your content ensures that the audience can complete the cognitive processing of the interaction in a relatively short period of time, so that it helps the audience to make easy and fast branch choices, avoiding the tension and other interactive burdens caused by branch choices.

Content creators can be specially designed from the following aspects to ensure that the audience quickly understand the interaction and make choices.

1. Introduce interaction with content.

Before the emergence of the branch option component, your content needs to be combined with the content to explain the interaction scene and define the interaction goal and intention, so that it allows the audience to start interactive cognitive processing in advance.

Make sure the audience can make a quick choice when the branching option appears.

Content creators can consider introducing interaction through “role dialogue, inner monologue, narration, and even in the picture, the action, picture and plot of the characters who are highly related to the selected content”.

In general, the clearer the content is introduced, the clearer the interactive intention is, and the more specific the interactive direction is, the shorter the time it takes for the audience to make a choice.

2. Introduce branching options using component animation.

The animation effects of the branch option components usually not only prompt the audience that “you need to start making a choice now”, but also serve as a psychological buffer from “the user understands that this is an interactive scenario” to “making a choice”.

The specific ways of introducing component animation include but not limited to: using dialogue, narration and other subtitles as the title of the branch option component, combined with the dynamic effect of floating layer animation to introduce branch selection.

3. Reasonably control the number of options.

The selection time and the number of options follow the Hick law in interaction design (that is, the more options, the longer the cognitive processing time of the user).

Reasonable control of the number of branch options can effectively reduce the difficulty of the audience’s understanding of the interaction and enable the audience to complete the choice easily and quickly.

4. Reasonable design of option content.

In order to make the audience choose the branch easily and smoothly, the content of the branch option should avoid involving the plot itself as far as possible.

There should be obvious differences between the several choices provided to the audience to ensure that the audience does not need to compare and judge the options for a long time to complete the choice.

Reasonably control the rhythm of the content.

1. Avoiding interactive choices slow down the pace of content.

During the stay period of the branch option component, the specific shooting content will mainly carry out the performance of “the atmosphere when the user chooses”, the role thinking process and so on.

Therefore, this part of the content may change the rhythm of the video, or even slow down the normal pace of content development.

Content creators need to make reasonable planning to achieve the balance between branch selection rhythm and content rhythm.

2. Preview feedback time for interactive video service system.

After the audience makes the choice, our system needs about 3 seconds to load the subsequent video content corresponding to the selection result, so as to ensure that the content switching is natural and smooth.

Content creators can synthesize all aspects of the situation and consider “how do I plan special content for the 3s feedback time of the system?”




Creators can contribute videos with multiple branching storylines so that viewers can interact with the video. Viewers can interact with this type of video directly on the player, choose different options, and experience the different endings.

Recommended from Medium

Design Research and Law & Order Aren’t as Different as You Think

What is Capstone?

Wasabi, a Pekingese of East Berlin, Pennsylvania is posed after winning the Best in Show at the 145th Westminster Kennel Club Dog Show at Lyndhurst Mansion in Tarrytown, New York, U.S., June 13, 2021. REUTERS/Mike Segar

The Difference Between Double Shot Molding And Overmolding


Last Wish: a Feature of Bank Jago— UX Case Study

Flowchart editor UI

Redwheels — Website Design

iGEM Team and Project branding

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Chier Hu

Chier Hu

More from Medium

Utilizing Webpack and Create React App with Zendesk’s Custom Pages

Inverse Data Flow between React Components using CRUD

Why does a software developer need to implement CI with Jenkins | Ansible | Artifactory?

The project CRT-Skeleton