The Intricacies of Esport Broadcast Overlays

Esports has dramatically changed over its relatively short existence, from local tournaments & LAN parties to sold-out stadiums & international events. In that time, the way people have watched it has also evolved. When esports was reaching its renaissance back around the late 2000s or early 2010s much of the technology behind streaming was still in its infancy. At the time esport broadcasts relied on Internet Protocol Television (IPTV) which originated around 2001-3; from 2009 onwards, services like and own3d began to make live internet broadcasting more accessible to a growing audience [1]. Since then, there have been substantial improvements to streaming tools available to the public, such as custom overlay builders like Streamlabs or broadcasting software such as OBS. What was once only possible with professional tools within the broadcasting industry became usable by anyone with a small amount of knowledge, opening the proverbial floodgates on what streams could do technically.

A personal, and rather niche, example of such evolution in action would be in the community-led esport of Team Fortress 2. Early broadcasts of competitive TF2 play was presented primarily using the in-game visual assets & spectator function, but as time progressed more sophisticated tools were developed. These include custom in-game assets, external controllable stream overlays and broader modifications to the game that give the broadcaster more spectator functionality. Most of these tools were created by community members or used advancements in streaming technology at the time. This gave amateur esport producers the ability to setup and run professional-looking broadcasts from the comfort of their own home.

An example of an older competitive broadcast [2] and a newer one [3] from the Team Fortress 2 community

A lot of modern high-production esport streams contain information that is not normally presented on in-game head-up displays (HUDs). However, a question that is not discussed frequently is whether such streams are showing information that is relevant or if it is unnecessary and potentially confusing for new viewers. Taking a standard sports broadcast for example, it is observable that they tend to avoid showing a significant amount of information on screen at once, preferring to leave more in-depth analyses to the commentators. Data such as individual athlete statistics or team formations tends to be shown intermittently during quieter periods of a match such as half-time. On the other hand, video games contain more information which is crucial to understanding the current state of the match, such as a player’s health or what equipment they have. An absence of such details would be a detriment to the viewers overall experience. The inverse is also an issue; having too much information could alienate the viewers more unfamiliar with the intricacies of the game. Different organisations within a range of games have taken diverse approaches to the challenge of controlling visual information.

A screenshot from a BLAST Premier CS:GO competitive stream, a professionally run broadcast [4].

To anyone unfamiliar with Counter Strike: Global Offensive (CS:GO), what can you pick apart from this image? Those who have experience with games, you may be able to determine that Team Liquid have more players alive, yet Faze Clan is winning the overall game and that this player is in a rather precarious situation. You may also recognise that there are 30 seconds left and possibly that it is currently the 18th round, from which you can draw the conclusion that Team Liquid is likely going to win the round to make it 9-9. However, you may have little idea on who has economic advantage or why this player is using a handgun against people with assault rifles. Given enough time with this image, the average person could conceivably begin to unpick the greater contexts surrounding the game. But in a live match it would be difficult to unravel what is happening without more experience with the game. The broadcasters behind this stream, BLAST Premier, have acknowledged the problem and addressed it somewhat with the Firepower bar near the scores at the top. This gives a brief insight into who is winning or expected to win the current round based on a variety of different factors. Simply placing this information on screen allows people of differing experience with CS:GO to get a sufficient understanding of the match. Those with a lot of knowledge about the game can recognise that Faze Clan are saving their money for a later round by not purchasing expensive equipment; people less familiar with CS:GO have a good idea of who is going to win this round, but not necessarily why.

A screenshot from the Overwatch League, a professionally run competitive league and broadcaster [5].

Let us try again with another game, Overwatch that is significantly faster-paced than CS:GO and features a range of abilities and traits. Asking someone new to the game what was going on in this image would be harder to tell what is going on than the previous screenshot. For example, it can be determined that Seoul Dynasty is one point up, but Shanghai Dragons have 35%. What does that mean? Educated guesses could correctly determine it as one round to zero and first to 100% wins a round, but that is not immediately apparent. Secondly you could determine that the circle percentage in the middle is important since all players have one. To a fresh face, there is little information to convey what is happening at a higher level from a spectator’s perspective and that what is presented could provide more questions than answers. For more experienced individuals, such details would make sense and the lack of visual clutter from HUD elements. The result is that the moment-to-moment gameplay takes more of the viewers attention as compared to CS:GO, where viewers benefit from examining various elements on screen.

However, one stream is not better than the other. In Overwatch much of the contextual information is presented in the gameplay, not the HUD. Viewers tend to focus on the occurring plays and developing narrative of the match. On the other hand, CS:GO is a slower game that benefits from a more methodical viewing experience where part of being a spectator is drawing your own conclusions and anticipations. To facilitate that, broadcasters present viewers with more information to draw on. Presenting too much information in a faster paced game risks the viewer not taking in the right knowledge and confusing them. On the other hand, insufficient or unnecessary information in slower games could cause casual viewers to become disinterested or lost.  When designing spectator views in games or external broadcast overlays, designers need to consider what audience they are orienting this towards and what information is necessary for them to have the best experience.

One important question when designing spectator experiences is where the audience should be looking and when. Taking away attention from a pivotal moment in a match is incredibly disruptive and frustrating to a viewer; leaving player statistics or other sporadically useful information until quieter moments would keep the audience engaged until more exciting parts. Adopting principles like the Gestalt Laws of visual perception to structure information in a way that directs where the audience is looking. For example, having a part of the HUD or overlay that groups together information that is only relevant at the beginning of rounds guides viewers to look there at that time. Controlling where the audience is looking through implicit cues give them the illusion that they are making the decision to look at specific information in certain instances where in reality it is the designer implicitly saying “Hey, look over here now!”.

Another screenshot from the Overwatch League, before the next round is due to start [5].

The previous Overwatch broadcast has a great example of this. During a quiet part of the match, the broadcast shows a banner informing viewers that they may want to consider engaging with the stream though twitter, giving them quick access via a QR code. This places a seed in the viewers mind to check social media in between rounds, increasing viewer engagement and encouraging people not currently watching to get involved.

Some advice I received a while ago was that a big part of esport broadcasting is telling a story, and a good observer doesn’t always just spectate the player getting kills but tries to show the perspective that provides a viewer with the best possible experience. By designing organised & appropriate visual information in combination with commentating talent, more people can engage with esports without the need to know all the details of the game. Esports is one part of the digital entertainment future, so making it accessible to as many people as possible is incredibly important.


[1] Scholz, T. M. (2012, December). New broadcasting ways in IPTV–The case of the Starcraft broadcasting scene. In World media economics & management conference.

[2] eXtelevision. (2011, December 6). eXtv Live: ESEA-I Quantic vs Mix-Up – 12/5 [Video]. YouTube.

[3] EssentialsTF. (2020, April 5). Insomnia65 TF2 Lower Bracket Final: Se7en vs. Faint Gaming [Video]. YouTube.

[4] BLAST Premier. (2021, February 14). Faze vs Team Liquid, NAVI vs Faze Clan | BLAST Premier Spring Group 3 Day 3 [Video]. YouTube.

[5] Overwatch League. (2020, October 9). Losers Final | @Seoul Dynasty​ vs @Shanghai Dragons​ | Grand Finals Weekend | Day 2 [Video]. YouTube.