More than a Menu: User Interface Design in Video Games
Exploring the relationship between the video game story, game world, and user experience--through four categories of video game interface.
by Sam Vitale Kofman
When your avatar is trekking through Azeroth on a quest or collecting oranges in Animal Crossing, the last thing you’re thinking about is the user interface. Games have the luxury of narrative (i.e. storytelling), which generally makes users more forgiving when it comes to a flawed UI.
That’s not to say, however, that designing a video game interface is simple--or that it should be an after-thought. Unlike other software products, games bring three additional variables that influence the nature of UI elements. In order to craft a truly immersive gaming experience, designers must understand the relationship between the game story, the game world, and the user. In this article, we’re going to explore that relationship--and in doing so, define the four categories of video game UIs.
Before we get started, it’s important to lay the groundwork by defining a few key terms.
Narrative: This is the story behind the game. Sometimes it takes center stage in cinematic games like Tomb Raider. Other times, the story is secondary, especially in puzzle games like Bejeweled.
Game world: This is the space in which the game takes place. In Massively Multiplayer Online Role Playing Games (MMORPGs), like Final Fantasy XIV Online, the world building is often extensive.
The user and the fourth wall: This is a convention taken from performance art (like theater and film); it refers to the imaginary barrier between the audience and the action.
The Four Categories of Game UI: Where is the UI?
Unlike other software, games require designers to ask themselves two questions when developing a user interface:
- Does the UI element exist within the story?
- Does the UI element exist within the world? (i.e. is it part of the space in which your avatar exists?)
The answer combinations to these questions give us the four categories of game UIs: Diegetic, Non-Diegetic, Meta, and Spatial user interfaces.
Diegetic UI elements exist both within the game narrative and within the game world. This means that your avatar and NPCs (non-player characters) could potentially see and interact with them. They might include maps, computer consoles, or compasses.
Example: In 2008, EA innovated by incorporating a diegetic health bar into the gameplay of their horror game, Dead Space; it’s pictured here on the spine of protagonist Isaac Clarke’s backpack.
Best Suited for: Diegetic UI elements are most frequently seen in highly cinematic games, in which player immersion is crucial to the user experience. Think, titles like Death Stranding or the Uncharted series.
Non-Diegetic UIs are by far the most common and have become almost synonymous with the HUD (or “heads-up display”). These interfaces are external to both the game story and the game world; they are accessible to--and known only by--the user.
Example: In the 1994 Sierra On-Line hit King’s Quest VII, the user keeps track of inventory in a skeuomorphic console that overlays the viewport.
Best Suited for: Games with significant complexity. MMOs often display inventory, HP (hit points), and XP (experience points) in non-diegetic interfaces.
Spatial interface elements exist within the game “space” but they are not part of the story. This means that they are on the other side of the fourth wall, but the characters (including your own avatar) don’t know they exist. These might include name tags that hover over characters in MMOs, “save here” icons that mark checkpoints, or arrows that guide your vehicle in racing games.
Example: This screenshot from popular battle arena game League of Legends demonstrates how health bars can exist within the game world as spatial UI elements.
Best Suited for: Birds-eye view games in which details may be hard to discern from the user’s vantage point. You’ll frequently find them in online battle arena games, simulation games, and MMORPGs.
Meta UI elements are perhaps the hardest to comprehend because they don’t exist in the game world, but they are part of the game story. These are things that often “touch” the fourth wall--like blood splatters from first-person shooters or debris build-up on your screen.
Example: This screenshot from No Man’s Sky is a subtle, but elegant example of a meta UI element: the vignette effect and horizontal striping reminds the user that their avatar is wearing a helmet--but no part of it visibly exists in the game world. Instead, these UI details affect the fourth wall.
Best Suited for: First-person games, in which there is a tight relationship between the screen, the protagonist, and the user.
Although they may take a backseat to the story arc and battle sequences, user interfaces in video games have the potential to elevate gameplay. Diegetic and meta UI elements immerse players in the story, while non-diegetic and spatial elements provide crucial information and status.
It is not that video game designers should always select one UI category over another, but that they should select the appropriate type--indeed, types-- for their project. Even the most exciting, well-told RPG will suffer if the user can’t access their inventory or monitor their health bar.