Types of UI Design in Modern Video Games
User Interface (UI) design in video games is communication through visuals. UI indicates to the player what is possible, relaying all the necessary information to understand how to play and navigate the game. When UI design is done right, it improves the user experience.
“A user interface is like a joke. If you have to explain it, it’s not that good.”
There are three types of user interface designs in video games.
Skeuomorphic UI: In the context of user interface design, skeuomorphism means to mimic the look, feel, and function of a physical object or material. Diegetic UI: A user interface that exists within the game environment itself. Non-Diegetic UI: User Interface that exists outside of the game environment. Menus and interface are unknown to the characters and world of the game but known to the player. Much like a narrator in a film is not heard by the characters in a movie.
Below is a list of examples of the UI mentioned above and their pros and cons in Red Dead Redemption 2, Death Stranding, Fortnite, Watch Dogs 2, Hyper Light Drifter, and Hitman.
Red Dead Redemption 2 UI
Design Red Dead Redemption 2 is a very immersive experience with lots of deep mechanics that make the gameplay have realism. The western spaghetti film themes are present throughout the game.
The map is an example of skeuomorphic UI because it plays into the western theme by looking and feeling an old and rugged map with modern visuals. Upon zooming in on the map’s specific areas, you’ll find more detail of the streets, including icons for stores.
Where Red Dead Redemption 2 outdoes itself in diegetic UI is found inside stores. Players can approach the manager and view a brochure which details all of the items available to purchase. Items are hand-drawn illustrations and descriptions that enrich each page. The screen also shows the amount of money you have and the controls.
The weapon wheel on the UI appears as if made of black ink. If you notice carefully, there are strokes around the borders. The UI is an improvement upon Grand Theft Auto 5’s original design but has cumbersome controls when selecting items. The control scheme for selecting items is a form of bad user experience.
Death Stranding UI Design
There’s nothing else like Hideo Kojima’s design. The polish and almost impeccable attention to detail is found in every one of his games. Kojima has his style for being modern, sleek, but has flaws of visual contamination.
Even for veterans in video games, there’s just A LOT of information to take in. Map and mission screens are congested, and interactions within the menu systems can be tedious. 
Design Rule: “Less is more.”
Diegetic UI is present in Death Stranding when the protagonist Sam (played by Norman Reedus) uses the Cuff Links, a wearable computer that displays information through holograms that resemble handcuffs. The Cuff Links changes color to shows the player’s status. Similar to how the health bar is shown in the back of Isaac’s suit in Dead Space.
Throughout the game, visual cues in holograms communicate to the player elements such as Likes and signs. In some areas, text that appears on the screen and feels intrusive, cutting my focus. The item selection in Death Stranding is much better than Red Dead Redemption 2, allowing me to see the descriptions.
The UX, however, is excellent. Players will feel immersed in Norman Reedus’s shoes, allowing them to identify as the character.
Fortnite UI Design
The most popular battle royale game, Fortnite, cleverly displays information. The non-diegetic design is cartoonish, a little kooky; it doesn’t take itself too seriously because it’s also trying to look fun. The HUD is informative; it’s filled with things to look at and requires players to pay attention to the details.
Players can view their health, weapons, map location, experience points, and resources, to name a few of the visual elements. When an event is triggered, objectives and the remainder of players notify users by appearing on the screen. Sounds and micro-interactions accompany the UI, such as when health increases or when a timer begins.
Watch Dogs 2 UI Design
Watch Dogs 2 has a creative skeuomorphic UI, using the smartphone as the main menu of communication and as the tool to complete objectives. Players use their smartphone to hack into electronic devices. The UI on the phone has animations and is unique when browsing through apps. Each app offers something different like fast travel, music player, and is essential for completing story missions.
The phone also displays the GPS when driving and can be used strategically to tackles obstacles. The main protagonist and his comrades are hackers. As such, the UI also has glitch effects that fit well into the technology hipster setting.
Hyper Light Drifter UI Design
The beautiful pixel art of Hyper Light Drifter matches the game’s aesthetic by being futuristic and rustic. The world is a desolate land, with little to no signs of life outside the center city. On the outside, technology once consumed the world, and only barren wastelands are explored. Little to no information is displayed on the screen to notify the player of what to do next. NPCs like shopkeepers don’t explicitly say what items do, and pedestrians talk through images.
This type of non-diegetic UI doesn’t hold the player’s hand and gives them a little direction. Some might say this philosophy of game design is wrong, but it’s up to the designer. Ultimately, the goal is to let players interpret visual communication instead of textual.
Hitman UI Design
Hitman is a game about stealthy assassinations. You take the role of Agent 47 and must eliminate targets using creative strategies without raising detection. The modern non-diegetic UI theme closely resembles undercover agent James Bond. The white and black minimalist look makes you feel as if you’re a secret spy using the greatest technology available.
INSIDE UI Design
As a bonus, I want to include INSIDE, an amazing low-poly game that doesn’t include any UI besides the main menu. The controls aren’t explained, and the player must figure out what to do next. There is only one path, and that is to move forward. This non-diegetic design surprisingly works well by not interfering with the player in any way. It’s so simple, but it requires you to think more with your brain.
Download Walkway, Google Chrome Extension
Walkway is a free extension for Google Chrome. Enjoy photographs of El Salvador, taken by national photographers, every time you open a new tab. The Walkway extension is perfect for locals, tourists, and people who love to travel.
Did you enjoy our article? Visit Life’s Hectic to continue enjoying more content by Walk or follow us on Facebook, Instagram, or Twitter! We’ll be posting updates and new content coming fresh to you every week.
