In Apotheon, every character looks very similar to others. The only difference is that they wear different color clothes. The main character wears green color, allies wear blue color, enemies wear red color and npc usually wear yellow color. If the background color of this game is white or any light color, this setting makes sense. However, most of Apotheon’s background color are orange, yellow and brown. It would be difficult to read warm color on characters. In other words, it’s difficult to distinguish enemy and npc.
This will cause whenever a character run towards you, you will attack. Because you are not sure if it’s enemy or not. From a UI perspective, this setting is not user friendly and it will cause user to give many unnecessary inputs. The image above is an example of a player attacking an npc to see if he is an enemy.
How to fix it
In Apotheon, enemy has different weapons, attack range, hp. All these informations are important for players. Color shouldn't be the only difference between enemy and others.
For hp info, they designed that you can see the hp bar of the enemy you just hit, and the hp bar will disappear after a few seconds if you didn't hit that enemy. This is a good design for Apotheon, since in most of time, you will fight with a bunch of people. If all of their hp bars are visible, then those hp bars will be crowded together. But for attack range and the clarity difference between enemy and npc, the existing design is not good enough.
In this new UI, player and each enemy has a range indicator now. First, it’s a big visual difference between enemy and npc; second, your attack range indicator will only activated when there is a nearby enemy to attack, so it’s a signal that tells you: ‘you are now in combat’; third, it shows players what is the attack range of both the enemy and himself, so players can make more accurate and meaningful moves.
The range indicator for ranged enemy is a little bit different from the indicator for melee enemy. In Apotheon, there isn’t a very efficiency way to dodge Archer’s attack. The existing smartest way to contest with ranged enemy is to use a shield to block the attack. However, they have a UI design problem with the info feedback of their weapon’s durability too. Which I’ll write another post to talk about (In Apotheon when your weapon/shield broke, you automatically swap to the next weapon. There isn't a way for player to know when their weapon/shield gonna break. When you are in a fight, your weapon/shield broke and you swapped to a new one, it can totally cost you the fight). This new UI design also solve the problem more or less. Now you can see what is the max range of enemy archer and where his arrow gonna land, so you can really dodge it.
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
Hand of Fate is a very special game. It’s a role play card game with 3d combat system. You can build your deck like in Hearthstone, and go to the dungeon to fight with enemies like in World of Warcraft. The visual style of their card design is great. The UI design for most part are clear and stylish too. However, the attribute UI in combat, is bad. Some UI designers put cool art style over friendly user experience when work in a very stylish game, and this is a great example.
For most of time in this game, you are playing cards with the npc. Every card is an encounter which might give you good stuffs or bad stuffs that will affect your combat game play. The basic stats are Health, Food and Gold. Every time you encounter a card, you lose 1 food. Some of encounter cards are ‘stores’. You can spend your gold to buy new equipment or artifact cards. The other informations in attribute: weapon, shield, bless (buff), curse (debuff), artifact. These all look pretty cool. The informations are clear. Even when you have a lot of cards, it won’t block major information since the main interactions in the phase are focus on the middle of the screen
However, they did the same thing in combat, and that’s horrible. There is a card for every bless or curse you get; there is a card for every weapon, shield, artifact and other items you equipped. That’s a lot of cards. When your cards are many enough, they will go out the screen. But the bigger issue here is that those cards are masks. They almost blocked the left corner and the right corner entirely. Therefore you can’t see the traps or enemies in the two corners, and that’s bad, especially for a 3d realtime dungeon combat system.
How to fix it
First, I still want to keep the card visual style in UI, since it’s the main feature of the game, and it looks good. Second, I want to minimize the information area so player can get more informations from the 3d world. Also, it gives the space for develop team to add more combat features since they should no longer be worried about that cards will go out of the screen. Also, the size of every card is the same, I want to change it a little bit to show the difference between primary and secondary informations.
In the new UI, bless and curse are now shown as icon. It gives more spaces for both information feedback and more features; Health now in a smaller card, and Food and Gold will no longer be shown in combat; There is a size difference between active equipments and inactive equipments so player now can distinguish primary and secondary informations.
Valkyria Chronicles is a tactical role-playing game in which the player uses a unique turn-based battle system called BLiTZ (Battle of Live Tactical Zones). During their turn the player views an overhead map in Command Mode, but zooms in to control each individual unit on the battlefield in Action Mode. By using their troops the player must fulfill various conditions depending on the mission in order to achieve victory, most often the capture of a major enemy encampment.
Upon completing missions, the player is awarded money and experience with which to upgrade their materiel and character classes, respectively, and the game’s story is advanced. There is an option named ‘Book Mode’, it’s like the main menu in general. Except the battle game play, all other features you can play start from this Book Mode. To be honest, the gameplay of this game is not balanced. Characters are suppose to corporate with each other, but using the strongest character to finish all the moves seems to be the easiest way to win. However, their Book Mode Interface is fantastic.
The chapter page looks like news paper. Description near each episode is both information and decoration. Most of episodes are distributed horizontally which indicates the timeline. Some episodes are bigger, some are smaller. It gives player a common sense about each episode. Such as what is their importance/length/difficulty. Some games also show these informations by adding importance icon (star), length icon (progress bar) or difficulty icon (skull head), etc. What Valkyrie Chronicles did make the information a little less clear, but also a perfect match to the story itself: It’s not a menu, it about your story. It’s vivid. For those of you who want to make a rpg with a great story line, and you want your episode/chapter menu also shows the taste of your story. This Book Mode UI is the perfect reference.
There are capital letters on each tab indicates different functions. Red color tab means you already unlock that function; blue color on the other hand means you cannot use that function yet. When you select a tab, the book will flip to that page. Besides the animation of page flipping, the tab changing is also a very vivid detail. This is a good example of the ‘juicy’ and polish thing of UI design.
Let’s stop here
There is too many sub functions and details in this Book UI. It’s a perfect example of how to make a good narrative diegetic interface for RPG (I would love to see a version with mouse control though). It’s stylish, but also clear and easy to use. It’s vivid, both the visual and interactions meet the narrative of the game. If you are interested in it or you need a good reference for the main menu/chapter selecting UI of your own RPG, go check the game! If you need a bad reference, go check my post ‘General Visual Problems of Sunset Overdrive UI’.
Invisible, Inc. is a procedural turn-based stealth game where you control an elite group of spies, infiltrating into corporate locations for information and financial gain. The game features procedurally generated levels, permadeath, and is a stealth game through and through. What you do is to take control of Invisible's agents in the field and infiltrate the world's most dangerous corporations. Stealth, precision, and teamwork are essential in high-stakes, high-profit missions, where every move may cost an agent their life, every information is key to succeed. Klei Entertainment has spent almost 2 years working and iterating with these fundamental principles and their information visualization looks almost perfect.
//I’m still editing this post. But if you are interested in it or you need a good reference for the information visualization design of your own game, go check the game!
Sunset Overdrive is an open world third-person shooter game. The player needs to fight off the zombie-like enemies (called OD in game) to survive. The fiction world is beautiful. The colorful and stunning visual art makes it already good enough for just running in the city. Their unique run-and-shoot gameplay and numerous amazing weapons also provides the most exciting and unique TPS game experience ever. However, their UI sucks in general. To match the visual style and the atmosphere in this game, they use graffiti style fonts and layouts, strong color for every part of UI regardless the primary/secondary relationships between informations. I burned my eyes by just using it.
//I’m still editing this post. But if you are interested in it or you need a bad reference for a UI that screw the information, put stylish over usability, use a bad font to make everything hard to see, make the game beautiful but not functional, go check the game!
Crafting UI is a very common and important UI element in many games. In This War of Mine, the player won't survive by scavenging alone. Most useful equipment and consumable items can also be acquired through crafting. Weapons, alcohol, beds or stoves, anything that helps you survive can be crafted. The crafting UI in This War of Mine is simple, clear and user friendly.
//I’m still editing this post. But if you are interested in it or you need a good reference for the crafting/workshop UI of your own game, go check the game!
