Being a UI developer is not only about making your own designs but also analyzing others. Whenever I pick up a new game, from the student to professional level, I always study the menu. HUD, and choices designers were making when creating the interface players interact with. Here I have collected a list of games highlighting their design choices, visual decision, and little additions that make up some of the best UI in the business!
March 16, 2019
Anyone who has ever asked me to name a genius UI decision knows that I immediately praise the house creator tool in the Sims 4. The interface for building a house is a house! I can go on for hours explaining the both creativity and functionality of designing an interface so clean and efficient for players to use. Building a house in the Sims is all visual. Players are spending hours and hours refining and modifying roofs, walls, floors, furniture. What the Sims 4 does fantastically is eliminate the headaches of scrolling through a list of names trying to figure out where the category you are searching for is. The house design allowing you to just browse all options by clicking on a model house of what you are looking for streamlines the entire process. In addition to the ease of use, it eliminates mental fatigue of reading which will help every sims player binge hours on making their dream lake house a reality!
Sims 4: House Builder
In an action packed game designers know how difficult it is to grab the players attention. Players will miss a hint, tip, or objective pop up unless you visually pull them from the center of the screen to whatever you are trying to tell them. For Honor does a beautiful job of using HUd flashes and swipes to grab the player quickly from combat and give them the information they need to keep going. This is a more common technique in HUD design and games, like Destiny for example, also use this ui motion design. For honor has its own way of using shapes, flashes, and colors that needed its own call out. Look at the beautiful animations!
When I first got Fallout 4 my sister’s fiance was confused watching me play. As soon as I opened up the Pip Boy I spent minutes just playing around and commenting on the different decisions. Then he realized I was so infatuated because this is what I do! What the newest versions of Pip Boys really do right is bring a feeling of connectivity and immersion into the world. There is no real functionality behind rotating your pip-boy besides giving a nice view to the model and design. It adds another layer of polish and a cool thing for the player to first discover. It shows that the developers really did think of that and put resources into adding small additions that build up to a truly polished product.
Fallout 4: Pip-Boy + Reticle
Fallout’s UI has a very retro and efficiency over visuals design. Its all about displaying information and what you need and not going overboard with how pretty it looks or stunning pictures to go along with it. In Fallout 4 the developers spent time on updating how the cursor interacts with the world that really brings that level of visual fidelity without compromising the whole visual design. The main cursor and aiming reticle seamlessly shape shifts as you move and interact with the world really allowing the player to know what's going on. It utilizes animations and sizing to tell the player what state they are in without forcing the player to look away from the center of the screen. It's another level of polish from flashes to smooth transitioning that makes the game more interesting and the design pleasant to look at for the player.
One of the main design choicers that Bungie pioneers early on is the idea of a curved HUD. In Destiny, and all of Bungie’s games, the HUD is curved on the screen to mimic a helmet layout. This decision serves two purposes. One is to improve immersion of giving a world context to why then player is seeing information. Two is that it helps separate the different types of UI the player is seeing: Screen space and world space. A common problem with creating waypoints and health bars in the the world is that it can get confusing to the player what they are seeing and where it lives. By having the HUD curved, it is immediately apparent to the player, without moving around, where the UI lives. A lot of first person shooters have started to adopt Bungie’s curved design and it really does make a visual difference when communicating to the player.
MGSV TPP : Diegetic Animations
A more common practice that AAA studios are putting some resources into is adding more and more animations to improve immersion.If we can make menus and interfaces more diegetic the easier it is to sell the game to the player. Metal Gear Solid TPP really makes the player feel connected by adding small finger motions and animations as the player goes through their menus. Fallout does the same thing with their pip boy and many games are doing the same if they can afford it. It’s really the small additions like this that transform a menu from just a 2D screen to an interactive experience.
Naughty Dog is known for the way they really bring games to the next level in both technology, visuals, and design. The team at Naughty Dog decided for The Last of Us to have a side menu layout while crafting to allow the player to remain in the game. A major part of the gameplay is sneaking around and the suspense that comes with it. The side menu both keeps the player in the moment and also allows for quick + easy crafting. Keeping the game going and keeping that point of view open allows for those “Oh no!” moments as the enemy you were creating a shiv for walks around the corner in front of you!
The game hasn’t been released yet but the gameplay demo of The Last of Us Part II gave so much information on the design of the game. There is a ton to talk about here but I am focusing on the general HUD design and choices made. Clean, Compact, and out of the way. Everything the player needs to know is to the side of the screen for reference. It doesn't yell at the player or invade a lot of screen space because it doesn't need to. Icons much like a check engine light tell the player what they need to know when they need to know. All designed around a circle indicator of visibility since stealth is a major component to the game. Everything appears and disappears in the same corner in a compact and elegant way. It does what all good UI should do. Communicate enough, small enough, to allow the player to play the game.
Last of Us Part II: Compact HUD
Small bits and additions often go unnoticed but really bring about a level of polish and fidelity to a product. Fortnite is all about polish. They understand people are spending hours per day playing this game and make sure no stone goes unturned. What is great about their loot boxes is the level of interactivity they have included. You are about to bust open a pinata and if you move your mouse around on the screen the llama’s eyes wil lfollow your cursor as it waits for its impending doom. Most players will skip over this because they just want their loot but its additions like this that bring a product to the next level.
This section is less about menus and more UX in general. Quantic Dream is great about building a world and having the player immerse themselves in it completely. A small but important addition that I noticed playing is the how things change with the narrative. The player is able to go into this inspection mode telling them what they can do and interact with. Prior to going deviant the subtle lines in this mode is grid lick. Very structured and clean. But once each of your characters does go deviant it breaks into chaos. The lines are broken up, floating in chaos within the space. It is a subtle detail easy to miss but really connects everything to the story and main narrative, something Quantic Dream does very well.
Detroit Become Human: Narrative Ties
There are a lot more games and choices I missed or did not have time to mention in this. My hope is that people will look more into the games they are playing and really see the great and little additions developers are adding to really push their product. There is a lot to be learned from studying and analyzing other people’s designs especially when it comes to UI. When the designer does well, the player benefits and that is what UI and UX especially is all about!
