UI Discussion: God of War

God of War is an action role-playing game, which takes roughly 20 – 50 hours to complete, depending on the player’s preference for side-quests etc. Over the course of the game the player is taught dozens of game mechanics and how they all interact with each other. There’s combat, issuing commands to Kratos’ (the protagonist) son Atreus, gathering resources, equipment upgrades, inventory management, quest objectives, map navigation and more.

The game’s UI needs to contain, communicate and teach this varied information in a way that is easy to comprehend and is user-intuitive. We don’t want players lost in tab bars and drop down-menus looking to find out how they can dump unwanted loot, for example.

tumblr_o8rznfxIEo1s2wlkdo1_500.gif

God of War has many interlocking systems which impact the player’s choices and style of play, which are communicated through the UI. It’s very interesting to examine this game as a UI/UX designer, so let’s investigate.

Personal Favourites

My favourite decision was to avoid using a ‘vision’ mode, which has become very popular in action or action/adventure titles. This is a feature the player can activate, typically at any time, which alters the aesthetic look of the game world and highlights items of interest, like potions, currency, weapons, enemies, objective markers and trails etc. Well known examples of this would be the Batman Arkham series, Horizon Zero Dawn, Shadow of Mordor and Sniper Ghost Warrior 3 but there are many more. While this approach works well for enabling players to quickly spot points of interest in their vicinity in order to progress more rapidly, it has the downside of causing the player to be denied key information in regular play, which incentivises spending great lengths of the game in this alternate vision mode. This is likely to exhaust the player and take the focus off the beautiful game world, decreasing player immersion and hindering the UX.

In God of War, rather than a ‘vision’ mode, the player has a nav-bar of sorts, at the top of the screen which indicates crucial information. such as quest destinations or items of interest, marked with a meters-away distance and north, south, east, west markers for geographical context. This allows the player to be informed on where they should be going ad what they should be paying attention to, without compromising much screen real estate or requiring the player to enter a menu. Skyrim is another game which uses this method effectively.

Another great decision was to keep Kratos off-centre to the left of the screen. This is the case regardless of what you make Kratos do (run, climb etc). Kratos is strictly on the left side of the screen. This is done so that when you enter combat and cast your axe (which behaves like a boomerang) the target is clearly visible on the right side of the screen. This allows the player to focus, guides them to the target and makes sure as little visual obstruction as possible occurs. This technique is also very well implemented in Horizon Zero Dawn.

Image result for god of war UI
Fig 1. Kratos taking aim to throw his axe.

Regarding the game world UI, very little shows up. There are flat, white Playstation circle-button prompts above collectables like health, currency etc. One for the square-button on interactables for Atreus, Kratos’ son, and handprint icons above main-quest objectives which may be on-screen at that moment. These do a sufficient job of letting the player know important interactables are within reach.

A final note on my personal favourites is that God of War gives you the freedom to turn off the main HUD, enemy health-bars, compass etc for a truly cinematic, immersive experience. Being able to bring back up HUD elements with a tap of the touchpad on the controller was an excellent feature.

Central UI – Weapon System

Image result for god of war UI
Fig 2. Inventory, weapons tab.

There’s a lot to dig into here. Let’s start with the basic navigational design of the main UI accessed through the options button or the touchpad. On the top, you’ve got primary navigational actions that you flip through with L1 and R1. On the left, you’ve got secondary navigation options for cycling through the various slots for powering up the player’s chosen weapon – left/right to cycle weapons, up/down to cycle through slots. In the middle, you’ve got the details/specifications of the selected slot from the previous navigation – featuring information like cool-down time and level grade.

Once you move through the slots available on the selected weapon, note how the information on each slot is specific to that slot, where as the first slot at the top, the default slot selected when opening this screen or switching to this tab, gives an overall summary of each of the slots below. This is an effective way to give a quick overview of weapon’s upgrades and stats, while also keeping the player informed on which section of the weapon they are currently selecting.

On the right hand side, the character avatar is seen (navigating to the bow and arrow weapon switches out Kratos for Atreus) and to the far-right side of the screen the character’s personal stats are displayed, like strength, luck, defence etc. A click of the L3 button expands the section, offering definitions of the purpose of each stat – very useful for players who are not up-to-speed on conventions.

god-of-war-armour-attributes
Fig 3. Inventory Armour tab, similar to weapons tab.

At a glance, this weapons screen is not easily scannable. There is a great wealth of information on display but the hierarchy is not very well defined, as a player all the information seems to be of similar importance, only a few elements stand out or are pronounced by size, font style, colour etc.

When choosing a power-up/improvement for the weapon slots, the available upgrades are sorted by colour block indicating rarity and power, equipped upgrades have an ‘E’ to communicate this, upgrades can be compared to the currently equipped one to compare effects and the available upgrades can be sorted by various criteria. A lot of this information is not very clearly indicated and melts into the ‘visual fog’ of the scene. Some of the options onscreen, such as the sorting and ‘show descriptions’ buttons are not critically necessary and clutter the already packed screen.

