CodeChangers STEM Blog post

User Interface Elements in Video Games Part 2—Spatial UI

  • Sydney
  • March 02, 2020
  • News

Last time, we talked about Meta UI and how it influences video games and players alike. So what are some other user elements in video games? Well, I’m sure you are dying to know. But first… what is User Interface (UI)? Basically, it is the layout of items such as buttons and menus that clues the user (or player) in on what to do, and helps the gameplay be as smooth and immersive as possible. Essentially “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)” (Sydney, 2020). Let’s begin shall we? Introducing… Spatial UI.

Spatial UI is something in the dimensions of the video game environment that gives instructions to the player… but is only meant for the player to see (The character or avatar would not see it in their world). Put another way, Spatial “UI elements [are] presented in the game's 3D space with or without being an entity of the actual game world” (Andrews, 2010).

Let’s take a look at a few examples, shall we?

(Image from: https://i.ytimg.com/vi/vT3NZEl9pHQ/maxresdefault.jpg; https://www.youtube.com/watch?v=vT3NZEl9pHQ)

When you are taking a pleasant drive down a mountainous highway, do you see blue arrows floating in the air? Hopefully not. But in video games, these arrows are a must. In the game “Need for Speed Payback,” the player sees hovering arrows, boosts and finish lines that are placed in the video game world… But do you think the avatar or character would actually see these arrows? Probably not. These arrows are for the player’s use and the player’s use only. In this case, these arrows are telling the player to make a tight turn. If those arrows weren’t there, the likelihood of the player knowing to make a tight turn would be much smaller when just judging the environment itself (Those turn signs are pretty hard to see!). So make sure you thank your spatial UI today—it just saved your race!

Image from: https://www.gamasutra.com/blogs/AnthonyStonehouse/20140227/211823/User_interface_design_in_video_games.php

This is probably one spatial UI element you might recognize—a trail. In Fable 3, your player can follow a trail towards their destination. In this example, “Spatial elements are used to provide more information to the player and prevent them from jumping to a map screen. The glowing trail almost fits within the fiction given it's magic aesthetic quality but the character isn't meant to be aware of it” (Stonehouse, 2014). If you can see it, but chances are high your character wouldn’t notice an element, it’s a pretty good guess that it is Spatial UI (Andrews, 2010). You as the player probably didn’t have to think much about following those paths… But I bet you the makers of the video game did.

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

Here is an example that is an interesting example of spatial UI. While completing missions in the game, “Splinter Cell Conviction,” you will see written instructions hovering in the air. It’s nothing your character would probably see in their world, but its existence is meant for the player to see. In the game, “As you receive objectives at the beginning and during missions, they are projected upon surfaces of the enviroment [sic] instead of placed on the hud [head-up display—where you usually see items such as menus or gages while you play]. This gives the player a little more situational awareness by placing objectives in their field of vision instead of averting their eyes to a corner of the screen. These ui [sic] techniques are also used as a way for the designers to point out the correct direction towards the objective without explicitly telling the player which way it is” (Wong, 2014). Talk about a creative way to pass along instructions!

Whether you know it or not, you are getting instructions from your video game on how you should and should not play the game. Video game UI is important in all video game design. Without it… You might not have a video game at all.

Works Cited

Andrews, M. (2010, Feb 23). Game UI discoveries: What players want [Blog post]. In Gamasutra:The art & building of making games. Retrieved from https://www.gamasutra.com/view/feature/132674/game_ui_discoveries_what_players_.php

SBanerjee, A. (2018, July 15). Designing UIs in Unity: What you should know [Blog post]. In Packt. Retrieved from https://hub.packtpub.com/designing-ui-in-unity-what-you-should-know/

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

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

Cover Image by Olya Adamovich from Pixabay