If you’ve played League of Legends long enough time, you know the average mmr on the red side is always slightly higher than the blue side, since blue side has vision advantage due to the camera angle. In isometric angle, you can see more from bottom to top than from top to bottom. It’s unlikely that Riot can balance the vision on both side, so they comes up with this way to balance matches: higher mmr = vision disadvantage.
However, even it’s hard to see from top to bottom, most of UIs are still placed at the bottom side of screen. Although every UI element in League has their usefulness, I still think there is a better way to minimize the current UI. Not just to free the bottom side of screen, but also to create the largest space for player to move, to cast and to corporate, and the best experience which means no mis-click, no disturbing and no overload informations.
How to fix it
First, let’s put existing UI elements into three categories: Secondary UI (check sometime); Primary UI (check most of time out of combat) and Essential UI (check most of time during combat):
Secondary UI:
You attributes (avatar, exp., money, stats) and inactive items
Enemy attributes (except HP and Mana) and items
Hp and Mana bar (at bottom)
Primary UI:
Mini map
Mini score board
Essential UI:
Timer
Your mini HP and Mana bar
Your spell/active item cooldown and availability
Buff
Enemy’s mini HP and Mana bar
Ally’s attribute
Rencent kills
Next step, let’s criticize the existing UI component combinations. Riot put Avatar, exp., inactive items (Secondary Info) together with active items (Essential Info). Clearly, they understand that is hard for people to find an Essential Info among many other Secondary Infos. Since for each active item, they put its icon on top of spell bar. So if you have an active item, there will be two same icons on your screen. Then, with so many active items (especially when you are playing a support role), there is no enough place for all the buffs. Accordingly, they separate buffs to two parts. One on top of spell bar, one on top of attributes bar.
...
There is a ‘display’ setting in ‘Option Menu’. You can show/hide name, health bar of players, health bar of minions (all useless) and HUD (almost useful). Hiding HUD is a good way to maximize the space of screen, but people barely use it unless they want to capture a clear screenshot, due to the lacking of game info. Isn’t that great if there is a hot key that allows player to hide all other UIs except the Essential UI?
I add a new option named ‘show/hide all unessential HUD’. I hope this new option can provide a better user experience and a better game play for mid-high level players.
This is my redesign for the new mode of LoL in-combat UI (‘hide unessential HUDs’ mode)
Repositioned UI components:
Hide unessential HUDs and put ‘ally attributes’ and ‘recent kills’ a little bit lower to free four corners, only timer left. (most often direction)
Add space between HUDs and the edge of screen. (lower chance for mis-clicking)
Recombined UI components:
Put health bar together with avatar, exp., money and stats
Put items together with spells
All buffs are placed together now, on top of spell bar
Visual update:
Removed the backgrounds of ‘recent kills’ and ‘spell bar’ (more space)
Add small number on the right side of mini hp/mana bar
Inactive item icon now are transparent