Note that these various upgrades have their own iconography, however in many cases it is largely useless – the player could not intuit anything from some of these icons and only via selecting it and reading the name or description do they learn the use of the upgrade/improvement.

Something admirable about this screen, however, is how flexible it can be, with containers expanding and contracting to accommodate new containers for upgrade comparisons etc.

UI Colours and Gameplay Effects

Colours play an important role in God of War’s UI. As I mentioned before, gear in the inventory is sorted by colours, these colours indicate rarity and power level. Green is common, Blue is Rare, Purple is Legendary and Gold is Epic. Different sets of gear will change Kratos’ stats, so the ideal combination comes down to the play-style of the player.

Screen Shot 2018-09-30 at 11.01.31.png
Fig 4. Colour coded upgrade examples.

The colour coding of the gear is applicable to enemies too. The health bar of an enemy, visible above them, is coloured depending on their level, it indicates how powerful they are. Again, purple is the most difficult, green is the easiest. This information was learned over the course of many hours’ play and I did not feel this information was clearly communicated early or plainly.

UI Iconography

The iconography of God of War is another mixed bag. At their best they’re clear, instantly readable and in-tune with the setting of the world. The icons pictured below are good examples, they are afforded enough screen real estate and are recognisable enough to remain readable.

Screen Shot 2018-09-30 at 11.13.11.png
Fig 5. Some icon examples.

However in many cases, such as in the map, the icons are too small. They’re quite wiry and it’s hard to guess what their meaning could be. This then requires consulting the map legend, but ultimately I found this experience tiresome and just wanted to leave the map and get back in the action and exploration. I wound up actively avoiding using the map as the experience was frustrating and I just wanted to progress without deciphering something so complicated.

What the map does well is that it can be accessed directly from the touchpad – rather than having to cycle to it from the default main UI weapons screen, when pressing the options button – this is great UX and cuts down on time-wasting. Along with this the map allows the player to quickly cycle between icon types using the L2 and R2 buttons, dismissing the noise to highlight shops, quests, etc as the player chooses.

Related image
Fig 6. Map screen with dozens of hard to decipher icons.

 

UI – Resources (the Inventory)

The inventory is something which is typically critical to the UX of a role-playing game. Players tend to collect thousands of items of loot over the course of the game and will need to be able to sort these items, drop the items, assess the value of the item, assess the function of the items, equip the item and more – all from the inventory screen.

In God of War, this is not quite as intensive as in, say, Kingdom Come: Deliverance, the game is more of an action-adventure, but players will still pick up a lot of ‘Resources’ as the game refers to them.

Resources have their own tab within the main UI. The screen is treated in a consistent way – with rarity colour blocking in a massive list of items along with an expanded detail view to the right side of the screen, detailing the name of the item, quantity you possess and the function and an enlarged icon, allowing the player to more easily commit the various item icons to memory.

Image result for god of war resources
Fig 7. Resources tab.

There is no interaction on this resources tab beyond simple navigation. Players cannot drop loot from here or combine items for example, as is common in more intensive RPG experiences. For God of War this works fine – as I expect to be able to keep track of how many resources I have – which are necessary for an upgrade or to craft a new weapon or armour piece at the forge. But because this is a more streamlined action-adventure game, without gameplay mechanics such as weight slowing you down, the extra interactions are unnecessary here.

UI – The Shop

The shop (diagetically represented as a blacksmith’s forge) is where the above mentioned resources really become noteworthy for the player. It’s here where players can cycle between craft (create new), upgrade, buy items, sell items and recover lost items.

Image result for Craft God of War
Fig 8. Crafting tab within the shop menu.

When creating or upgrading new armours or weapon pieces, players can see the required amount of resources and how much of said resource they already possess. They can see how the armour or weapon piece will affect, positively or negatively , their stats and they can see how many enchantment sockets each piece has – for further empowering the piece with magic.

In Summary

Throughout the game I’ve found the UI/UX fairly smooth and comprehensible, with the exception of the map and it’s iconography and travel options. Perhaps one of my favourite notes on the UI/UX is how the shop handles selling off unnecessary items. Before opening the menu to sell off items, armours and weapon pieces I no longer needed – I was at first apprehensive. This is because I thought I was about to have to really mull over what items are important, what items are equipped and what items are too important for later to sell. However, the ‘Sell’ tab contains every item you can sell and assuming you’ve equipped the highest rated gear, you can relax and just sell off everything else, with many of the resource items specifically noted as being on no further use.

I thoroughly enjoyed diving into the UI/UX of the game and I hope you’ve found this useful. I’m looking forward to the next game which sparks my interest sufficiently to conduct another post such as this.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

A WordPress.com Website.

Up ↑

%d bloggers like this: