UI Discussion – Days Gone

Days Gone is an open-world action game, developed by Bend Studio. It takes roughly 30 hours or so to complete the main story-campaign, depending on the player’s preference for side-quests etc. Players take on the the role of a biker who survives in a post-apocalypse over run with zombies and marauders. Gameplay consists of melee and ranged combat, motorcycle driving and maintenance, gathering resources, equipment upgrades, skills unlocks, quest objectives, map navigation, clearing areas of the map of zombie infestation, bounty-hunting on behalf of local settlements 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.

Days-Gone-Sarah-2060x1159.jpg
Fig 1. Days Gone protagonist Deacon along with his wife, Sarah.

Days Gone communicates a great wealth of complex information, navigational options and interactive features through the UI. After exploring God of War and Star Wars Battlefront 2‘s UI/UX, I’m now excited to explore the UI/UX of a game which has just launched a week ago (at time of writing).

Central UI – Gameplay Screen

Let’s look at all the information players will deal with during the main gameplay, occurring in the game world of the rural Pacific Northwest of the USA. Players have equipped weapon, ammo and tools information as well as stamina and health detailed on the lower left corner, a mini-map is seen on the lower right corner which also features gas levels for your motorbike and it’s state of repair as well as a noise-level related to your movement speed and whether or not you’re currently hidden from enemy sight, current optional objective instructions can bee seen here too. Icons float above collectible items like ammo, scrap or medical supplies as well as objective locations, there is even more information communicated in contextual situations. Icons are flat, clear, comprehensible and don’t try anything fancy (but serve their function as message communicators perfectly).

Screenshot 2019-05-02 at 15.17.21.png
Fig 2. Gameplay UI.

 

Other UI elements are presented in a slightly more diegetic way – such as the icons for motorbike repair or refuelling being visible on the bike itself after dismounting, or stealth kill icons appearing above enemies that the player has crept up on.

Screenshot 2019-05-02 at 10.08.26.png
Fig 3. Contextual icons appearing, in this case, a stealth-kill prompt above an enemy’s head.

In the lower left corner, the health bar is a bright green rectangular block contained within a semi opaque darker green block. This indicates current health level against what is the maximum amount possible (this can be increased over the course of the game). As simple as this may sound and look, I found the health bar a nuisance, because it’s empty state is still green, I would typically not realise I had lost a lot of health and was close to death (the health bar colour does not change to reflect that you are close to death until you are just 1 blow away from it). When in combat or running from enemies, these stressful situations require your complete focus and this means that you are not keeping an eye on your health bar. The fact that the colours remain green in your peripheral vision means you can wind up getting killed in a manner that feels unfair and that is not a good UX.

Screenshot 2019-05-02 at 09.55.33.png
Fig 4. Weapon, tool, silencer, stamina and health icons.
Screenshot 2019-05-02 at 15.19.45.png
Fig 5. Stamina bar noticeably harder to read in daylight.

Directly above this bar is a blue rectangular block which signifies stamina. This bar replenished when the player stops sprinting. It is about half the height of the health bar, which communicates the priority contrast between the two (the player’s health status is more important). I have no problems with this representation besides feeling that it is a little too transparent, not quite visible enough during daylight gameplay.

Currently selected weapon silhouettes appear above the stamina bar and along with an ammo count for ranged weapons and a percentage number indicating state of repair for melee weapons (these weapons will be broken when the number depletes to zero) and a percentage number indicating state of repair for silencers equipped on a ranged weapon.

Screenshot 2019-05-02 at 09.55.46.png
Fig 6. Mini-map with noise level and visibility indicators.

Players can turn on their flashlight using ‘down’ on the d-pad. Doing so will highlight a d-pad icons which indicates what they have selected and what else could be selected with he other directional buttons, such as med kits. This will quickly disappear. This is very helpful and I liked having this regular reminder – but in a fashion which does not clutter the screen for more than a few moments. There’s evidently been a conscious effort to declutter the screen as much as possible – something I appreciate greatly.

