By: Preston Seiter (UI Artist)
One of the most important aspects of being a game designer is paying attention to the player’s actions and how they will interact with their environment, how they know they can interact with their environment, and how that helps them with the game’s progression in all types of genres ranging from third-person real-time strategies to first person-person shooters. Helping the player understand how the world they’re in works is important to the framework of how the rest of their experience will play out. There are certain rules you establish at the beginning that shouldn’t be broken unless it is purposeful. The player’s user interface help with this understanding of the world and the establishment of the game’s “rules” that assist with the interactivity and immersion of their environment.
According to an article written by Micah Bowers called, “Level Up: A Guide to Game UI”, there are 4 types of user interfaces in games that differ in how the components, characters, players, and world interact with each other. The non-diegetic, diegetic, spatial, and meta interfaces. It isn't uncommon to switch between these types of interfaces. Depending on the game, there will be a different need for a certain interface that can help with immersion and game's mechanics.
Non-Diegetic Interface
These elements exist outside of the game’s environment not affecting what happens within it and are unknown to the player’s character. These are only seen by the player and affect the mechanics by exposing the components of the core gameplay. These are also known as heads-up display (HUD) elements. The placement of these elements are important because it can affect the player’s immersion experience. In some games such as Crusader Kings, the HUD is necessary because the gameplay depends on it. Even with its cluttered screen, it shows all the options possible during gameplay outputting a lot of information for the player to keep track of.
Minimalism
DOOM (2016)
Developed by id Software and Published by Bethesda Softworks.
As a first-person shooter, DOOM perfectly crafts a HUD that keeps the player immersed in the world the traverse but also informed on what information is needed the most. The challenges in the top right are tracked in real time and objectives can be checked from the pause menu, health and ammo are easily communicated in the bottom left, and the currently equipped weapon with it's special and normal ammo capacity is scene below. There are no other needed elements (besides the gun's cursor) that need to be on the HUD itself.
Breach of Space (2022)
Developed by Calcite Games and published by Calcite Games and Itch.io.
We have a similar style of HUD layout to DOOM. In Breach of Space, I wanted to keep everything in the HUD to a minimum and only display what's necessary for the player to get through the whole game without disruption. The noise maker in the bottom left highlights to yellow when it is activated and the detection icon in the bottom right turns orange when seen. Keeping these elements minimalistic follows the logic of "less is more." The entire game and it's mechanics don't need to be seen all at once on the same canvas.
Information Overflow
Smite (2014)
Developed by Hi Rez Studios and Titan Forge Games and published by Tencent, Hi Rez, and Level Up! Games.
The information displayed to the player here is too small and is crunched together so it can fit on the screen enough to see the gameplay. The player has access to a lot of information, but it can be difficult to navigate it. For new players, this could be disorienting and confusing. As a designer, you have to have trust in your player that they can play the game without a visual information overload.
Crusader Kings (2004)
Developed by Paradox Interactive and Development Studio and Published by Paradox Interactive and Strategy First.
Here, there is a lot of information displayed as well, but the difference between Smite and Crusader Kings is that everything you need to know is on the screen. Smite has different menus with information, but Crusader kings has everything on the same screen. You can play the game with everything displayed in front of you already. It may not be the most effective way, but having to navigate many different screens would be worse in this case.
Diegetic Interface
This is the most self-aware UI out of all the interfaces because not only does the player know what's happening in the game via live feedback, but it affects the character and their environment as well. You would most likely see racing or adventure navigating games that use this type of interface because the player's action affect the game's environment that the character inhabits and they are aware of this. For example, in a racing game, the player could have a speedometer in the HUD that changes whether or not the car excels in speed or breaks. With a diegetic interface, there are not just HUD element changes, but visual changes to the character and the environment according to the car. When the car speeds up, the number on the speedometer goes up and the car is going faster with a blurred environment passing them also having the car be harder to control. If the player breaks, the environment will slow down and become easier to make out with the eye, the speedometer will decrease, and the car will become easier to control.
Far Cry 2 (2008)
Developed by Ubisoft Montreal and published by Ubisoft.
Another example is how Far Cry 2 utilizes its map and GPS feature. Instead of having a HUD to display all information, designer Ben Pero wanted to keep the HUD minimalistic and simple and solely rely on this diegetic interface instead that works well with keeping the game's immersion. It's diegetic because the player and the character are looking through the same eyes and are self aware of the information they are looking at to navigate the environment. It is easy to read and communicates its goals effectively.
Breach of Space (2022)
Developed by Calcite Games and published by Calcite Games and Itch.io.
Breach oh space uses diegetic gameplay when the player is performing a sabotage. When getting attempting to get through the vent, the player has to play a minigame that represents them hacking to unlock it. Once clicked inside the success range, this implies that the hack was performed successfully by the character in the game and the commanded the explosion to go off from the vent.
Spatial Interface
These are UI elements that exist in the game's environment, but are not known to the character and don't affect the plot. These could include stats from a sports game to prediction attacks to a strategy RPG. Even general text labels that describe an object, boss, or area in the physical environment outside of the HUD or pause menu describing health, levels, elemental type, etc. Instead of allowing the player to interpret what certain elements in the world are or how it works, spatial UI takes care of that hassle or curiosity to avoid any setbacks or confusion.
Fire Emblem: Three Houses (2019)
Developed by Intelligent Systems, Koei Tecmo Games, and Koei Tecmo and published by Nintendo.
In all of the fire emblem games, you are given a spatial environment that gives you many stats and a state of awareness. It tells you...
Where the enemies can attack
What type the enemy and player character is
What stats (hp, atk, def, etc.) the enemies and the player have
What weapons the enemy and the player have
How much damage the player could potentially do to an enemy if chosen to attack and vice versa
Without the spatial interface of this game, it is still possible to play the game, but the player will have a lot tougher time playing the game because they won't be able to strategize accordingly. Player moves would be unpredictable not knowing how much damage they'll do and how much damage they'll take. Spatial interface takes away a lot of randomness away from the player and their interactions with the environment and traditional hands-on approaches to gameplay.
Breach of Space (2022)
Developed by Calcite Games and published by Calcite Games and Itch.io.
For the noise maker object that distracts the robots, the player is able to see where and how they will be able to throw the object. The character themselves cannot see where they are about to throw it. To them, they are guessing and predicting where to throw it. The player get's a cheat sheet for this information thanks to the spatial awareness UI.
Meta Interface
This type of UI can be the most difficult to understand because of how subtle or dominant it can be in the player's space. The elements will be shown to the player, but they are not known to the characters in the game and affect the narrative in an invisible 2D/3D space. Examples of this can be...
Undertale - dialogue boxes for those wanting to read a conversation.
Apex: Legends - damage over over time shown over an enemy player.
Amnesia: The Dark Descent - player's terror/stress level get's too high
Resident Evil 2 (2019)
Developed and Produced by Capcom
A blood splatter effect is another effective way to show off a meta interface. When a player is damaged in Resident Evil 2, there is an initial hit effect of taking damage, but depending on how much damage is taken, a red vignette will grow larger over time. The closer the player is to death, the larger the blood vignette will be. The character in the game can't see this themselves, but with a different walking/running animation and pain sound effects, it is indicative that the character is feeling the damage overtime.
The Need For UI
A game's user interface helps shorten the gap between the player's and developer's understanding of the game that's being played vs. what's being made. In game mechanics are communicated through UI no matter what type it may be so that there is clear direction and focus for a story's progression. Although the UI isn't the prettiest part of the game to look at, the elements united implicate the aesthetics and feel to the game by adding on to the larger art pieces such as landscape design.
As stated, the looks of the UI is important, but how intuitive it is with the rest of the game as a whole is far more important. Accuracy, simplicity, and communication is the most important aspects of UI design. Make sure the UI you are creating is accurate to the game's functionality and what it stands for. Not only mechanically, but aesthetically. How simplistic is the over all design? What needs to be shown is up to the designers and UI artist, but it shouldn't distract the player from the diegetic world they are experiencing. A screen that is too busy will take the player out of the experience and the "magic circle" they create when they turn on the game. Lastly, making sure the UI communicates its accurate information effectively is important to player, mechanical, and aesthetic feedback. All of these traits should be working together in harmony and if one is thrown off, the experience and world could be thrown off and confusing. UI helps maintain this order of communication