Diegetic UI + Contrast

One of the Gestalt principles is the “principle of similarity” (Ellis, 1938) which is that things of similar characters like colors and shapes are grouped in our brain. When something breaks that symmetry like an element with a new color or brightness our brain assumes it’s a distinct part of the whole.

If we look at the CIE Chromaticity Diagram, we can see how fast the difference in colors/brightness can be perceived in our brain by plotting them and measuring the distance between the two points or as LaVelle (2019) puts it “as two points are further apart, our ability to distinguish them is increased”. We see similar colors close together on this diagram meaning that separate colors are easier to perceive.

Dead Space (Visceral Games, 2008) is a great example of how diegetic UI should be. Dead Space (2008) is usually filled with dark corridors making this blue light effect emitted from the health bar stand out and heavily contrast with whatever is on the screen. We consider these tunnels closer to black, and this blue is closer to white. When looking at the CIE diagram, the large difference between white and black means that this blue stands out. That shade of blue is also only reserved for the UI elements and with more lit-up areas having a brownish tinge, it still stands out.

This fits into the MDA-GFI format as health is a major mechanic that allows players to continue playing or reset from a checkpoint. Players can lose health by getting hit by enemies or their projectiles and can gain it by using health items or be restarting from a checkpoint after dying. The health bar gives feedback to the player as to whether they’ve been hit by an enemy if they used a healing item, and how close they are to be sent back to the previous checkpoint. The ultimate goal of the game is to finish it, which is interpreted by the player as “Keep Isaac Alive as he attempts to fix the ship” by reaching certain areas and removing the aliens.

A game that could use some work is Fatal Frame 2: Crimson Butterfly (Tecmo, 2003). The game requires players to take photos of ghosts using a camera to exercise them with the UI elements being different “settings” on the camera. The health of the ghost has a similar brightness to the rest of the screen and the color of the ghost health bar is similar to the rest of the UI as well to stand out. Assuming the designers behind the game want players to use their rolls carefully due to the limited number of “shots” they can take and a limited number of ammo pickups, players must be conservative with how they use ammo to decrease enemy health. Due to these decisions, the enemy’s health should be made more readily available to the player. A way to maybe fix this is to use a color not as brown as the current one and to increase the brightness.

The mechanics of the game allow players to take photos of ghosts using this camera, which can deplete the health of ghosts depending on how long they keep the ghost in the focus of the camera. These charges up a meter allowing players to deal more damage. The Ghost Health bar is a way of communicating to a player how much health is left and to giving feedback as to how powerful their attacks are. The ultimate goal of this is to finish it by removing ghosts and finding objects for the final exorcism allowing the ghosts to rest peacefully.