Screenshot 2019-05-02 at 10.04.07.png
Fig 7. Marking targets with binoculars.

Players select their binoculars using the ‘up’ button on the d-pad. Using the binoculars players can zoom in by pressing L-3, the analogue stick. I found this un-intuitive, as I had learned through early gameplay that aiming using the L-2 button would ‘zoom in’. I consistently tried to zoom in using the binoculars by pressing the L-2 button, which would actually put them away. I understand that tapping L-3 is consistent with zooming in while using a sniper rifle, but these are not that commonly found and I had already inadvertently taught myself incorrectly before getting my hands on a scoped rifle. If this is a problem which a lot of players encounter, then I would recommend rethinking this to find a more intuitive method of zooming in.

A major function of the binoculars is to ‘mark’ enemies. Once the player has tagged them, by looking at them and then pressing R-2, a red diamond appears over their head so that the player can track their movement more easily. Something I loved was that this doubles as a health bar for the enemy, depleting as they take damage from bullets, for example.

Screenshot 2019-05-02 at 16.07.55.png
Fig 8. The tracker vision mode.

Players can activate a ‘vision mode’, which is something I was glad did not appear in my God of War post. A ‘vision mode 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. I’m not completely averse to this feature, but as I stated in my other post, I find that it leads to the player being denied key information in regular play, which incentivises spending great lengths of the game in this alternate vision mode. In the Batman: Arkham series this feature is regularly useful and it makes sense in-universe. However – in Days Gone this mode is not really used too often, and even when it is, it’s somewhat forced by in-game prompts. Players could likely get through the game just fine without this vision mode being here at all. It feels like it was added in order to jump on the trend, rather than it being crucial to the UX.

AVps5dvY37SNe87hXFVQEK.jpg
Fig 9. Escaping a horde of zombies.

Finally, something I noticed while playing was that very often the player will be running to their bike and jumping on to escape a horde of zombies or pursuing wolves, however the player can’t ‘look over their shoulder’ to see how their pursuers are faring – this is a very natural compulsion which they player can’t satiate without clumsily rotating the camera around – this takes a while and will likely result in crashing. Perhaps clicking L-3 while riding the bike would flick the camera backwards, like players could in the Grand Theft Auto or Driver games of yore.

Mission Complete

Mission complete appears as screen overlay which interrupts and pauses gameplay. The mission name and associate icon appear with the celebratory title along with a percentage of completion number (referring to progress towards the larger goal) which I greatly appreciate – as I’ve discussed in other posts, this makes great use of the endowed progress effect as well as the Ovsiankina and Zeigarnik effects, all of which state (in short) that unfinished tasks preoccupy the mind and rest cannot be achieved until the task is completed, in particular, tasks which are semi-complete.

Screenshot 2019-05-02 at 16.17.36.png
Fig 10. Mission Complete screen.

Experience points are tallied up and the player can see how close they are to their next level up. Finally a prompt to continue is at the bottom centre of the screen. After tapping the ‘X’ button continue prompt, the information switches to inform the player what their reward is (such as currency and trust of the local settlements). Finally the screen will switch to inform the player of their ‘storyline’ status, how they have progressed through the narrative mission structure by completing this mission. A navigation option linking to the storylines journal tab appears along with the continue prompt, allowing players to catch up on the in-universe context to their missions.

Pause Menu Features

By pressing the touchpad, players can open up the map, inventory, skills and story journal tabs. These are displayed in a cruciform manner and can be directly jumped to from gameplay by swiping the direction of the tab on the touchpad, rather than pressing it. This might sound like a a handy way to skip straight to your desired tab rather than first clicking through the main screen of the pause menu but in fact there are some annoying issues here.  Also worth noting is that when in each of the tabs,  in the upper right screen corner of this is a cross shape which reminds the player of the left/right/up/down swipes for the different tabs. A useful reminder as the player won’t remember this from the initial tutorial.

