Alex Auw

Case Study: HUD in Open World Video Games

Problem Statement

Creating a clean HUD can make or break the immersion for different players. Especially in online MMOs and Role Playing Games that use a lot of complex gameplay elements, games get a mixed reception on blending its UI and gameplay together. I was interested in the structures of HUD and UI elements that go into these types of games.

My Philosophy on HUDs

I prefer to design a HUD and UI to be accesible to the player, without creating elements that may seem distracting during any type of gameplay.

-Efficient

-Flows cohesively with the environment

-Does not interfere with ongoing visuals

Breath of the Wild

The main story is simple, main story missions are divided into four areas, while the game is tailored to work around the player’s interactions. 

Battles are tightly controlled and fast paced, with most fights relying on the player’s instincts. Breath of the Wild’s UI is minimal, while specifically keeping abilities with cooldowns visible.

The Witcher 3

Gives the player lots of free space to move around the world. Lot of areas fluctuate in different enemy levels, so side missions and main story missions help the player progress

Like a lot of RPGs, The witcher’s battle system consists of abilities, pouch items, and buffs. It’s UI is compact, and prioritizes abilities that change over time over simple actions such as attacking or dodging with color.

Xenoblade Chronicles 2

Xenoblade Chronicles 2 is an MMO-like RPG, that is closely knit into its story. It’s battle system heavily relies on the coordination of arts, which are a set of unique abilities with cooldowns for each party member. 

In this battle, the player is in charge of the protagonist, who plays a significant role in damage. The remaining two party members specialize in a tank and healer role. The set of circles serve as arts, which are actions that can each go on cool down when used. 

Studying Xenoblade Chronicles 2

I wanted to study the UI that was tied to Xenoblade Chronicles. Battles are reflected upon timing and the coordination of abilities between each party member. In the graphic shown, there are three party members that represent damage, tank, and healer. The player is responsible for taking control of one character, but can also control the actions of his/her party members. Since each party member has their own unique set of abilities, battles can be very diverse, giving the player many different approaches to coordinating their team.

User Interviews

I recognized that a lot of games do give the player the option to hide certain HUD effects, such as the minimap, health bars, and abilities to give a more immersive experience. I wanted to look more into how players utilize these features. So through my user interviews, I asked questions relating to adjusting the HUD elements. 

“I don’t usually adjust the HUD elements until it’s my second or third time playing the game, this is usually when I get more used to the controls”

 

“I don’t change these settings because I think it is the way the developers think the way it is meant to be played”

 

“I don’t change the HUD elements unless the game has more simple controls, such as Ori and the Blind Forest or Breath of the Wild.”

Low Fidelity Modeling

After analyzing Xenoblade Chronicles 2’s battle mechanics, I believe there was a way to keep its HUD from being over cluttered, while being subtle enough to feel more immersive. Because of the complexity of Xenoblade’s battle system and amount of visuals, I created low fidelity wireframes that help simplify the battle system.

Health Bar

The health bar for each party member is unnecessarily long, where the character’s level takes a large portion of the bar. I improved the bar further by decreasing its length while also condensing important stats.

Enemy Health Bar

Since battles are meant for the player to deplete the enemy health bar, it remains static on the top of the screen. The enemy can be exposed to debuffs from the player’s attacks, which can be displayed on the top left of the health bar.

Blade Arts

Blade Arts represent the four abilities the player has access to. It’s layout reflects the button layout that is presented on the Nintendo Switch controller, where the X,Y,A, and B controls are bound to its respective blade art. This portion of the HUD is important, as it keeps track of art cooldowns. I understood the importance of keeping track of the cooldown effects for each ongoing art, so I lined the abilities to be subtle and less obnoxious, while being able for the player to keep track of the ability cooldowns.

Blade Combos

Based on the amount of abilities that each party member has used, a blade combo can be developed. Depending on the party member’s attack element, there are many possibilities to form different blade combos. Because the name of the combo takes up a big portion of space, I prioritized the hierarchy of the combo icons.

Blade Selection

On the bottom left corner, the player also has the ability to swap between different blade members during the battle. I took note of the amount of space in between each blade and condensed it, creating more space to see ongoing visuals. I further combined the blade member’s name and icon so it is easy to distinguish what type of element they are, without keeping the static nameplate next to it.

HUD Alignment

Because of the sheer amount of icons used on one screen, I took further note on the displacement of every icon and abilities. There is a lot of negative space not being used on the bottom corners of the screen, and the abilities for each character do not keep a consistent shape, conflicting between round and sharp edges. 

Key Points

I think Xenoblade’s battle system can be improved on. The HUD feels clunky and overemphasized, and the text next to each player art takes an unnecessary amount of negative space, while also being redundant at the same time.

Low Fidelity Wireframe of the Original HUD

Low Fidelity Wireframe of the New HUD

High Fidelity Wireframe

High Fidelity in Context