top of page

Game Analysis: League of Legends

Example Analysis of Game and Replay System's UX

Images are all screenshots of Riot Games' League of Legends (2009). Names have been blurred for confidentiality. 

 

This page is an example analysis and is unlisted. Check out my other (better) game UX analysis pages:

The Task

Examine the overall UX of League of Legends based on my ongoing experience with the game, with an emphasis on the replay system and its usability. 

Research & Discovery

To understand the game, pain points, and the player experience I conducted research and discovery in the following steps:

  1. Expert Review

    • Game Pillars​

    • Areas for Research

  2. Observation & Experience Evaluation

    • Observations

    • Issue categorization & notable events

  3. Identify Strengths, Weaknesses & Pain Points

Step  1: Expert Review

Playing the game myself, I examined the game through a marco lens, trying to identify what I thought were the core game pillars. These pillars help me to examine the UX and determine if there are any design elements that actively work against these pillars.

Game Pillars

Pursuit of Mastery

  • High skill ceiling, low skill floor

    • champion or role dependent

  • Emphasis on Esports

  • Abundance of information in-game

  • Low barrier to entry

 

Strategy and Game Knowledge​

  • Strategic positioning, using map to advantage

  • Dependency on players to know their role & champion to be successful

  • Resource management and counterplay

  • Fog of War

 

Champions and Mechanics

  • Each champion has vastly different abilities and mechanics

  • Using items & runes to alter champion abilities and power

  • New champions release schedule, item upgrades

Areas for Research

Based on the pillars above, I identified these areas of research and also areas I am interested in examining:

  • Mastery:

    • Is the in-game UI friendly for both new and experienced players?

  • Strategy:

    • Is there enough emphasis on giving information to players?

  • Champions and Mechanics:

    • Can players see what actions are available to them at any given moment?

  • Replay system:

    • Is it user friendly? Does it match the in-game experience?​

Step  2: Observation & Experience Evaluation

This 'Evaluation' is an informal process where you play the game or use the tool, and note anything that comes up that relates to the game pillars, or actively works against them.

​

This might normally be used to examine how other players play League of Legends, and noting anything that happens that might be a sign of bad UX.

Observation Notes

For this I decided to use my own experience with the game, by playing it and using the replay system, and noting anything that comes up. Special attention was paid to observations related to the game's pillars and things that work for or against these pillars.

In-Client​

  • Process of pick/ban is same for normal (non-ranked Draft mode) as well as Ranked

  • Level cap to play game modes seems comparably low to other games:

    • 5V5 Blind Pick = Level 3​

    • 5V5 Aram = Level 3

    • Draft Pick = Level 10

      • Needs at least 20 champions​

    • Ranked Solo/Duo or Flex​ = Level 30

      • Need at least 20 champions​

  • During Ban Phase, hard to determine if you're banning or 'Declaring your intent' (i.e. pre-selecting a champion so your team knows not to ban them)

  • Customizing your character skins during champ select is a bit clunky and is hard to tell when you have skins for certain champions

  • Client is a small windowed app, so when a match is found, very clear feedback & sound helps re-direct the player back to the client

  • Picking runes:

    • encountered an issue when picking runes- when changing two runes sometimes the runes swap slots, so you accidentally might pick the wrong runes​ (see image below)

​

RunesFlow.jpg

In Game

  • Re-worked store page allows filtering items by role and their benefit

    • i.e. ability power, armour, attack speed, etc.

      • See image below for example of shop with items filtered by role (support) and benefits (ability power and mana regeneration)​

    • Suggested items sorted by what players usually build on that champion

    • Also 'recommended' showing what items are good against what champions

​

