Dota 2 has 100+ heroes to choose. Can its UI/UX ease the pain of so much info?
Usability is a particular love of mine from games to garden hoses, I feel it’s the paramount necessity in design; function before form. Of course, both should compliment each other which means even the most functional creation can belly flop if the design is positioned in opposition. So then, how does a creator develop a product that can appeal to as wide a range as possible?
Flexibility, of course! However, bending a hose can only change how it functions so much, which is why we’re lucky that software can be made customizable to such a degree for the end user. World of Warcraft is a classic example of a game that designed a base UI with an intended UX, but recognized that an ongoing live experience would definitely have emergent experiences from its players. The solution: addons. Thus, the player could alter the function and form of the game, tailoring the product to better suit each individual’s needs. This was a very broad approach to the customization, technically limited by the creators but with a ton of freedom given to the users. In the time since we’ve seen many games put customization into their products, but in a much more acute way dependent on an understanding of a particular need, typically a pain point.
In Dota 2, a 5v5 PVP MOBA, all players pick their hero from a shared pool of 100+ options, which as you can imagine is a lot of information to parse. To make matters worse, there will be perennial additions of new heroes for as long as the game continues to justify support. To combat this, Valve (the developer of Dota 2) gave the player a couple ways to choose their hero before the game: a horizontally scrolling list or a grid. Both have advantages with the list displaying less ancillary information thus being a bit less distracting, while the grid allows a much more verbose overview of the options. Typically as players become more experienced, they only use the grid to pick their heroes and eventually decide they may need an even more granular way to pick. Instead of trying to create yet another option that would inevitably be outgrown by the players, Valve enabled the ability to customize and rearrange the grid and even allowed users to reverse engineer the file that determines the grid’s layout. Now, the emergent designs can occur.
The other night I realized I had reached that point, the time had come for my own personalized grid. I wanted to make sure it served as many purposes as possible that were important to me such as hero role, my skill level with the hero and my interest in playing the hero. Since all the user is able to do is alter the layout of the grid or scale/position of each icon, I’d need to memorize the purpose behind orientation and arrangement without the assistance of designations such as color or labels. Once I realized how much thought I was putting into the concept, I knew I had a vague excuse to blab about my insane love of UI/UX by exploring my own needs as an end user.
So here it is, my final design, which I created with the assistance of a tool made by devilesk.
Let’s look at the logic structure for the design according to the important info I outlined before. Either due to the rule of three or because breaking down my most important factor (hero comfort/skill) would be too vague if by 2 or granular by 4+, I went with a 3 column approach along the horizontal axis. This left the vertical axis for more specific designations such as hero roles which would then be broken down to even more specific needs. Once I’ve fully committed the positional hierarchy of everything, I will be able to at a glance draw my eye/cursor to the exact hero to fit the need of the match I’m playing, be it more necessary that I perform well or fill a specific need.
The beauty and intelligent design of this system is that you are actually able to save multiple layouts and load them on command in game as necessary. This is another nod from Valve showing they understand their users, popularity of hero picks and each player’s skill level and preferences will change over time, so why limit them to only a single option? Now if only I didn’t have to go to a user created tool to get snap-to-grid functionality…
If you’ve gone through the effort of customizing a game to better suit your needs, especially if that game is Dota 2, I’d love to hear how you reacted to the freedom or limitations of the customization system. Bonus points for screenshots.