Screenshot 2019-05-02 at 12.57.20.png
Fig 11. Hub-screen of the touch pad.

Firstly it is not really ergonomic. It’s not all that easy to swipe on the touchpad when you’re also handling movement and combat controls, and secondly – I would regularly find that during gameplay (especially when running from enemies and therefore pressing hard on the analogue stick) my thumb would extend over the stick, just touch the touchpad and unexpectedly open up the pause menu tabs. The first couple times this happened I wasn’t even aware I had touched it and thought there was some sort of message waiting for me here.

Image result for ps4 controller
Fig 12. Touchpad in the centre of the PS4 controller.

I suspect this unnecessary swipe/touch function on the touchpad was applied because the game is a PS4 exclusive and the developers felt pressured to make use of the touchpad’s abilities. What’s more, when in the pause menu players can use the shoulder buttons, R-1 and R-2 to switch tabs (as encountered in most games like this). Why have 2 methods of navigation at once, one industry standard and one clunky? It feels like an archaic gimmick which we saw a lot more of in the early PS4 exclusive titles like Killzone: Shadow Fall or Infamous: Second Son. It comes at the expense of the UX rather than in support of it.

Let’s now take a look at the individual tabs.

Inventory

The inventory is accessed by swiping left on the touchpad. Here the player can see all collectables – plants, animal carcasses, bounties and scrap, along with currency and ranking at each of the settlements. They can also see the state of repair fo their bike and its current fuel capacity.

Screenshot 2019-05-02 at 10.59.06.png
Fig 13. Inventory overview.

Within the inventory are 4 navigational options: gear, supplies, materials and crafting.

In the gear you can view all the weapons, like axes, pistols, rifles etc, equipment like binoculars, flashlight etc and story items (items Deacon has acquired which are related to the narrative). Each item can be clicked to open a popup which briefly explains it’s function and how to use it. This a great reminder, I wish more games would feature this, as I frequently forget exactly what items do or how to properly use them in games which have a large number of them.

Screenshot 2019-05-02 at 11.05.20.png
Fig 14. Gear section of the inventory.

Supplies, materials and crafting all follow the same formula, cataloguing your medical supples, traps and distractions as well as crafting materials like gunpowder and crafting ‘recipes’ (for molotov cocktails etc) and allowing the player to click to see a tutorial pop-up on how they function. This is great for understanding the role of the sometimes obscure items like a can.

Skills

The skills screen is where players can spend skill points to upgrade their melee combat, ranged combat and survival abilities. The overview screen features navigation to the aforementioned abilities as well as the player’s skill level, the number of skill points they have available and 3 stat bars for health/stamina/focus (a time slowdown for ranged weapons activated using the R-3 button while aiming). These stat bars fill up as the player finds serum injections throughout the game world which allow the player to increase a stat of the player’s choice.

Screenshot 2019-05-02 at 14.07.27.png
Fig 15. Melee section of the skills tab.

Navigating into the Melee Combat screen, skills are listed by icon in the lower left, increasing in rank from 1 – 5. As players increase in skill level they unlock the ability to spend their skill points on the higher tier abilities, if the player has a skill point available they can hold down the ‘X’ button (a clock-wise ring will fill around the icon, when full the purchase is confirmed), I love this method of confirming a purchase because it foregoes the clunk ‘are you sure’ confirmation popups I deal with in mobile games regularly. Navigating across the icons will fill the upper left corner of the screen with a title name for the skill and a brief explanation. Number of available skill points is kept on the upper right corner of the screen, which I felt was a bit out of the way and difficult to notice the pale text on a pale blue backdrop, it might have been better to commit fully to keeping all text information on the left hand side of the screen. However clearing up this possible confusion is red text indicating a skill point is required, this visibly lets the player know that they don’t have any skill currency at the moment. And just like in the inventory, the Ranged Combat and Survival follow the same formula.

