• Design
  • Technology

What we can learn from diegetic UI in gaming

Mia E Lee
Mia Ellis-Lee
Design & Frontend Development
Write to Mia
Share

When we think about UI and UX, looking to other mediums can be a great source of inspiration. Video games, because of their interactive nature and need to communicate vital information back to the user, make for an interesting topic. The methods that video games communicate this information varies across titles, genres, and even platforms - today we’ll take a look at two examples of diegetic user interfaces in video games and see what insights we can pull out as we compare and contrast these two approaches.

The two games that we’ll be comparing today are Dead Space (2008) and Resident Evil 6 (2012). Both games are third-person shooters with a survival-horror slant. Since they fit within similar genres, they make for a natural point of comparison as the information that the games need to communicate to the user is fairly similar (for comparison, an MMORPG like World of Warcraft needs to communicate a much wider array of information to the user).

Both games approach showing the necessary information to the user in a diegetic fashion. What this means is that the game’s UI exists in line with the story of the world and exists within the world of the game. For example, in the case of Dead Space, the amount of ammunition in a gun is not shown through an abstract floating counter disconnected from the game environment, but is actually shown as a projection from the gun itself. In the case of Resident Evil 6, similar information is shown through the character’s phone (referred to in-game as a “COMs device”).

Dead Space has received well-deserved praise for its thoughtful and innovative approach to showing this information, but to better understand why Dead Space works so well, we need to compare it to a game that takes a similar, but less effective approach.

Why does Dead Space work well, and why doesn’t Resident Evil 6?

So, why is Dead Space so effective - how does it compare to Resident Evil 6’s approach? There a few key areas that make the UI differences between Dead Space and Resident Evil 6 clear.

Obtrusive versus minimal

One of the great things about Dead Space presenting information is how clean and minimal their approach is. They communicate what they need to in an unobtrusive way. In comparison, Resident Evil 6’s diegetic UI is large and distracting - it takes up the entire bottom corner of the screen and detracts from the atmosphere, environment, and overall tone of the game. It feels a little akin to being in a theater and somebody keeps texting during the movie.

Shot from the video game Dead Space

Dead Space’s UI is presented within the environment

Shot from the video game Resident Evil 6Resident Evil 6’s UI takes up a large portion of the bottom right of the screen

Consistency and clarity

Dead Space adheres to a strategy of clarity - UI elements are consistently the same colour, and appear in a similar manner across weapons and exo-suits (the player character’s armour that can be upgraded throughout the game). In Resident Evil though, the appearance of the COMs device varies between characters - each one having their own model. While the information is laid out in a similar fashion between devices, I would argue that the lack of consistency doesn’t help the player at all (taking a second to mentally register the UI can make the difference between life and death when a zombie is clawing at your face). It seems like the rationale for this choice is to make the characters feel more distinctive. I would respond that if you’re relying on the appearance of a phone to make characters feel distinctive, you probably need to have a second thought about gameplay and narrative.

 

Ammo counters in Dead Space are consistent across weapons (211-V Plasma Cutter on the left, PFM-100 Hydrogen Torch Flamethrower on the right)

Health indicators in Dead Space are consistent across exo-suits (Standard Engineer RIG on the left, Standard Astronaut RIG on the right)


Clip from the video game Resident Evil 6 showcasing COMs deviceCOMs Devices in Resident Evil 6 differ between characters (Jake Muller’s COMs device on the left, Chris Redfield’s COMs device on the right)

Integration with gameplay

Perhaps my biggest issue with Resident Evil’s approach is its ineffectiveness (by comparison) with integrating into the action on-screen. As previously mentioned, the HUD (heads-up display) in Resident Evil 6 is obtrusive. However, not only is it obtrusive, but it is actively distracting as it forces users to take their eyes away from whatever is in front of their player character and instead forces them to glance away to the bottom right. The straightforward, logical approach that Dead Space takes has the off-shoot effect of placing the HUD elements in a way that integrates seamlessly with gameplay. You’re shooting a gun, looking down the barrel, and the ammo count is displayed directly in front of you. Your character gets attacked, you can see his health decrease on his body.


Dead Space UI elements are integrated into their gameplay objects, Resident Evil 6 UI elements are separated


*** DISCLAIMER! The footage below is from games that have been rated as “Mature” by the Entertainment Software Rating Board. This content is generally suitable for ages 17 and up and  may contain intense violence, blood and gore, sexual content and/or strong language. ***

 

 

What did we learn?

So, what can we take away from this examination? I think a few design lessons ring true:

  • Clarity is keyEstablish a consistent design language that helps build the logic of user interaction to form an easy mental roadmap for users.

  • Prioritize the important informationIn the case of Dead Space and Resident Evil 6, information supplied by the HUD can be considered additional (or secondary) to the primary information that is communicated by the actual gameplay (“I am walking down a hallway”, “I am being attacked by a zombie”, etc.) Secondary information should enhance the primary, not distract or detract from it.

 Video Credits

If you’re curious to see these games in action, you can view gameplay footage at the following links:

Image Credits

Back to Top Arrow Up