It’s hard to find someone in the United States who hasn’t seen some sort of professional sport on TV. Whether they have put a game on in the background at home, watched the big game at a friend’s house, or seen a live match on a bar or restaurant TV, sports are a fairly ubiquitous part of American society. From these traditional roots, a new industry has been rapidly moving into mainstream entertainment: the spectator sport that is professional video gaming, commonly called esports (short for electronic sports). Each year, hundreds of millions of people around the world regularly watch the best video game players compete for fame, glory, and a cash prize. No matter what the game, or whether it is played on a computer, console, field, or court, presentations of these sports always include an overlay to inform and remind viewers of the current state of the game. This week, I want to look at the overlay for the League Championship Series (LCS), which is the North American circuit of professional League of Legends (LoL).
What is League of Legends?
LoL is a 5 vs 5 Multiplayer Online Battle Arena (MOBA) released in October 2009 by Riot Games. In each match, players must work together with their teammates to earn gold to buy items, level up their champions, and destroy the enemy team’s structures. To accomplish this, players take control of one of 156 champions (as of time of writing), each of whom comes with up to 5 abilities, and can be equipped with up to 6 of 200+ different items to enhance their combat strength.
Since its release, Riot has held 10 world championship tournaments, 7 mid-season invitational tournaments, and thousands of regular season matches across 12 different regional leagues for LoL. These games have been watched by millions of people around the globe, and have had a huge influence on the organization and presentation of all esports.
The overlay
Each year, the LCS makes a handful of updates to their overlay, reflecting changes to the game, updated UX principles, and new branding guidelines from Riot. This overlay can be broken into three parts: the Hero, the Meat, and the Details. Each of these three sections presents extremely useful information for viewers to understand what is happening at any given moment, and what the state of the game is.
The Hero
Up at the top of the screen, the LCS displays a lot of information that is important for viewers to understand at a glance. Each part of this section gives viewers a very digestible indicator as to which team is currently winning, using the widely adopted strategy of “the team with the bigger numbers are winning”. The Hero shows viewers:
How long until the next dragon spawns, and what type of dragon it is
Which two teams are playing
In a best-of-five series, how many matches each team has won
How many towers each team has destroyed
How much gold each team has earned
How many kills each team has gotten
How many dragons each team has killed, and which types they have killed
How much of a gold advantage the leading team has
FTX’s sponsorship of the LCS
How much time has elapsed since the beginning of the game
How long until Baron Nashor (a powerful neutral monster) spawns
When one team slays Baron Nashor, this part displays how much longer the team has his buff, how much of a gold lead the buff has earned them, and Baron’s Red Bull sponsorship.
First, some positives: I really like the decision to color code the header. Since the two teams competing in each LoL match are always colored red and blue (the red team always spawns in the top right of the map, while the blue team always spawns in the bottom left), it makes a ton of sense to retain those colors when presenting information about each team.
The biggest problems I have with the overlay here are twofold. The first is the gold advantage shown between the FTX sponsorship and the dragons killed. If one team has killed any number of dragons, but does not have a gold lead, there is a large amount of empty space between the timer/sponsor and the dragon icons. This makes the dragon icons feel lost and somewhat disconnected from the rest of the overlay. I will also admit that I am not a fan of the gold lead being sponsored, displaying the cryptocurrency company FTX’s brand name and logo in one of the most prominent parts of the overlay. However, I do understand the financial necessities of maintaining a high level of production, so I will hold my tongue on that front. To fix this, I would make the black background behind the gold lead permanent on both sides of the sponsorship, so that any dragon icons that appear feel much more connected to the overlay.
The second issue I have is that the stylizing on the various parts of the Hero don’t match the rest of the overlay. In the Hero, each element is separated by a faint gray line (if you can’t see it, you’re not alone, but trust me it’s there), and backed by a flat black background. The other elements in the Meat and the Details (see below) however, are given a much more prominent outline, and textured to have an almost beveled look. Placing overlay elements in the top/center like this gives them a prominent position in the visual hierarchy (which is further increased by the large, bold fonts and large iconography), but this prominence currently conflicts with the inconspicuous styling used to outline each element.
The Meat
The Meat of the overlay mostly consists of no overlay, and rightfully so. The overwhelming majority of viewers tune in to watch the gameplay, so giving the gameplay as much screen real estate as possible is essential. Aside from the copious amounts of space dedicated to the gameplay, this section includes some useful information about each champion being used in the match:
The player’s team acronym and name
Which summoner spells (powerful utility abilities available to all champions) each player selected, and their remaining cooldowns
Each champion’s portrait and current level
Each champion’s ultimate ability, and its remaining cooldown
Each champion’s health %
Each champion’s secondary resource %
Each champion’s keystone rune (a passive increase to each champion’s power, selected before the match)
Each champion’s secondary rune set
I don’t have too many big problems with this section; the main one is that the styling doesn’t match the styling of the Hero, and I already talked about that. The icons showing the secondary rune set can also be difficult to see at smaller video resolutions, but increasing the size of the icons, or decreasing their intricacy, are relatively straightforward fixes.
There is also one addition that I would be curious to see how well it would be received. When one team kills Baron Nashor, I would like to see their info cards along either side of the Meat glow with a purple outline. As each champion loses the Baron buff, the glow could be removed, showing specifically which champions are wearing the buff instead of just which team has anyone wearing the buff. Some potential problems with this change would be how it affects the readability of the existing information, and how to make the effect accessible to those with some form of visual impairment. Even so, I would like to see something along this line be experimented with, and potentially implemented.
The Details
Down at the bottom of the screen, we get a lot of dense information that is mostly catered towards knowledgeable LoL players.The information presented here is largely meaningless to anyone not intimately familiar with the various items and basic mechanics of LoL, but is extremely valuable information for those viewers who regularly play the game. This section is where we see:
Details about the champion the camera is currently focused on
More sponsors
Player cameras
Detailed information about each champion’s items, kills/deaths/assists (K/D/A), bounty (the gold reward given for slaying the bountied champion), creep score (the number of AI-controlled units slain, and a loose indicator of how much gold that champion has earned) and trinket (one of three items that help reveal obscured areas of the map)
Each champion’s portrait
The minimap
As mentioned above, the heart of this section contains a trove of information that is indecipherable to first timers, and essential to LoL veterans. I don’t think this is a problem, however, since a much more digestible summary of the information is presented in the Hero, and also because it seems like a safe guess that the majority of the LCS’ viewership comes from people who play, or have played, LoL. Building from that, the presentation of the items, K/D/A, etc matches the way the information is presented to players in-game, which builds upon the information already thoroughly ingrained into the playerbase’s knowledge. Why make players re-learn how to read the scoreboard if you don’t have to?
Not everything with the Details is sunshine and roses however. The minimap on the right extends much higher than the sponsorship and champion Details panels on the left. This breaks human nature’s long-standing preference for symmetry, a topic upon which dozens of research papers have been done, and man does it bother the living hell out of me. Fixing it is simple too: a spacer could be added between the sponsorship and champion detail panels, or the sponsorship panel could be extended vertically.
In conclusion:
Overall, I do like this year’s LCS overlay. It is definitely an improvement over the 2020 overlay, but there are still some areas that could use some more attention. The overlay does convey the information that it needs to, giving newcomers easy to interpret information in the Hero, and veterans the information they want in the Details. It also leaves plenty of room for the gameplay to shine, and convey the same excitement that attracts millions of viewers to sports of all kinds. Since the overlay is updated every year, I’m curious to see what changes they’ll make for the next season, and hopefully address some of the flaws of this year’s.
In the meantime, happy spectating, and I hope you tune in next week!
-Mark