I came across the video Art Direction for AAA UI, by DICE LA’s Omer Younas, when I was looking for new materials to learn from. I was impressed by both the breadth and depth of the topics cover. It’s a great talk for anyone who wants a comprehensive view into Game UI/UX.
My biggest take away are the practical advises in HUD design. It’s hard to find good materials like this. That’s why I’m taking upon myself to summarize some of the lessons learned.
UI reserved colors
Colors can help the viewer group information. It makes sense to reserve a set of highlight colors for UI use only.
Omar gave an example of Uncharted 4, where colors like light blue, white, green, and red are used to make the UI standout from the in-game content.
I’m using Magic: The Gathering Arena as my example. Table top card games have the challenge of the diverse color choices of card art. That means the game can’t dedicate a specific color to the UI.
The HUD of MTG Arena use two colors for UI, orange and blue. The space in between the UI elements and the cards help the UI elements standout.
Orange as a color used can grab player’s attention easily. In this example, playing “Leyline of Anticipation” from the opening hand is a strongly encouraged move. The UI reflects the intention of the action.
In this screen, the player can play a card in response to the other player’s action. The player can also hit “resolve” and pass. The use of orange here does not indicate a dominate strategy. but it helps moving the game along.
Looking at the colored version of the screen, the blue only slightly standout from cards with blue color, but the VFX on the UI helps the UI elements to standout more.
In this example, the player does not have a card in response to the card that targets the player, there is no highlight on any of the player’s cards.
We can see from a game as complex as MTG Arena, the colors of the UI does not have a assigned meaning. Limiting the UI colors to two to make the UI look more cohesive. It makes sense to take UI colors into consideration when designing the look and the feel of the game.
Omar also suggested that color should not be the only indication of different features/attributes of a game. Games should be mindful of the players with color blindness. MTG Arena does a good job of using shapes. positioning and VFX to highlight different UI elements.
HUD Positioning & Alignment
What’s hard about HUD design is that there hasn’t been a unified standards to evaluate what makes a HUD good. Part of the challenge is a good HUD should compliment the gameplay of the individual game.
Omar in his talk show that traditional graphic design principles can still help us make better HUDs.
HUD elements should leave bleeding space from the edge of the screen. Borderlands 3 managed to fit all HUD elements within the safe zone verses many other FPS games are closer to the danger zone.
I personally haven’t experienced the difference in UX with FPS games that keep the HUD within the safe zone or close to the danger zone. It’s nice to have further evidence about this theory.
HUD should allow the player to focus on the actions. In the experiment above, I moved all the HUD elements to the right side of the screen. The business of the right screen contract with empty left screen. It’s unbalanced and will distract the player from the actions in the center.
HUD should provide visual anchors. The original HUD elements are all aligned to the edge of the safe zone. When I move the HUD elements to different offsets, it’s harder to obvious the HUD as a whole. It starts blending in with the background.
Simply having all HUD elements all aligned help so much with the overall aesthetics.
Everything Other than UI Art
UI art is only a part in the overall immersion of a game’s UX.
As mentioned in the MTG Arena example, VFX are applied to the UI elements to help them standout from the rest of the game. It’s appropriate for MTG Arena, because UI is a big part of the gameplay. FPS tends to have lighter VFX on the UIs, because they shouldn’t draw too much attention.
In FPS like Borderlands 3, sound effects play a big part in the game experience. The gun sound as it fires off each bullet, the sound of hitting targets, and the decease of enemies health count create a complete loop of visual, audio, mental models update. If no sound come out the weapon or no visual feedback on the bullet hitting the enemies, the player will intuitively know something is off.
In monster hunter, the monsters don’t have a visible health bar, the player needs to pay attention to the behavior pattern of the monster to decide the monster is close to defeat. For an action RPG, it’s a great design, as the game rewards the players who observe and study each monster and find their behavior patterns.
Some game controllers have built in haptic feedback like shakes. Games with those controllers can occasionally use the sake feature to enhance the importance of a particular moment.
Last Thoughts
Omar’s talk presents topics Game UI/UX in a systematic way. I only covered some highlight from it. Some other interesting topics are the biology of how we see things, usability principles, Gestalt Theory, motion mockups, and interactive mockups. Again, I highly recommend you to watch it yourself.
If you are also interested in Game UI/UX, feel free to send me an email at
donxu29{at}gamil.com
I’m happy to discuss more of anything covered in this article and more.