The Last of Us: A User Interface Review

I enjoyed critiquing the UI for the game, Dragon Age: Inquisition a lot so am going to try to keep this going as a series.

I feel as though I was a bit hard on DA:I at times so wanted to go on to do a review of a game whose UI was excellent, just so it doesn’t feel like a complain-y, I-could-do-so-much-better type of review.

These posts will mostly center on the user interface (and some basic user experience) rather than a thorough review of the overall game. But I will state that I considered The Last of Us to be an incredible game that hits a home run in just about every aspect. I loved this game. It’s definitely in my list of all time best games I’ve ever played.

Also, while preparing for this review, I stumbled across an article by the actual UI designer on TLOU, which was pretty informative. So check it out here if you want to hear from a legit creator rather than rantings of some blog poster.

Let’s do this!

Main Menu and Loading Screen

Main Menu
Main Menu

Right off the bat, the player gets a sense of what sort of experience Naughty Dog is setting up.

The image speaks so much about what the game is about. The deep, dark shadows juxtaposed with the bright sunlight. The decay of manmade materials and the enduring reach of nature. It’s the yin and yang that drive the story. The despair and horror driving Joel against the hope and optimism of Ellie. Design nerds like me eat this stuff up.

Simple and restrained typography exudes the confidence that this developer has in their creation. White text for the highlighted option with everything else grayed out. Brief descriptive text is displayed below the menu options. No extra flourishes to clutter up the screen.

I’m not a huge fan of the tabbing over to indicate the highlighted option; it muddies the hierarchy to me. But it’s generally clear enough as you interact with it and it’s a consistent element throughout the game. And consistency is good UI.

Amazingly, there’s only one loading screen in this game and it only happens after a player loads a saved game. It’s an incredible feat, especially compared to games like Destiny which are mired in endless loading screens. Simplicity is again the goal here, with just a black screen and a wispy cloud of pollen floating across the screen. Lovely and ominous.

Main Menu and Loading Screen Grade: A+

 

Button Mapping and Sound Design

The character controls are standard to most modern games as far as the analog sticks, and it’s probably a terrible idea to even think about diverting from it these days.

Running is shifted from clicking the L analog to the L1 bumper, which I appreciated. Clicking on the L analog is problematic for me in games. Sometimes I click it and nothing happens, other times I’m in a tense situation and accidentally click it when I don’t want to.

Weapon and Item Swapping
Weapon and Item Swapping

Tapping on the D pad will bring up the weapon and item menu for selecting what the character actively holds. It’s a nice system that holds up well to the amount of items that populate the menu as the game progresses, however the biggest benefit is how quickly it responds to the user. Simply pressing the D pad directions gives the player access to up to 9 items. It’s easy and quick, even in mid-battle situations. Holding X over a weapon allows the player to place a different weapon in that slot. Once that method is figured out, it becomes relatively natural.

The icons are clear, there are quantity indicators with nice use of color if there is no more of that item, and a wrench icon pops up next to the item if more of it can be crafted.

The only minor issue I have with the setup is that the default state always starts the highlight from the center. So if I was actively holding the bow and wanted to get to the nail bomb, instead of tapping twice to the right and twice up, I only had to tap up twice since the menu starts me at the center. I guess it actually makes sense and requires less button taps, but for some reason I kept getting confused on that issue, especially if enemies were bearing down on me.

It’s nice to see ways to inform the player other than visually.

I wanted to mention sound design because it sort of plays a role in the UI. There is no overhead map with enemy pings so whenever you are in danger of being seen by an enemy, there is a whooshing sound that gets louder as the enemy becomes more aware of you. It definitely aided my gameplay and my stealth abilities. Also, there’s a chime to key the player in on any landmarks or objectives that need to be noticed. It’s nice to see ways to inform the player other than visually.

Since TLOU is a Sony exclusive, I imagine there was a stronger mandate to fuller use of the Playstation Dual Shock controller. I like that the touchpad was used to access the backpack which is a major element. The use of the controller mic for things like the flashlight was nice. Although times like listening to voice recorders through the mic actually took me out of the story and reminded me that I was holding a controller playing a game. Perhaps if it were used more consistently. Since the sound of the flashlight is through the mic, maybe other elements that are on the character should’ve been through it as well, like weapon reloading.

Button and Sound Grade: A

 

Gameplay HUD

Action Icon
Action Icon

Naughty Dog helps the immersive feel of the game by making the in-game HUD basically non-existent. Times when the player is walking around, there isn’t any HUD at all. And indicators of a manipulatable item is shown by a simple white line circle.

Overall, the icons and graphics in the game are straightforward and simple. It’s a nice display of restraint because it could easily be imagined that a developer would’ve gone for more distressed and dirtied graphics for a post-apocalyptic game.