Screenshot 2019-05-02 at 14.36.25.png
Fig 16. Skill point available prompt in gameplay.

Something to note is that when a new skill point becomes available a brief message overtakes the upper real estate of the screen (which is not used by regular UI).

Story

The story tab is a quest log which shows current active ‘stories’ (quests), progress which shows how far in percentage the player has completed a narrative arc. Much like has been seen in Arkham Knight.

Screenshot 2019-05-02 at 17.07.39.png
Fig 17. Storylines tab.

Available missions is the default tab and is the highest priority tab for players, as they will want to check their available quests and select their preferred option as well as view the quest location on the map (linked here using the triangle button).

Image result for arkham knight missions wheel
Fig 18. Batman: Arkham Knight’s story tab.

A small note I really liked was how the different quests are colour coded, not by difficulty, but by the character the quest-line is related to. I noticed this after playing a few missions and realising that missions relating to the wife of the protagonist are lavender, the flower she collected in flashbacks, missions relating tot he ripper cult are crimson, as they are obsessed with self mutilation and missions relating to Lisa, the girl the protagonist saves, are cyan, much like the geode gift she receives. This was a thoughtful touch.

Map

Screenshot 2019-05-03 at 16.31.05.png
Fig 20. Map overview.

The map follows another trend which we’ve been seeing a lot lately, which is 3D rendered maps, kind of like a satellite view you might see on Google Earth. The first time I remember seeing something like this was in The Elder Scrolls 5: Skyrim back in 2011. With verticality becoming an increasingly popular trend in open world games, the benefit of this 3D map is that the player can more easily perceive the topography. Days Gone has a very undulating map so this is a nice touch.

The Map is well laid out, with a boxed-list of of objectives and percentage completion on the lower left of the screen, which updates as the player hovers over the different districts of the game map. The current object is box-displayed on the upper left and on the centre-right of the screen, while hovering over a point of interest icon (such as a story-mission, zombie nest, etc) information regarding it will appear, colour coding and character artwork if it is a story-mission, a call to action description of why you want to go to this location and ‘X’ button options to prioritise this mission over your currently active one. If applicable (usually to an already visited or cleared-of-enemies location) the player will have a fast travel option using the square button, which helpfully notes the gas amount necessary to make the trip as well as the time duration the trip will take (great for players who may be planning certain activities depending on the night/day cycle).

A couple of really nice UX notes here are the ‘days gone’ counter, which seems to be a purely world-building UI touch. It counts how many days have past since the outbreak.

UI – Aesthetic

I think one of the controversial aspect of the UI is it’s aesthetic. There are aspects I greatly admire, like the fast but informative animated transitions, like when unlocking a new tier of skill abilities. I also love how clean the UI is, with plenty of breathing room ands minimal clutter, with clear hierarchy of information laid out, well contrasted font size changes delineating between descriptions and titles, strong contrast between selected icons and faded, unselected icons etc. But on the other hand, it sometimes seems out of place within the context of the game world, with an almost ‘science-fiction’ look. Fonts are thin and sans-serif, the colour palette is bright and primarily white, there is little decorative qualities, except for some biker or graffiti pictures sparsely peppered throughout the menus, and text projects on the walls behind characters in settlements stating their names and function (such as mechanic or merchant). It really feels disjointed and somewhere halfway between a sci-fi military shooter and a modern blogging website.

Screenshot 2019-05-02 at 10.35.56.png
Fig 21. UI messages projecting onto the environment.

In Summary

Overall I’ve been very impressed with the intuitive UI of Days Gone, despite my pointing out several flaws and tedious problems. The aesthetic of the UI is also somewhat jarring and feels artistically out of place, but I’ve found the game to be very smooth in teaching me its mechanics and very quick for me to pick up and ‘hit the ground running’ in.

I thoroughly enjoyed diving into the UI/UX of Days Gone and I hope this has been interesting for you!

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: