UI BreakDown: Nier Automata
“Nier Automata” is a 3rd person action game by the famous developers Platinum games known for there very dynamic and intricately designed action titles. The plot of the game revolves around a war between the last of humanity and the machine army of alien invaders set on an apocalyptic earth in the year11945 AD. Humanity eventually sends down combat androids that the player controls dubbed “YoRHa” to fight the invaders on earth. These droids are overseen by a space station high above the planet that serves as a central hub that the player can travel too and upgrade/shop and talk to NPC’s.
The primary gameplay of Nier is spent controlling the “Yorha” Androids via a 3rd person camera battling with an assortment of weapons against numerous robotic enemies. In a unique turn, however, the game’s camera moves perspective quite drastically in certain areas, with this some gameplay drastically changes, effectively morphing into different genres to a certain extent:
This makes Nier Automata a really fun game, with its ever-changing pacing and variety. At every turn the game can morph genres, surprising the player and keeping the player engaged. Interestingly the UI never really changes that much during these different modes. It’s basically down to the UI’s very minimalist style, allowing for subtle layout changes that the UI makes during the games genre-bending segments feel unobtrusive.
Art Direction
The art direction of Nier Automata’s world has a muted, melancholy aesthetic with rusty browns, muddy concretes and dusty skies forming the palette for the world. This palette is also reflected in the characters, items and mech designs that you find throughout the game. This all, of course, enforces the theme and setting of the games universe; Earths now post-apocalyptic barren landscape.
Very few world elements escape this treatment, the only real vibrancy in the world comes from things in nature, such as trees, grass, flowers and the odd god ray beaming through the clouds.
Although elements such as projectiles and other VFX related to feedback/danger are bright and colorful this probably stems from a game design choice. You need to be able to see incoming attacks and you need good feedback when you successfully evade danger and counter-attack.
Interestingly the only other part of the games universe that does escape the beige effect takes place onboard an orbiting space station above the earth. This area serves as a sort of home base for the player where they can take a breather and level up. The whole look of the station has a much colder aesthetic, helping to separate out the different worlds of the inhabitants of the earth and the space station androids.
Now how does the world Art Direction affect the UI? Well In quite a departure from action titles (in particular from Platinum) the games UI has not escaped the muted lo-fi aesthetic either. In fact its arguable that it embodies the melancholy vibe even more so than the world or characters do. Pretty much the entire games UI is entirely beige!
There are two sides to the user interface of Nier, the light minimalist take in the games HUD and denser application of the beige aesthetic in the menus. The HUD uses opacity and a minimal on-screen footprint so the action/combat is the star of the show rather than the UI.
In contrast to loading the menus, you are immediately confronted with a wall of beige, populated with slighting lighter beige sub menus headed by muddy dark grey blocks. The font in the menus is an incredibly simple one too, the whole UI is really interesting because its pixels away from being incredibly boring. It is however anything but, as we will explore later in the mechanics section of this UI breakdown.
These above stills are from another very similar style game (gameplay wise) to Nier automata by the same developers called Vanquish. And immediately its pretty obvious the developers can do exciting and colorful UI, so why did they do this style on Nier, it can only be down to a few factors but I do believe this is primarily down to a thematic choice.
Nier Automatas UI style derives from who you play as, Yorha an android. The developers are in a sense visualising the UI for the Yorha android character that you control. Imagining it as something the Yorha sees and interacts with herself. Therefore being an android, the UI doesn’t need to have colour cues, interesting iconography or any of those niceties, its sole purpose is function.
When displayed in this pseudo diegetic presentation the games UI starts to make sense, also being unique in look and feel. There is also a variety of really interesting thematic mechanics that bolster this relationship between the Yorha android and the style and function of the Nier Automata UI.
Effectiveness
The games UI Art direction does make thematic sense but some style aspect of various pieces of UI make them tricky to work with. Interaction markers on the actual game level screen can be quite tricky to see as they are Beige, and a lot of the levels are beige, so its a bit hard to see them sometimes. The mini map is quite small too and its beige as well, causing a few niggles trying to read it in certain situations. The art direction too makes it quite hard to remember what screen is what due to the lack of iconography for each main section of the UI. Minor issues in what otherwise is a fascinating UI system aesthetically and mechanically. Some parts though I do feel they could have pushed the boat out on more most glaringly the map screen.
You can see above here that the Nier Automata’s world map is really sticking to the lo-fi UI style. It’s quite unique in its depiction of geography and man-made structures, but at the same time it is still nearly all monochromatic. The only thing sticking out is the map markers, which is, of course necessary gameplay wise. I do feel here the developers could have really thrown something together that had a bit more pizzaz!
Let me explain this in a bit more detail, a map screen is a UI’s chance to not only assist in helping the player navigate the world but to stamp its visual foot print on the games aesthetic. As a UI designer myself I love this part of the UI development, you have quite a lot of artistic freedom and its your showcase screen to demonstrate your skills. To me having a fantastically illustrated map to explore is a highlight of playing an action adventure title. What kind of gamer doesn’t like a good map? I feel its a little bit of a missed opportunity here, but I guess the map is on style and thats what the developers were going for.
Mechanics
For the mechanic aspect of the break down were going to pretty much exclusively look at the most interesting section of the entire game and that’s the “plugin chip system”. You start the game with a host of pre-installed chips called things such as “Hud: Mini Map”, “HUD: Damage Values” etc. You can remove these chips and effectively customize your HUD.
The chip equipping screen shows slim vertical inventory box where these chips are plugged into it and are represented when plugged in as a coloured striped bar. Each chip takes up a different amount of vertical space within this inventory box so you have to pick and choose exactly the chips you think you might need, and some of them are quite vital. Everything from attack power, evasion ability to combo limits can be boosted with chips.
In most games where you can equip and upgrade your characters, these upgrades extra health, damage or new abilities for instance and are permanently attached to your character once unlocked. Nier Automata does have health and damage upgrades but the designers of the game have allowed the players a far stranger prospect in the form of pseudo “UI downgrades”. You can choose to remove various HUD chips and make room for chips that enhance defence or attack instead. But why would you remove essential HUD elements such as the mini map? … Speed running!
Speed running is a style of playing a game that the player strategises a way to complete it in the quickest possible time. This has become quite a popular activity in the gaming world, if you search on youtube you will find thousands of videos in this category.
Nier Automata’s chip system where you can sacrifice HUD elements to fit more chips that would enhance attack and speed, definitely lend its hand to a speed run environment. Its as if they have designed this feature with speed running in mind. This is a pretty fascinating idea, Nier was designed to be played through multiple times and proof to this fact is that there are many endings to the game. In fact I dont think I have ever heard of a game having so many different outcomes.. there is a grand total of 26 different endings!
So we see here the benefits from having such a customisable chip system, where we can alter the characters abilities and even they HUD for the players specific needs whether speed running or just a casual play-through. Interestingly there is one really unusual chip the OS chip, If you remove this chip the following happens…
You actually can kill your character outright by removing the OS chip! I really found this a fun little easter egg, its an interesting way of making the player realise the importance of specific game mechanics that are vital to the enjoyment of the game.
Side bar: Expressing theme with UI Mechanics
Here are a few examples of games that use UI elements such as Loading screens, save menus and energy bars to enhance a games thematic attributes not only through aesthetics but actually through mechanics.
Eternal Darkness : Insanity
Eternal darkness has many moments that really have the player scared and confused, one of the most terrifying is the save screen sanity effect. The game has you believe that your save file is being erased.
Resident Evil 2 ‘s Loading screen scare.
The survival horror game Resident Evil 2 by Capcom has the player navigate from room to room via door opening animations that act as the loading screen for each room. This example shows how you can get that special scare out of people by conditioning the player and then breaking the rules.
Marvel vs Capcom 3's Deadpool super attack
Deadpools a character known for breaking the 4th wall as part of his personality in the comics and movies. His Marvel Vs Capcom 3 incarnation has him fight in speculator fashion when you activate his ultra move, grabbing his energy bar and bashing the opponent with it.
Final Thoughts
There are many titles out there right now with really beautiful UI thats fun and dynamic, for instance Persona 5. Nier automata UI is just as interesting as Persona’s but its aesthetically on the other end of the spectrum. It might not be the most beautiful UI but the mechanics behind the styling really do make this game stand out.
Great games UI can be something bigger than the sum of just being the functional interaction with the game itself. UI can also reflect themes of the game aesthetically as we have mentioned before but can also mechanically reflect themes. Video game UI doesn't just have to exist entirely in the realm of usability, your are making a game after all not a shopping app. The OS chip easter egg is not just funny/puzzling but most importantly of all really memorable, and its all done within the UI discipline. As a designer have fun creating the UI, explore a bit with the themes, players will be immersed even more, and that is the job after all :).