Collectible Items
Collectible Items

Items that are found throughout the game have an intermittent sheen and show an icon as you get close. Again, the icons are simple and clear with numbers that inform the player. The effect is subtle enough to be missed, but I believe the intent is that these are discoverables and the reward is for thorough exploration.

Ammo Icon
Ammo Icon

What I didn’t like as much was that the ammo was indicated by red icons. They’re differentiated from the crafting icons which is good, but I just associate red with something that is bad for my character. We’ll look into other uses of red in the menus which show why this is a misuse, conflicting all other instances of the color.

LoU_hudFull
Full Indicator

Actually, if a player cannot hold any more of an item, a red “FULL” is shown, which indicates something negative to the player.

It seems nitpicky, but in a game that does everything so well, the little things that don’t work pop out more.

Health and Ammo HUD
Health and Ammo HUD

When the HUD for health and ammo does show up, it’s nice and compact. I saw previous versions of this HUD with the health as a straight bar, and I think curling it around the active weapon is a nice treatment. Again, the weapon icon is clear; I never confused any of the weapons for another.

As the player gains shivs and melee weapons, their respective icons float outside the health circle, and small rectangles indicate how many attacks a player has with the weapon before it’s used up. As you can see in the image above, once a player has all those items, the HUD becomes more convoluted. It would’ve been nice to not have the two extra elements just tacked on, floating outside the circle. I wonder if other alternatives had been explored.

Hearing Mode
Hearing Mode

In battle situations, TLOU makes use of a sonar mode that allows the player to “hear” where enemies are. It’s a visually arresting element and works great in play. Sometimes I felt that I actually over-relied on it because I can recall one or two instances when I stumbled onto an enemy that didn’t show up on the mode because they were completely still and silent.

HUD Grade: A-

 

In-Game Menus

Crafting Menu
Crafting Menu

Once a player goes into the backpack, a series of menus pops up. What I found cool about this is that what’s happening in the game is still live. Enemies are still moving around and you could still be seen or attacked. Thus keeping the game screen visible on the left helps remind you. Also, your companion characters will give you audio cues, which is a nice touch.

The simplicity of the visuals the Naughty Dog has established continues here which make such a busy screen still easy to decipher. Clear icons on the left to tap through, with the same wrench icon to show that another item can be crafted.

The crafting ingredients inventory takes up the main area, with nice icons and circles to show quantity. (Although my friends would joke about what a quarter of a scissor looks like.) Highlighted times are in white while everything else is dimmed. However when the player doesn’t have enough of a material, the items will be in red, again showing that red is and should be used to indicate something negative.

Yellow is used for the top navigation to show that there’s something new or can be upgraded. Why not use the yellow elsewhere?

I think the typographic hierarchy could’ve been a bit better. It starts to get a little muddied. Still, the system is strong enough and content is minimal so it’s not a huge readability issue (see Dragon Age: Inquisition).

Skills Menu
Skills Menu

The next tabbed menu is the Skills, which here is where you see another use of red to show when you can’t do something in the game. Otherwise everything here works well.

Artifact View
Artifact View

The last menu allows the player to see any collected artifacts. What’s nice is that Naughty Dog took the time to create each piece, including handwritten letters on crumpled notebook paper, which the player can view in close up, but also allows for a typed version to appear for easy readability.

I thought this worked great until my friend admitted that he never even knew that was an option. It seems pretty clear in the screen above, when there are minimal elements to look at. The only solution that I can think of is to maybe group the options together rather than in separate corners of the menu. I think especially “READ” and “ZOOM” would’ve made sense to be in closer proximity to each other.

Weapons Upgrade Menu
Weapons Upgrade Menu

Lastly, we get to probably the most complex menu in the game: the weapon upgrading system.

Here is where the solid visual foundation that has been built really pays off. The screen is full of information but it never felt overwhelmingly confusing. The simple yet strong visual and typographic language have already been introduced to the player as the game progresses. Here, it’s all the same just assembled in a different way.

It’s nice that the player can see and access all the weapons in the navigation rather than if the pistols had been grouped into a submenu. You’re able to browse through to see item progress and the cost of any upgrade, which helps the decision making progress. The use of red is for when something can’t be upgraded. Action button instructions are paired together at the bottom.

It’s hard to emphasize why simplicity is important and why it works, until you can point to a screen like this.

Menus Grade: A-

 

Final Verdict

It’s nice to see a game where the UI works so well so consistently. In such a cinematic, story-driven game, the goal of keeping it out of the player’s way is admirable.

It’s almost ironic that the game is so filled with textural detail and gorey violence that the graphics would be so simple and unassuming. What might not seem like a fit in theory works out wonderfully in application.

Great job!

Overall Grade: A

Let me know what you think!

 

Leave a Reply