DotaViz is a side project that I did along with my friends in the HCI group at UC San Diego. It an in-game visualization for a popular real time strategy game called Dota 2 that aims to reduce cognitive effort for novice gamers and aid in better reactions towards the gameplay;
Timeline – One week
Collaborators – Kandarp Khandwala, Calvin Gomez.
Tools - D3.JS
Background and Motivation
Multiplayer Online Battle Arena (also known as Action Real-Time Strategy) games are the leading games in this digital era of esports. A lot of novice gamers are trying to get into such games however there is a steep learning curve for complex real-time strategy games like Dota 2 and League of Legends (the 2 most played RTS currently).
For this project, we focused on making an in-game assistive visualization that helps in reduce cognitive load for novice gamers on time-consuming trivial tasks of the game.
The visualization we had focused on was for a popular game called Dota 2. One of the hardest things in the game for novices is to have knowledge about various items to buy while playing the game.
Design and Development
Items are in-game equipment that provide heroes(the user character) with bonus attributes and special abilities. They can be purchased from several shops on the game map.
There are various tiers in the item list of the game. Lower tier (aka Basic items) items are combined into higher tier items (aka Upgrades), usually with the help of a recipe.
The current item shop in the game looks like the below structure.
However, we noticed that during the game, novices have a hard time trying to find the correct lower tier ingredients of the upgrade recipe.
Our aim was to convert the shop buying experience into an interactive visualization that would aid novices to make their items quickly.
We sketched out and brainstormed various visualizations that would help in novices get to the recipe faster.
Due to a large number of items and the hierarchical nature of the data, we realised that Hierarchical edge bundles would work great for our purpose. The categories could be separated out with color codes and a required space between them.
DotaViz Visualization (Hover over the items using mouse)
The above visualization classifies items in four ways:
- those that are owned (in black),
- those that are too expensive to be bought (in gray),
- simple items that are affordable (in tan),
- and complex items that are affordable (in brown).
Items that are not ingredients to make other items are “simple”, otherwise “complex”. These are interlinked based on relationship to other items (on hovering over).
A green line from the originating item means that it is an ingredient.
A red line means that the it is the recipe being “prepared”.
In the example shown below (click to zoom), it is assumed that the player has 800 “units” of gold and owns six items as illustrated. If we consider the item “Yasha”, it can be bought with the two ingredients owned by the player (and any recipe cost).
However, the recipes it is a part of (Sange-&-Yasha, Manta Style) are both unattainable at the moment (the cost is much greater than 800 units).
Example of a gamer trying to buy "Sange and Yasha" item from the shop
This is currently not easily done or understood by a player, who must check items one after the other in the “shop” (where they are organized by arbitrary “types”, which we know anecdotally to not be useful), requiring multiple thoughtful clicks to realize the same information.
We also make use of the principle of optimizing data-ink here to not show those recipes that are made up of ingredients that are too expensive to be bought with the amount of gold possessed currently (the ones in gray).
Future Work Considerations
In the future, items could be filtered further by providing recommendations (historical or crowdsourced, in accordance to the character/role of the player) that could help make this visualization the prime item-recipe display.
User testing is a significant part of any design process. We hope to generate statistically significant results by testing our visualizations with a set of users who are familiar with the gaming world.
While part of the design and development process involved user research with gamers, it was mostly qualitative in nature. User testing will generate useful quantitative data that can be used to improve our design, as it tends to bring out interesting perspectives that were previously overlooked.