CodeChangers STEM Blog post

User Interface Elements in Video Games Part 1—Meta UI

  • Sydney
  • February 24, 2020
  • News

When you play video games, do you ever think about the menus or buttons you press? Probably not—and that’s a good thing. Why? It’s not supposed to be noticed. Referred to as “User Interface Design” (UI), this field is supposed to make your playing experience as natural and as immersive as possible. You don’t want to spend your game time sorting through mounds of settings in your options page. You also don’t want to be thinking about a pop-up menu when you are trying to defeat a bad guy—right? This is where UI Designers come in. They make sure that elements such as warnings or menus aren’t in your way—but are instead helping you in the most imperceptible methods as possible.

UI is a young field that is upcoming and is a must in the video game, web and app industry (Anyone who tells you otherwise is trying to sell you something). Often paired with User Experience (UX) Design, UI’s goal is to make sure that it helps you find everything you need to have or know (e.g., settings, maps, weapons, life points), but doesn’t get in the player’s way (e.g., pop-up menu obstructing views of the game play). In video games, it constantly communicates with its player, whether the player realizes it or not. There are different types of UI elements in video games. Now, due to the UI nerd that I am, this article will be broken down into a series of different posts of different types of video game UI elements. Let’s begin with one of the most famous UI elements in video games—Meta UI.

Meta UI Elements are elements that are “(Not represented as a 3D model) within the [video game’s] space yet still inhabit some form of narrative inside the game (Think of [it like] 2D overlays)” (Young, 2014). In other words, Meta UI elements are items and images that match the style of that game that appear on a 2D-overlay-like plane on your screen to communicate something. Clear as mud? No? That’s okay! I’m sure you’ll recognize Meta UI right away. Here are some examples.

Image from: https://slashleyluke.wordpress.com/2014/04/10/client-oriented-practice-user-interfaces-heads-up-displays/

Probably the most famous Meta UI Element is rings of red or blood splatter on a screen to demonstrate decreasing health (Young, 2014), such as the Meta UI elements found in the game, Call of Duty. The element of blood splatter is not necessarily part of the 3D world the player would be interacting with, but is a 2D overlay that sits on top of the screen. Now while it communicates decreasing health, it also fits within this first-person shooter game as blood and guts are probably the things you would see when being blasted by bad guys. Here, Call of Duty hits two birds with one stone—it keeps the style and story of the game with the bloody/war aesthetic, but also communicates to the player that the avatar is hurt! The player doesn’t need much more instructions to know they need to heal themselves. Pretty clever, eh?

Image from: https://dontstarve.fandom.com/wiki/Overheating

Blood splatter isn’t the only Meta UI that can be found in video games. For instance, in the survival game “Don’t Starve,” if your character gets too hot, you will see a red/orange ring appear around your character. As the temperature increases, so does the ring (Overheating, n.d.). It is a 2D overlay that shows the predicament the player needs to solve. The circle’s size also communicates to the player how much time he or she has left until the avatar dies—like a dimented kitchen timer. Through this “show, don’t tell” principle, this Meta UI doesn’t break the player’s immersion in the game while communicating to him or her that the character is going to soon take damage.

Image from: https://samwongpic.wordpress.com/2014/06/20/meta-ui-2/

This is one example that you might not realize is actually Meta UI. In the game, “Watch Dogs,” a player can pull up the interactive screen of the main character’s (Aiden Pierce’s) smart phone. This pop-up screen is shown as a 2D element that fits within the narrative of the story as Aiden’s celular device. In reality, this screen is just another pop-up menu that can show you maps or challenges in the game (Smartphone, n.d.)—BUT this Meta UI maintains the game’s aesthetic and keeps you immersed in the story as it is a pop-up menu disguised as a cellphone (Wong, 2014). (Got me so far?). That’s pretty slick if you ask me.

When playing video games, you are constantly getting instructions—whether you know it or not. Thanks to the ingenious minds behind these games, you are able to be more immersed in the game of your choice... But as you learn about UI in video games, you will never see video games the same way again.

Works Cited

Overheating. (n.d.). In Don't Starve Wiki. Retrieved from https://dontstarve.fandom.com/wiki/Overheating

Smartphone. (n.d.). In Watch Dogs Wikia. Retrieved from https://watchdogs.fandom.com/wiki/Smartphone#Watch%20Dogs</p>

Stonehouse, A. (2014, February 27). User interface designs in video games [Blog post]. In Gamasutra:The art & building of making games. Retrieved from https://www.gamasutra.com/blogs/AnthonyStonehouse/20140227/211823/User_interface_design_in_video_games.php<p>

Wong, S. (2014, June 20). Meta UI [Blog post]. In Sam Wong Pic. Retrieved from https://samwongpic.wordpress.com/2014/06/20/meta-ui-2/</p>

Young, A. L. (n.d.). Client Oriented Practice: User Interface & Heads Up Display Research [Blog post]. In Slashleyluke. Retrieved from https://slashleyluke.wordpress.com/2014/04/10/client-oriented-practice-user-interfaces-heads-up-displays/</p>

Image by 11333328 from Pixabay