Here’s How the League of Legends Client Could Be Improved
This is a heuristic user interface & experience review for the League of Legends client.
If you’ve ever played the all-time popular video game League of Legends, you’ve definitely come across the League client. It has been through many, many changes and iterations (mostly for the better), just like the game itself.
The League of Legends client’s user interface as we know it is already incredibly intuitive and fine-tuned as compared to the majority of other games, therefore this review consists of improvements and quality of life changes that may help further refine our League of Legends experience as a whole!
This analysis includes four sections that compromises of the four main tabs in the League client — the Profile Tab, Loot Tab, Shop Tab, and Collection Tab.
Please mind that this was made quite some time ago before publishing here, therefore any points made here are subject to change! :)
Profile Tab
“Set Profile Background”
Problem Situation
This Profile Background function is meant to allow players to show off their skins in their profile, therefore most players would want to set bought or paid for skins as their profile background more than they would Classic skins (which are the ‘base’ skins the champions already uses).
However, this interface is missing out features that allows the player to immediately sort out the self-acquired skins.
As you can in the screenshot both Acquired and Classic skins are mixed together for player selection. The currently two drop-down boxes “My Collection” and “Purchase Date” also do not serve the categorization of only acquired skins.
Possible Solution(s)
There are currently two drop down boxes for categorizing the backgrounds. Both of them serve this feature but not well enough as they include the Classic skins in categorization.
This can be solved very simply by including a checkbox ‘Show Classic Skins’. This makes it very easy to accommodate both group of players that either only want to select from the Skins they have acquired, or include Classic skins.
Reflection
Why add a checkbox and not add an option in the drop-down boxes instead?
It might be due to the left drop-down box already having four selections to choose from — “My Collection”, “Champion”, “Set”, and “Tier”. Adding an option of “Acquired” and “Classic” might be too many.
Update: Since the time I made this they actually did iterate it to show all the acquired skins categorized together by purchase date (e.g. Acquired 2018) first in the My Collection filter, only then followed by “Others” which are the Classic Skins when you scroll down.
Great!
“Match History”
Problem Situation
If you look at the Match History page here, for most ranked players, you would to want to view the most important thing — League Points (LP) gain and loss.
Players earn League Points (LP) when they win ranked games and lose them when they lose ranked games.
However, this is not available in the current client because it would allow someone to track LP across a whole server and essentially figure out Riot’s MMR (Matchmaking Rating) system.
Then again, this just forces ranked players to resort to sites like op.gg to track their MMR. It may not be 100% accurate but it’s currently the only best alternative for ranked players.
To add on, Riot’s Communication Lead have stated “We’re already working on adding LP gain/loss on private match history” which sounds like they were working on a solution! Unfortunately that promise has been a year in the making and there has not been any further updates on it.
Possible Solution(s)
The details like your performance rating (A, B, C, etc) and how much XP you gained is already available beside each match summary. Placing the LP gain or loss number along with these details will be perfect.
One thing I would like to note is that this detail should only be available for the current player to see, no one else (for player privacy).
Reflection
Can this solution be better improvised? Are there ways to create a collapsing UI to hide certain details and show LP as the main thing? Another question is, will adding such details be more cluttered in the UI?
It may get more cluttered since there are already so many numbers on the screen. However the LP gain/loss is actually really important to a ranked player.
A solution can either be showing the LP gain/loss number only when you click each match history or adding a collapsing interface as mentioned.
“Clubs”
Problem Situation
What is the main reason that people join or create Clubs? It’s for the Club Tag, to be able to represent and show off their club. So, the question is why is creating a club tag so ‘hidden’? The button that creates a club tag is the tiny lock! Are you able to find it?
If I were to ask a relatively new player where to click to create the club tag, I’d think they probably will be clueless.
“Stats”
Problem Situation
This is a very interesting feature to talk about as it provides many insights like your play style, average KDA ratio, time spent playing, etc. But what this feature is missing are very important filtering functions to categorize the champion pool by win rates and games played.
Possible Solution(s)
- Win Rates
The Stats feature do show the win rate per champion if you click on a specific one but being able to sort all of them instead of individually by win rates may help increase the usage and functionality of Stats.
2. Games Played
Being able to see which champions are your most played is an important detail. You might be thinking that the Champion page (as shown above) can fulfill this function since most players including me have been doing that.
However, for example in this screenshot, you would assume that Sona (in the first position) is the most played champion, right? That’s actually inaccurate. Lux (in the second position) is actually the most played champion according to Champion Points*. Why? Because this page sorts the Champions by Mastery, not Champion Points!
That is why there should be a category that is sorted by Champion Points which translates to the Most Played feature, that can be added into the Stats page.
You might ask why not just add it into the Champions page? There can be a confusion between Mastery and Champion Points as Champion Points increases slowly over games which can then unlock a Mastery Level (not actually achieving it). Only when the player attains an S- or S grade for a game, then the player achieves a Mastery Level 6 or 7.
This means that it is possible to achieve a Mastery Level 7 but have lesser Mastery Points than other champions. Therefore, implementing this Most Played categorization in Stats will be the best way.
- When a player finishes a game, they’ll earn CP (champion points) toward mastery levels.
Loot Tab
Problem Situation 1
I noticed that this tab felt very congested. And that’s when I realized that everything had been squeezed up into the left side of the page! This isn’t for nothing though.
This is due to the right side’s space being saved up for opening boxes, forging keys, spending tokens, etc. All these interactions needed a space to happen, which is why there is a blank space on the right as shown below.
Although this may excuse the reason to accumulate most of the content onto the left side, the advantages for having such a split screen isn’t good enough. There are possible fixes to this, without having to sacrifice space.
Possible Solution(s)
Firstly, here are the handful of interactions you can do in the Loot page divided into those that needed the extra space and those that didn’t.
- Needs Extra Space
- Mythic Crafting (Gemstones)
- Token Spending (e.g. Worlds 2018 Shop)
- Forging of Keys
- Doesn’t Need the Extra Space
- Shard Crafting
The main problem of widening up the screen would be due to the interactions that needed extra space, for example you would need a Shop interface to appear somewhere on the screen for the player to spend tokens to purchase items (as shown above).
As shown above, these are the interactions that do not need the extra space. When interacted, they would have drop down boxes appear for the player to choose what they would like to do with the item selected (as shown above).
Interactions that do need extra space, a solution would be to make an overlay appear in front of the screen. This not only allows the Loot page to feel less congested, the other interactions won’t use unnecessary space.
Problem Situation 2
This is how the 2017 client looks. Look at the bottom left — it has both blue essence and orange essence (two forms of in-game currency) side by side.
However, in Patch 7.22, Riot decided to replace Influence Points (at the top) with Blue Essence. This allowed Blue Essence to shift to the top beside the Riot Points currency, resulting in Orange Essence staying at the bottom. This separates the three currencies into two different areas where the players can view how much they have of a certain currency.
Possible Solution(s)
The solution is to move the Orange Essence up with the Blue Essence and Riot Points. This increases player convenience slightly and still doesn’t take up too much space in the navigation bar.
Shop Tab
Improvement
The improvement I came up with was for the large section of content on the front page of the Featured page. I would think that if that was the focus of the Featured page it could be a lot bigger, widening it and shifting the other boxes below it.
This could grab a larger attention to whatever content is in the box, and potentially gain more sales.
Here are some examples that use this type of focus:
Collection Tab
“Champions”
Problem Situation
If I wanted to see Udyr for example, I shouldn’t go beyond all the locked champions to do so. Even worse so if the champion is placed further below.
The main reason of viewing the Champions tab is to view all the Owned Champions in order, but the default view All Champions does not do that. Instead, every time a player wants to view all the owned champions they have in order, they would have to open the dropdown box and change the view selection, which is a hassle considering how many times a player does this action.
This organization method also does not make sense as this screenshot is currently organized into ‘All Champions’ and by ‘Mastery’.
However, even though I have never played the locked champions before, it is sorted into such a way that shows as if I have more Champion Points on champions I have never played before then some of the champions I already own.
Possible Solution(s)
The default view setting should already be sorted under ‘Owned Champions’, not ‘All Champions’, or at least be saved from the last change.
“Skins”
Problem Situation
The “1/10” number is really an eyesore especially when player would just like to admire the skins they already own.
Possible Solution(s)
There is ‘Show Unowned’ checkbox for the players to allow uncomplete skins of a set to appear. This is a great function as players may not want to see skins they have not obtained yet, so they could uncheck the box.
This function can be brought further by disabling the “1/10” number when the ‘Show Unowned’ box is unchecked. This will allow the player to feel more ‘complete’ when viewing their skins.
Improvement
The ‘Alphabetical’ bottom left section that allows you to sort out the skins you want to see should be similar to the Champions Tab section. It should be presented not as a dropdown box but as a selection box, to maintain a standardized user interface throughout, especially if the options are similar.
“Emotes”
Problem Situation
The circular button beside the Save button is a ‘Reset’ button that removes the current selections of Emotes the player has equipped. This is a very ambiguous button that is not as clear as it should be, considering it is a reset button.
Possible Solution(s)
- Replacement
This circular icon is present throughout a couple of places in the League client. Replacing this icon with a clearer icon that represents a ‘Reset’ is necessary.
2. Confirmation
When the player does click this button, a popup should appear to confirm the reset. This is rather important as if a player curiously clicks the button either not knowing what it does or accidentally doing so, the page will be reset and cause a minor hassle for the player.
Improvement
Similar to the Skins tab, the “14/77” number should not appear unless the ‘Show Unowned’ box is checked.
“Wards”
Improvement
Similar to the improvement for the Spells tab, the Wards tab should allow interchanging of Wards inside the League client. You should be able to preselect the Ward skin you want to use without even being in the Champion Select screen.
Spells
Problem Situation
The descriptions for each Summoner Spell are very complicated and long, and especially confusing for new players. If a non-League player would take a look at this description, they would either be baffled or skim through, which misses the points of this entire tab. Of course, the video presented is meant for showing what it does exactly but simplifying the descriptions will be necessary for explaining what it does.
Possible Situation(s)
This screenshot below is from the Runes tab, which shows a checkbox on the bottom left that allows the player to see or not see detailed descriptions of the Runes. This should be available for the Spells tab as well.
For example, a simple description would be:
Ghost: Your champions gains increase movement speed and can move through units after accelerating for 2 seconds.
A detailed description will then include the full explanation with numbers and details like in the screenshot.
Improvement
You should be able pre-select the spells you would like to use other than having to be in the Champion Select screen.
“Icons”
Do you notice any difference between these two pages?
The first screenshot has ‘Show Unowned’ unchecked, whereas the second screenshot has ‘Shown Unowned’ checked. Well, the numbers “12/14” do actual disappear when the box is unchecked!
This interaction is already made possible in the Icons tab, why the choice not to implement in the other relevant tabs? This interaction is probably also available in the Chromas tab, but as I do not own any I was unable to verify.
Conclusion
Many of us League of Legends players and enthusiasts have already gotten very accustomed to the League client’s tabs and interactions that it is rather difficult especially for myself to be able to criticize the client objectively.
However, I was still very eager to do this as League of Legends has been one of my favorite games and I only want the best for it, even including its client.
I might be doing another heuristic analysis review for the in-game client which is an entirely different user interface, when the time comes. But until then, I hope you at least somewhat enjoyed this publication and maybe attained some insights about the League of Legends client as I have.
Cheers! :)
