The future of video component extensions
--
Introduction
On May 3rd, Twitch announced a new update for the future of video component extension for their website
For those of you who are not familiar with these, Twitch is a platform to broadcast live video content, mainly games, directly to an audience what a chat on the side.
Video component extensions were introduced around one year and a half ago on this blog post.
To explain quickly they are interactive webpages displayed on top of a live stream. This allows indy developers to create new tools and also games studio to create more engaging experiences.
I fall into the former category, I have been making twitch Extension for about a year, I have 2 published extensions Live Requests and Quests, an open source boilerplate for newcomers and an open source NPM package for Vue/Vuex developers.
The Update
On May 16th, Twitch officially published the update on the Twitch Dev forum.
First, let’s summarize the current problems and how Twitch plans to solve them.
At the moment, video component extensions have a lot of freedom. We can do the design as we want, our limit real limit is that the extension can’t have more than 50% of the width of the video player.
But, there is no standardized way to use extensions, each extension defines how it should be open, interacted with, etc. Which create a mess for the broadcaster using them and end up with an inconsistent experience for the viewers.
This update brings a solution to this by handling the opening and closing fo extension by adding a sidebar where viewers can click to open & close extensions
With this system we get a standardized way for viewers to interact with extension, thus making it easier to create engagement.
The position is really nice, just next to the chat, where viewers usually interact with the stream.
Also, there will be only one video component extension displayed so there won’t be any conflict between them or intrusive buttons to open them.
Changes in design
With this update, Twitch also aims to standardize how extensions are displayed to create a more consistent UX for viewers.
Components will no longer have a transparent background — a default opaque background will be applied to any unused or unstyled area of your componen
The reason behind it
That is to clearly illustrate the space being used by the extension, as various studies showed that viewers were confused when overlay extensions wouldn’t work because transparent components were placed on top of them.
With this, twitch wants to make sure all the viewers know where the limits of an extension are
Extension layout
With the new update, video components will now have a top bar to open the configuration. This will include the name of the extension, an icon to open the configuration and another icon to close it
Regarding the top bar. We wanted to standardize key extension actions like accessing setting options and closing the extension. This is a familiar pattern with any windowing system and viewers will appreciate clarity in how to control extensions in a consistent way.
The schedule
This announce gave us a pretty detailed schedule for it which is great to plan.
- May 15: Allow developers to test in the Developer Rig
- June 15: Beta phase
- July 15: Release
The research
This update is the result of months of research to understand how streamers and viewers understand and interact with Extensions and how we can make components Extensions something both groups are more eager to utilize. The feedback we received was clear — components needed to significantly change to really enable streamers to utilize video Extensions in an effective way.
Having research to support updates is a great thing because it helps to find the problems and ways to solve them.
As you can see, this update brings quite a lot of changes. But it also brings a lot of problems that I will explain now
The end of video components for interactive display
Some video component extensions, like the one I created called “Quests”, are meant to be displayed all the time, in my case because it’s an interactive overlay for steamers which uses only a small portion of the player. Some other extensions are meant to show reactions, engage viewers for a game, etc.
ReactionGifs allows the viewers to send GIFs to react to the stream. To do that in an efficient way, it needs to be displayed all the time but be transparent when there is no gif to show.
With this update, we lose the potential of engaging the viewers when the streamer needs it.
The death of flexible design
When we created a video component extension, we have to define the size in % of the video player. When the extension is used in a stream, an iframe of the defined size will be created on top of the stream.
The problem is, several extensions have a flexible design. Common uses are notifications, lists, reactions, etc.
So to manage that we have to use the maximum size that we will need. With this, we can use as little space as possible to offer a great viewing experience.
For example, here is Just Dance — Song Select, an extension created by Dist, it allows viewers to request Just Dance songs to streamers and the design of the extension is flexible depending on how many songs are available.
When you have no songs available, the extension takes very little space
But as soon as you have songs, it will take more space.
With this update, we will now have an opaque background covering the stream for space we don’t need to use all the time. This will force us to take all the space available and not allowing us to use a flexible design anymore, thus create a less engaging experience.
We are going back in time
Video Component extension have to live with the stream and create new experiences. To quote the article where extensions were announced
Extensions are truly a paradigm shift in the landscape of live video and we can’t wait for you to be part of it. Development on Extensions begins now.
- Emily Halpin / Twitch Staff
But on this update, we are moving to a windowed system. Which is not a new paradigm at all, we are just going back to the basics and we remove all the creative potential and innovations that attracted a lot of developers.
Having a top bar totally break the immersion of the viewers in the stream and makes the extensions feels like a pop-up window, not an interactive part of the stream.
Developers have been working for over a year with this creative freedom and a lot of video component extension were created without a windowed system.
Too little time to update
This change happens one year and a half after the release of extensions. So there is one year and a half of experimentation and work already available.
But right now we only get 2 months to move several months of work to a new paradigm.
Keep in mind that most of the extension developers have a job on the side and several of us have multiple extensions to update.
When you add these 2 factors it becomes very hard to update the work in time and keep a great user experience.
The dev community was not included
When we do research, all the parties need to be included in it. There was no consulting of the dev community and we just get the result of this update and we have to do all the work for something that won’t give a great experience to viewers.
Twitch needs to communicate with streamers
Most streamer know extensions exist but what they do and what are the limits are not clear to them.
Dist explained this problem pretty nicely.
The issue with extension adoption is not one that can be solved through design changes alone, as while there are design issues that could use improvement there is also a more fundamental issue which hampers extension adoption and growth and that is a lack of Twitch educating broadcasters and viewers.
Ask most non-devs what the broadcaster/developer split is for in-extension purchases, the majority have no clue, or wrongly assume the broadcaster receives everything from transactions they make.
Ask most broadcasters about video extensions. Many know there is a difference between overlay and component but they often don’t know the specifics, or that the limit is 1 overlay and 2 components. Or from a positioning point of view (which is a VERY important area considering some of these upcoming changes are because of extensions not playing nicely together) they don’t realise components cover up overlays.
Extension activation
Another problem linked to this lack of information for streamers is how video component extensions are activated.
Now, when a streamer wants to activate a new extension he needs to place the extension
This doesn’t allow the streamer to see how the extension will look. And to know how it will look on the stream, streamers need to start a real stream and then see if the extension is what they expected or not.
Click to open an extension
To get people to use an application, a website, or any tool it needs to be intuitive and quick to use.
Right now, extensions are directly displayed on the stream so viewers can quickly interact with them.
After the update, viewers will have to click the extension icon to open them. This will reduce a lot the interaction with extensions because by default the users won’t see any extensions and won’t think about using them.
Visibility vs Big brands
To amplify the previous problem, viewers also need to know what they are using.
When a viewer will have the choice between using a video component from a company like StreamLabs, Muxy, Op.gg, etc and an indy dev extension, his click will most of the time go to the well-known brand.
This will result in even less interaction for extensions created by smaller devs
Conclusion
This update tries to answer some problems but will create even more problem and reduce global engagement in video component extensions and will mostly be in favor of video overlay extensions that get untouched with this update.
All you guys here are key ingredients to make that magic happen. You have created new ways to consume, you helped our community create immersive interactive experiences and we think we are just getting started.
The developer community always helped to create extensions, tutorials, even to guide streamers and viewers.
Instead of putting us in front of the final result and telling us to update everything quickly, Twitch should have a discussion with the dev community to really see how we can all work together to create great experiences for everyone.
The community already raised problems before this update and even offered solutions
- Improve extensions activation flow
- Help streamers to go to their dashboard
- Improve the presentation of the extensions
Join the discussion
You can exchange with us on the Twitch forum
Credits
Thank you to Instafluff, Dist & Xzion for letting me use images of their work
