A primer on Game UI

A must-read article on game UI (without delving into research pieces) is this piece by EA Dice designer Marcus Andrews. I’ll explain some terms that are necessary to understand the intelligence of Firewatch’s UI:

Organism: This is you, player and all-round awesome human being.

Avatar: This is Mario, Sonic, Solid Snake, Henry the fire lookout. The in-game character that the organism controls is separate from the organism, no matter how realistic the gameplay or cosplay.

The UI is the plane the organism passes through to become the avatar. Since the avatar is traditionally dictated by game developers (if you play a space marine game, the hero is a space marine), the goal of UI is to make the organism feel adequately that he or she is the avatar.

With me so far? Let’s go a level deeper:

Diegetic UI: Interface elements that are visible both to the organism in the real world and the characters/avatars in the game world. For example, in the GIF below, both the GPS marker attached to the car and the map in the avatar’s hand are diegetic UI elements (because they are visible to you, the player, and also to every character in the game world). These elements usually offer the most immersion and form a seamless plane between the organism and the avatar.

Diegetic UI

Non-diegetic UI: UI elements only visible to the organism in the real world and not visible to in-game characters/avatars. For example, in the GIF from Uncharted 4 below, the ammo count, gun icons, and grenade counters on the bottom left of the screen are non-diegetic (because you, the player, can see them but in-game characters cannot). This is hardly the most immersive UI choice, but usually performs well with respect to functionality and getting the necessary information across to the player.

Non-diegetic UI

Spatial UI: UI elements that are presented in the game’s 3D space (whether they are visible to the characters/avatars or not). These can be diegetic or non-diegetic, they just need to be rendered in the 3D game space. For example, the blue waypoint markers ahead of the batmobile in the GIF below are examples of spatial UI.

Spatial UI

Meta UI: UI elements that are not visualized in the 3D game space (whether they are diegetic or not). For example, the on-screen blood splatter in the Gears of War GIF below is non-diegetic (the player can see it, the avatars cannot) and meta (it is not visualized in the 3D game space).

Meta UI

Apologies for going all textbook-y there, but I think being aware of these UI distinctions and their respective utilities make it much easier to understand just how Firewatch got it right.