Shop1.png

  • Item descriptions are colourful and draw the eye

    • ​Icons for each type of stat​

    • Highlighting key words such as ‘Slow or Immobilize’ (in different colour, Magic Damage in Blue, etc. (see image below)

Item1Description.png

  • UI displays a lot of information, camera view still relatively clear

  • Customizable HUD elements & size

  • Controls very user friendly and customizable

  • Locked camera, ability to re-centre camera back on player with spacebar

  • Scoreboard and timers for important buffs

    • See image below for scoreboard example, with jungle creature buff timers in top centre

ScoreboardTimers.png

​​Cooldowns & Items

  • Very clear when things are on cooldown in your HUD

  • Timers on items

  • Blue outlines on items that can be used

  • (see image below for examples)

Abilities Cooldowns.jpg

Replay System​

  • Right away, big focus of the screen is on the score header

  • Each champion has their overview of their character portrait, summoner spells, runes, ultimate

  • Items for each champ hidden under [tab] button

  • Right away see Minimap which exists in game (familiar)

  • Timeline control with significant events

    • User can quickly find events they'd want to review​

    • Kills/Deaths show killer, easy to find specific deaths in high-scoring games

  • Camera control widget in bottom left

    • separate window from timeline, emphasized as different ways to control playback​

​

ReplayOverview.png

Camera

  • ‘Directed Camera’ mode

    • Automatically follows action

    • Can still manually change camera position

    • Automatically switches back to selected camera mode in dropdown after 5 seconds

    • Can click on player to follow them (temporarily when in directed camera mode)

  • Double clicking on champion or on player 'card' moves camera to that view (player is centered on screen)

  • Can also interact with the mini-map to re-direct the camera as seen in the game

  • Ability to zoom out/in farther than normal with camera, hidden under a hotkey?

​​

  • Can turn on/off ‘fog of war’ effect (see image below)

    • Core gameplay element

      • can see potential usefulness for detecting cheaters & seeing through eyes of opponents​

    • Turning it on/off helps actually see player’s perspective and not an ‘all knowing’ third party view​

FogOfWarOnOff.jpg

Timeline

(see image below)

  • Showing significant events on timeline

    • Such as deaths, turrets destroyed, objectives taken

    • Allows user to skip to moments they want to review rather than guess when they happened

  • Controls:

    • Jump back 15 seconds

    • Play/Pause

    • Record

      • Make a video clip in the replay system itself

    • Change speed (+ and – buttons)

      • Text showing speed

ReplayTimeline.png

Step  3: Strengths, Weaknesses, Pain Points

Just listing some of the major strengths, weaknesses, and pain points that came up during my review.

Strengths

  • League of Legends continual updates and content additions keeps the game fresh while allowing players to master the basics of the game

    • Variety of new champions and old champions to master in each role​

    • ARAM & rotating game modes allow players to practice different game elements (such as teamfighting with ARAM, or skillshots with URF)

  • Various UI elements make give a depth of information, while remaining user friendly

    • Colours and Icons are used in item descriptions help people easily identify what an item does​

    • Showing buff info, spell and ultimate cooldowns help novice and seasoned players determine their next move

  • the HUD in-game and in Replay emphasizes important info, while minimizing screen real-estate.​

    • HUD elements are scattered around the outside of the screen​

    • Utilizing corners of the screen to keep middle relatively clear

    • Hud elements are also scalable and customizable

  • Replay system is intentionally designed to help players find important moments to review quickly

    • Timeline design with deaths & objectives highlighted for each team​

    • Directed camera jumps between moments of action

  • The ability to 'clip' replays in replay mode streamlines the content creation process and saves valuable storage space​

Weaknesses/Pain Points

Weaknesses & Pain Points are related specifically to elements I tested

  • Picking champion skins while in pick/ban phase requires the user to scroll through multiple tiles to even see if they have a skin for the selected champion.

Karma_Skins.jpg

Specific to Replay

  • Camera control in replay sometimes does  not behave as expected

    • When in 'Directed' camera view, after selecting to follow a certain player (by double clicking their character), the camera always defaults back to the 'directed' view after 5 seconds​

    • In order to ensure this does not happen, the player has to manually select 'Manual Camera' from the bottom right Camera widget

  • Camera movement is done in increments, making it a bit difficult to get a specific angle of something 

    • especially if you want to make a clip of a moment, having the camera be smooth & not choppy is difficult

  • The default settings for the HUD do not use space as effectively as they could​

    • Such as the camera widget and score board, they are comparably quite large compared to other on-screen HUD elements​​​

Recommendations

Based on the above mentioned strengths/weaknesses, this is the space where you can make recommendations sorted by value and effort, with an emphasis on the 'Low Hanging Fruit'- or changes that will have the biggest impact on the player experience with the lowest effort. 

High Value, Low Effort

Re-order champion skins in pick/ban phase so unlocked skins appear first on the list

This makes it more likely for players to flaunt any champion skins they own as they are easier to spot before the game starts. With more players aware of what skins they own, they are more likely to use them in-game and motivate other players to seek out certain skins for their champions, increasing skin sales and ultimately more profits.

Skin Recommendation.png
Skins1.png

Figure 1: Current design of skin selector

Figure 2: Recommended design, prioritizing owned skins first

Allow runes in certain slots to be changed, rather than assuming players want to change multiple runes at once

There is a high possibility of error while selecting runes during pick/ban phase, and allowing runes (especially secondary runes) to be changed according to their slot can prevent critical errors. 

Runes2.png
High Value, High Effort

Tweak camera functionality in Replay to allow for fine tuning of camera positioning

This might likely be a larger undertaking due to the nature & importance of the camera in MOBAs. However, allowing smooth camera movements helps players create more clips that are centered on the action in the way they expect, and take higher quality clips with fewer tweaks.

​

Also, consider the user needs for various camera angles and consider if the camera switching back to 'Directed' mode is the behavior expected by users

Low Value, Low Effort

Reduce unnecessary space in replay HUD so more screen real estate is dedicated to the action.

As a low value change, this could be added to the replay backlog as the changes do not give huge value to users.

 

Freeing up more screen space for action can involve reducing the size of non-essential HUD elements, and reworking the ordering of buttons so widgets take up less space on the screen. Below are some initial suggestions, but a full examination of on-screen elements could help reduce the HUD size more efficiently.

  • In Figure 2:

    • reduced score header size​

    • reduced vertical space for camera control widget, as a single button is placed on an empty line.

      • This would need to be tested with the dropdowns in use, as dropdowns might need to open up (which could be confusing to some users)​

ReplayOverview.png

Figure 1: Current design of replay HUD

Replay_ScreenSpace.png

Figure 2: Recommended design of HUD elements

bottom of page