Teamfight Tactics - damage numbers and information flow
At a glace
Context
As a strategy game, TFT requires players to process a wealth of information, and use it to make key decisions in a short amount of time. Due to this, the amount, availability, and quality of information given is fundamental to making the player experience for TFT fun yet challenging; too little and you are left feeling overwhelmed and lost, but too much and it feels stale and predictable.
Problem statement
How might we implement explicit damage numbers into TFT while still maintaining a consistent and concise information flow for players?
Value proposition
Providing damage numbers to players, fundamental gameplay knowledge is more accessible for new players and it also allows more advanced players to determine possible damage numbers quickly so they can utilize their time for other important aspects such as rerolling and positioning.
Team
- 1 UI/UX designer (me)
Functions
- Visual Spacing
- Interaction Design
- Game Design
Expected impacts
- improved game clarity
- better time utilization for players
- more fluid gameplay
Background
The fundamentals of Teamfight Tactics (feel free to skip if you're familiar with the game)
Teamfight Tactics, or TFT, is an auto-chess-style strategy game based on the MOBA (multiplayer online battle arena) League of Legends. Here's some fundamental information about the game to help you understand this case study better:
1. You start the game at 100 health points and battle 7 other players (or little legends) until one is left standing.
2. Throughout the game, you obtain currency which allows you to buy units, which fight on your behalf against the other 7 players in the game.
3. Health points are lost when you lose a battle; this occurs when the opponent's units slay all of your units.
4. Damage taken is calculated based on the stage of the game and the number of remaining units your opponent has left after slaying all your units.
5. You are given approximately 30 seconds in between each battle to prepare your units, so it’s important to make moves quickly. Each stage has 5 battles, with damage increasing as the stage number gets higher.
Game Breakdown and Analysis
When you have too much information for the screen, what do you do?
Analyzing the information flow of the game is important for determining if anything should be removed or moved with the addition of damage numbers. For this case study, the focus will only be on the PC version of TFT, since it is more common among the player base and the mobile version has its own set of challenges due to a decrease in screen size and tech specs.
After looking at the screen above, I compiled some key insights about each main section of the game, as well as an overall summary of how information is structured and presented.
Orange
- Compiles all other player data for the user on the right of the screen.
- Minimap at the bottom of the group is slightly redundant as it conveys the same information as the icons above.
Red
- Provides vital information about trait bonuses and items on the left of the screen.
- Utilizes tooltips to convey more detailed information, and allows users to pick and choose which areas they need more info for depending on the situation.
Blue
- Summarizes the key features a player can perform in a turn; buying XP, refreshing the shop, and buying champions.
- Uses detailed icons to avoid text clutter, which can also allow users to process information more easily.
Green
- Contains all related information about stage progression and round types.
- Similar to the blue section, heavily relies on icon usage to convey information quickly.
Yellow
- The largest portion of the screen, however, only shows detailed UI when the user interacts with the section. For example, only when you select a unit on the board do all hexes highlight to show a player where that unit can be placed.
Overall Insights
- In general, each section has a defined purpose, and only contains information relevant to said purpose.
- Each section displays the minimum amount of high-level information needed; allowing users to gain more detailed info by interacting with a particular section.
Implementation
Finding the perfect fit for the new module
Next, there needs to be a spot where the damage numbers can go that makes sense both from a visual and gameplay perspective. Following the observations made above, the most optimal place for damage numbers would be at the top of the screen (green section) since damage numbers are determined by the stage number and the number of units your opponent has left on the board.
Originally I was looking at placing the damage numbers under the timer to keep things symmetrical at the top, but doing so may clash with the bench on the other side of the board, which could both cause the player to lose information about the opponent and cause a lot of visual conflicts due to the lack of space and some champions being larger than others. Because of that, the option I decided to go with was following the layout of the probability tab in the bottom champion shop and creating a parallelogram that could connect to the left side of the stage/timer bar.
Learnings and Reflection
Tiny pain points and the importance of groupings
I spent a lot of time trying to think about what to look at for TFT and it was quite difficult at first, which I couldn’t believe since I play TFT so often. A lot of initial ideas were based on frustrations due to bugs, or really specific occurrences that wouldn’t be super meaningful to the majority of players. After a while (and through playing some TFT), I realized that you are never explicitly told how much damage you will take, and as someone who has played hundreds of games of TFT, I still don’t completely know the damage numbers for each stage, so I figured that a little panel that you help you do the math would be useful, especially for newer players who have more important things to learn about the game. It helped me understand that small pain points can make a world of difference and that solving them is just as important as bigger issues.
One thing that really impressed me about the TFT information flow is how well everything is organized and presented despite the massive amount of information on the screen. For example, gold is heavily tied to champions so they are located directly together at the bottom of the screen. Wherever you look, related information is always placed together on the screen and further information is only available when you hover over something, meaning you won’t get distracted by a wall of text across the screen when you need to look at other factors for your board. It’s something that is really nuanced which I had never really noticed throughout all my games of TFT, but after analyzing the game screen a bit more I came to this realization and I think it really helped me justify my decisions for the placement of the damage indicator module.