The case study is based on my knowledge about UI/UX design and my personal perspective as a website and mobile app designer who enjoys video games. This study compares the hero selection screens of two MOBA games in order to determine which offers a better user experience.
League of Legends (LoL), commonly referred to as League, is a multiplayer online battle arena video game developed and published by Riot Games.
Dota 2 is a multiplayer online battle arena (MOBA) game developed and published by Valve Corporation.
LoL, and Dota 2 are the most popular video games in the MOBA (Multiplayer online battle arena) field.
"Multiplayer online battle arena (MOBA) is a subgenre of strategy video games in which two teams of players compete against each other on a predefined battlefield. Each player controls a single character with a set of distinctive abilities that improve over the course of a game and which contribute to the team's overall strategy. The typical ultimate objective is for each team to destroy their opponents' main structure, located at the opposite corner of the battlefield. In some MOBA games, the objective can be defeating every player on the enemy team. Players are assisted by computer-controlled units that periodically spawn in groups and march forward along set paths toward their enemy's base, which is heavily guarded by defensive structures. This type of multiplayer online video game originated as a subgenre of real-time strategy, though MOBA players usually do not construct buildings or units." - Wikipedia
Both of them are MOBA game and their style of play, their pace, their characters has many difference when it come to details. They share one common screen (the most important MOBA screen) that could affect greatly the user experience while playing MOBA games - the Hero Selection screen.
Hero selection, also known as drafting, is the phase in which players choose the roles and which heroes they will use against the other teams. This phase is so crucial that a team with carefully selected heroes can gain a significant advantage even before the match has begun. Different combinations of heroes on a team will result in different interactions between them, which could produce a variety of match outcomes.
On the LOL screen by default, players will see a list with a maximum of 30 characters ( out of 141 characters or depending on the number of champions they purchased ) on a screen sorted by alphabet. Only 30 of the 141 heroes were shown to the player on the first screen, which is only a fifth of the entire hero pool.
If their hero's name is not on the list of the top 30, they will have to scroll further down to find it. This could be problematic as they would have to recall the name, the image, and the location of the hero on a list of 141 heroes. They could select the roles on the top of the hero selections, but to do that they would need to know about the hero and the roles in the team. There is also an extra step that is not necessary. In the drafting phase, every second counts, and one wrong pick could lead to an unpleasant experience for that person and for the whole team. I count this as a cognitive overload for the users.
Additionally, even if they select a hero, there is no information for the player to know what the difference between heroes is on this screen. Which special characteristic sets the hero apart from a pool of more than 141 heroes? What is the difference between two heroes in the "mage" category? Also, if a player purchases a new hero, the list will change and the order will be disrupted until the player purchases all available champions.
DOTA2 displays all heroes on one board. As a player, it would be easier to select this way since they could memorize hero position and quickly indicate it. Another thing that would be beneficial to the player of DOTA 2 is when a player selects a hero, a summary about that hero would show up about the hero unique traits, their ability. On the other hand in LOL's screen , there is nothing to show that.
As players view all the heroes, they will be able to see which heroes are selected and what category they all are in to make their decisions. Additionally, other players could also provide suggestions about which heroes would make a good combination for the team by pressing Alt and clicking on the hero's image.
By comparing two hero selection screens, DOTA2 has done a great job of designing a hero selection screen that will assist players in making their decisions. In comparison, LOL still has some room for improvement on the selection screen. They could reduce the cognitive load from the user and create a better gaming experience by showing all heroes at once and categorizing them by role.
