Tom Clancy’s The Division: A User Interface Review

(Originally posted on April 7, 2016)

By now, most people have had a chance to read or formulate a review on Tom Clancy’s The Division. Among long delays, my feelings for it waxed and waned, but ultimately I enjoyed traversing through an apocalyptic Midtown Manhattan.

My approach here is to not really review the overall game but to focus in on the User Interface (UI) and some of the User Experience (UX) to see what the game does right and what could have been improved.

Let’s do this!

Overall Impressions

67174

From my first view of the game, I was very intrigued by the design philosophy of the game to use a more flat and clean approach. By now, the flat look has been more widely adopted in games such as Destiny or more obviously Apple. Much of today’s design community eschews the skeuomorphism look, which basically attempts to recreate real life textures and objects.

But when The Division was first announced, the look was much more unique and definitely stood out in my eyes. Luckily they’ve largely preserved the approach from Alpha stages to the final game.

A lot of it works well, but flat and clean doesn’t always mean simple and easy. Some of the content requires the design to do a lot of heavy lifting to make it easy to understand, and the system here for the most part handles it well.

To compliment (or offset) the flat look, all the UI elements have a dimensional, angled orientation. It helps make those elements feel like an immersive part of the game, which I’m usually not a fan of since sometimes information gets displayed at weird angles. Borderlands  didn’t work as well because there was always something that was hard to read or blocked by another element. Here, that doesn’t seem to be much of an issue.

The biggest thing for me was the strong usage of color, especially the orange. It’s used to indicate all the most important UI elements that the player should see while the rest is usually in white, with red as emergency or restricted indicators. Working well to stand out from the game’s overall drab and gray palette, the orange always manages to pop, even if it’s just a thin line on the screen.

 

HUD

mainhud
This is the main UI and I think it’s fairly elegant in design. There’s a lot happening but it’s still successful in being concise and unobstructive despite having it constantly in the middle of the screen next to the player’s character.

It’s also nice that the abilities and items are composed in a way that indicate which buttons they’re mapped to. Items on the left side are mapped to the left bumper and left d-pad, and right button items are on the right. Makes sense!

There are a few nice touches here and there such as a small progress bar for weapon reloading and a HUD element that only appears on the backpack when a player stores an item in it.

But the thing about the simplistic approach is sometimes it goes too far. A few of the elements were just too obtuse and I had to scour the internet to find out what they indicated. Such as items dropped on the floor are indicated with a generic icon even though it could be any of a dozen types of items. Why not have specific icons instead, especially since they’re already designed and used in other parts of the UI? Another confusing element is the ammo indicator, which shows the amount in the current clip and the amount overall. But it took me forever to realize that the number in the box further below was the ammo count in my secondary weapon. There’s no graphic indicator to explain what that is. It’s literally a number in a rectangle.

Main HUD Grade: B+

 

Map and Wayfinding

map

One of the most impressive UI elements is The Division‘s map feature.

A virtual map sprouts out around the character for a 3-D view of the area. The map spins and zooms, and it looks very cool. I don’t have too many quips about this feature. There are extra functions but I never needed to dive into them because the overall map is implemented very well.

In the HUD, the radial map is pretty typical of what you find in modern games. The developers didn’t reinvent anything here, but I like how the objective is listed next to the map along with its distance away.When a player selects a waypoint, the HUD shows the path with a thin orange line hovering above the roads. It’s a really nice element that looks clean and is fairly responsive.

My only complaint is that usually I’d focus too much on the guiding line and not even look around at the amazing environment. It’s a case where I maybe would’ve rather not have a guide and just a final point marker to leave it up to me as to how to get there.

Map Screen Grade: A

 

Menus

inventory
This is where the bulk of the game info resides and there’s a strain on the UI system to arrange it in a way that is comprehensible.

Color and simple typography really do a lot to make sense out of everything. Choosing to mostly stay with silhouettes of items helps as well. It mostly works mainly because the designers adhere to a consistent system and grid. In Batman: Arkham Knight, the menus were all over the place as far as design systems. One menu would use a radial circle, the next would have a hexagon grid, another had rows of squares. As a player, I was constantly feeling confused and jolted from one screen to the next. The Division is head and shoulders above in that aspect because of its unified approach.

Again the stripped down look sometimes leaves the player guessing as to what the information is, such as the mod indicators on the weapons. It’s nice to see when a weapon has mods, but there’s no way to decipher what mods are what with just a row of colored rectangles. Further in, a weapon screen shows the mods in detail so then just leave it off the main inventory screen.

My main problem with the menus is in the item comparison options. It’s maddening that I can’t easily compare weapon types or mods to each other. If I’m viewing a shotgun at a vendor, I can only compare it to the three weapons I have equipped and not the shotgun I have in my backpack. Also, for some reason you can’t compare stats for mods at the vendors at all.

Another issue is how hard it is to sort through and view appearance accessories. Names like “Modern Work Boots” and “Trendy Work Boots” don’t do a whole lot for me. And you can’t view the item very easily until you’ve selected an item and exited out to the prior menu. Plus the vendor who sells appearance items won’t let you preview an item until you buy it first! What a racket this lady has in the post-apocalypse!

The vendor UI has more problems that I kept struggling with. Sorting and ordering features need to be added. The item cost and how much money the player has aren’t prominent enough. Too prominent were the character level requirements. If an item has a level too high for me then the whole area is colored red, but if I can equip it then I don’t care what the item level is. I would’ve much rather been able to easily see the price and how much I had.

Menu Screens Grade: B-

 

Verdict

I think The Division does a lot right in the way of UI and UX. Games such as this and Destiny show that developers are getting more savvy and placing more importance of good design and layout.Consistent adherence to the design philosophy and smart, restrained usage of color and typography are all winning elements of their system.Again, when the information load per screen increases, the simplicity starts to struggle. Although that occurs in any case. It’s a great feat that The Division doesn’t really break down when faced with that challenge.

I was going to complain about how the game over-uses the indicator for taking cover, showing the A (or X) icon on virtually every wall, but then I realized that most of the UI and HUD elements can be turned off! It’s an ingenious option that I hope becomes an industry standard.

In general, I hope a lot of developers examine The Division and what it does right for UI. If so, then the future is bright for games and design. At least brighter than the future of New York depicted in this game.

 

Overall Grade: A-

Advertisements

The Last of Us: A User Interface Review

(Originally posted on Jan 29, 2015)

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

lou_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.

lou_weaponswap

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

lou_hudact

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.

lou_huditem

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.

lou_huditemweapon

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

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.

lou_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.

lou_radar

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

lou_craftmenu

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.

lou_skillsmenu

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.

lou_artifactview

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.

lou_weaponupgrade

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!