UX Design< 5 minute read

Level Up: A Guide to Game UI (with Infographic)

Like websites or mobile apps, video games have common UI components that help players navigate and accomplish goals. Discover the four classes of game UI in this level-warping infographic.


Toptalauthors are vetted experts in their fields and write on topics in which they have demonstrated experience. All of our content is peer reviewed and validated by Toptal experts in the same field.

Like websites or mobile apps, video games have common UI components that help players navigate and accomplish goals. Discover the four classes of game UI in this level-warping infographic.


Toptalauthors are vetted experts in their fields and write on topics in which they have demonstrated experience. All of our content is peer reviewed and validated by Toptal experts in the same field.
Micah Bowers
Verified Expert in Design

Micah helps businesses craft meaningful connections through branding, illustration, and design.

Read More

Expertise

Share

Sixty years ago the Brookhaven National Laboratory in Upton, NY held an open house. Visitors who toured the lab were treated to an interactive exhibit, a game titled Tennis for Two. The setup was simple—a 5-inch analog display and two controllers, each with one knob and one button. The world’s first video game was born, but after two years, the exhibit was closed.

Twelve years passed, and an eerily similar arcade game showed up in a bar called Andy Capp’s Tavern. The name of the game? Pong. Its maker? Atari. Seemingly overnight, the burgeoning world of video games was transformed. Novelty became industry.

Since Pong, the complexity of video game graphics has evolved exponentially. We’ve encountered alien insects, elven adventures, and soldiers from every army imaginable. We’ve braved mushroom kingdoms, boxing rings, and an expanding universe of hostile landscapes. While it’s fun to reminisce about the kooky characters and impossible plot lines, it’s also worth discussing the design elements that make video games worth playing—the UI components.

Like websites or mobile apps, video games have common UI components that help players navigate, find information, and accomplish goals. From start screens to coin counters, video game UI components are a crucial aspect of playability (a player’s experience of enjoyment and entertainment). To understand how these components impact the gaming experience, we must quickly address two concepts that are vital to video game design: Narrative and The Fourth Wall.

Narrative

Narrative is the story that a video game tells.

The Fourth Wall

The Fourth Wall is an imaginary barrier between the game player and the space in which the game takes place.

Narrative and The Fourth Wall provide two questions that must be asked of every UI component incorporated into a game:

  1. Does the component exist in the game story?
  2. Does the component exist in the game space?

From these two questions, four classes of video game UI components emerge: Non-diegetic; Diegetic; Spatial; and Meta.

Game UI

Non-Diegetic

  • Does the component exist in the game story? No
  • Does the component exist in the game space? No

Non-diegetic UI components reside outside of a game’s story and space. None of the characters in the game, including a player’s avatar, are aware that the components exist. The design, placement, and context of non-diegetic components are paramount.

In fast-paced games, non-diegetic components may interrupt a player’s sense of immersion. But in strategy-heavy games, they can provide players with a more nuanced assessment of resources and actions.

Non-Diegetic components commonly appear in video games as stat meters. They keep track of points, time, damage, and various resources that players amass and expend during gameplay.

Video game UI

Diegetic

  • Does the component exist in the game story? Yes
  • Does the component exist in the game space? Yes

Diegetic UI components inhabit both a game’s story and space, and characters within the game are aware of the components. Even though they exist within the game story and space, poorly considered diegetic components are still capable of distracting or frustrating players.

Scale makes diegetic components tricky. For instance, an in-game speedometer that resides on a vehicle’s dashboard will likely be too small for players to see clearly. In some games, handheld diegetic components (like maps) can be toggled to a 2-D, full-screen view, making them non-diegetic.

Game interface

Spatial

  • Does the component exist in the game story? No
  • Does the component exist in the game space? Yes

Spatial UI components are found in a game’s space, but characters within the game don’t see them. Spatial components often work as visual aids, helping players select objects or pointing out important landmarks.

Text labels are a classic example of spatial UI components. In fantasy and adventure games, players may encounter important objects that are unfamiliar in appearance. Text labels quickly remove ambiguity and keep players immersed in the gaming experience.

Video game UI design

Meta

  • Does the component exist in the game story? Yes
  • Does the component exist in the game space? No

Meta UI components exist in a game’s story, but they don’t reside in the game’s space. A player’s avatar may or may not be aware of meta components. Traditionally, meta components have been used to signify damage to a player’s avatar.

Meta components can be quite subtle—like a slowly accumulating layer of dirt on the game’s 2D plane, but they can also feature prominently in the gaming experience. In action and adventure games, the entire field of view is sometimes shaken, blurred, or discolored to show that a player has taken on damage.

Best video game UI

Classifying video game UI components isn’t always cut and dry. A life meter may be diegetic in one game but non-diegetic in another. Depending on a game’s narrative and its players’ relationship to the fourth wall, components may blur the line between classes. Likewise, an infinite range of visual styles and configurations can be applied to components according to a game’s art direction.

Video game UI classification infographic.

Understanding the basics

  • What is a game UI?

    A video game UI is an interface with components that help players navigate, find information, and accomplish goals. There is a large list of game UI components—life bars, coin counters, level maps, etc. Just like UI design for mobile apps, video game UI design requires close attention to detail and functionality.

  • How do you create a game interface?

    Designing a video game interface depends on the game’s narrative and art direction. Video game designers need to know what story the game is telling and how the interface advances players through that story. Art direction determines the visual style or mood of the interface components.

  • What is a game user interface?

    A video game user interface is a system of visual components that allows players to interact with the game story (narrative) and break into the game space (the fourth wall). There are four classes of UI in video games: Non-diegetic, Diegetic, Meta, and Spatial.

  • What is UX in gaming?

    One of the biggest measures of UX in gaming is playability. Playability refers to a player’s experience of enjoyment and entertainment while playing a game. Video game user interface design has a substantial impact on a game’s playability and user experience.

  • What is the purpose of game design?

    In one way or another, every video game is telling a story (narrative). Likewise, every video game occurs within a space behind an invisible barrier that players must break through (the fourth wall). The purpose of game design is to tell a compelling story and help players become immersed within the game space.

Hire a Toptal expert on this topic.
Hire Now
Micah Bowers

Micah Bowers

Verified Expert in Design

Vancouver, WA, United States

Member since January 3, 2016

About the author

Micah helps businesses craft meaningful connections through branding, illustration, and design.

Read More
authors are vetted experts in their fields and write on topics in which they have demonstrated experience. All of our content is peer reviewed and validated by Toptal experts in the same field.

Expertise

World-class articles, delivered weekly.

Subscription implies consent to our privacy policy

World-class articles, delivered weekly.

Subscription implies consent to our privacy policy

Join the Toptal® community.