UI Discussion — Star Wars Battlefront 2 (2017)

Star Wars Battlefront 2 is a multiplayer sci-fi shooter, either 3rd or 1st person, depending on the player’s preference. It was released in November 2017, to more-or-less universal disappointment. I purchased the game at the time and played very little — however, in the intervening 16 months or so, the game has been radically updated and has garnered some new attention for adding the ‘prequel-era’ Star Wars maps and characters to the game. I’ve found myself rediscovering and thoroughly enjoying it recently and have decided I’ve put in enough time to warrant a UI discussion of what I liked and why the UI/UX has improved so much.

The game has many interlocking systems and a great wealth of content to explore. There are 14 game mode variations in total, at the time of writing this post, ranging from offline modes like a story driven campaign and fighting AI controlled enemy waves, to online modes ranging from large scale, multi-stage, objective based battles with teams ‘on the ground’ or piloting spaceships in orbit, to survival-horror-esque modes with players attempting to hold out, in the dark, against waves of bloodthirsty Ewoks.

The game’s UI needs to contain and communicate to players a broad range of informations, such as ammo counts, reload times, mini-maps, enemy highlights etc, to how a player navigates to different game modes and adjusts their load-out pre-battle. Let’s jump in.

Fig 1. Star Wars battlefront 2 Main Menu Screen.

UI — Loadout

Let’s begin with ground combat, as this is the bulk of the game, with the majority of players playing ‘on-the-ground’ modes. The actual combat varies depending on which combatant class the player chooses.

Upon choosing a battle type and entering it, the player must then choose a combatant class to fight as, while the clock ticks down to the beginning of the battle.

Fig 2. Pre-Battle Loadout Screen.

Information is presented in 2 blocks on the left, with a large area of screen real estate kept on the right to show off the player’s avatar (this is important, as players can customise their avatar and if the player plays in 1st person, it’s here that they can first appreciate their hard-earned customisations).

Players have 4 choices: Assault, Heavy, Officer and Specialist. These roughly equate to an all-rounder, a heavy weapons soldier with decreased accuracy and mobility, a support-style unit which can buff others and lay down automatic turrets and, finally, a sniper.

Unselected UI interactables and the UI in general share a palette of cool greys and blues, reflecting the minimalist future aesthetic of metallic, LED lit spacecraft. Selected components are highlighted in a bold yellow. I appreciate the clarity of this and the complementary nature of the colour choices.

Players can see their overall ranking, which is different for each combatant class (and playing more as each combatant class will raise their respective level higher as well as granting access to more combatant class-specific upgrades). Players can see their ‘battle points’, which are accumulated by racking up kills— these points then allow players to choose high powered vehicle and hero classes from the movies, like STAP’s or Han Solo, as a reward during the battle. Players can also see which ‘Star Cards’ they have assigned to their selected combatant class, as well as navigate directly to the ‘Star Card’ unlock and equipping screen from here (more on these later).

Fig 3. Star Cards in the Player’s Collection.

This is an excellent UX which allows players to tweak their build on the fly, when re-spawning in battle — not being able to access the card build from here would likely result in many players forgetting about the feature altogether. Another way the use of these cards is really well communicated is that when killed, the cards equipped by the player’s killer are show onscreen, encouraging retrospection and additional, explorative play. This can be contrasted with a game like Monster Hunter World, which restricts equipment changes to a tent located in a certain area of the game map — this small hurdle sometimes results in forgetting about or feeling disincentivized to switch up weapons and play strategically.

Players can switch their weapons from a limited set of options which expands to a slightly less limited array of weapon variations, which unlock as the player racks up in-game kills.

Let’s jump into the actual combat screen, where the meat of the gameplay is enjoyed.

UI — Combat Gameplay

During combat, players actually have quite a lot of information appearing onscreen, communicated through the UI. Initially, players have an octagonal mini-map on their lower left, indicating the positions of nearby friends and foes in blue and red, respectively.

Fig 4. In-Battle 1st Person Gameplay.

In the bottom right hand corner, 3 hexagons contain icons for the player’s special abilities, such as grenades or jetpack (we’ll cover the iconography in its own section later). Each of these 3 shapes indicates which button to press to activate them under/above the shape.

Upon racking up enough battle points by killing enough enemies, players can choose hero classes and vehicle classes to spawn as. The layout remains more or less consistent for these, as pictured below.

Fig 5. Vehicle Combat.

At the top of the screen players can see how many remaining troops are left on their side — if this is depleted to zero, they lose. Tying into this, players can distinguish between both enemy and friendly troops by spotting colour coded icons above troop’s heads. These are the same icons which signify troop class, whose meaning the player has learned when choosing their own class before the battle begins or each time they re-spawn. This, again, is excellent UI — it allows and encourages the player to adapt their tactics on the fly as they engage different troop types, adding to the combat’s depth.

In objective-based battles, the objective icons are also displayed onscreen , colour coded to indicate whether they are to be defended or assaulted, clear delineation.

Fig 6. Friendly troops with their combat class displayed above them.

One of my favourite aspects regarding UX in the game is that, in battle, players get feedback even when they have just hit an enemy troop (not killing them) this allows the player to train their aim, feel like they’ve contributed something and know that they’re not firing blindly — especially useful against long-range targets.

A second feature I loved was the ability to switch which shoulder the over-the-shoulder-camera view was in (tapping ‘down’ on the D-pad) — great for left-handed players and for adjusting your view to peek around a corner. Holding the ‘down’ button will switch into first-person on the fly — again, great UX. Many games would restrict this to an options menu switch, but this being a multiplayer experience, with no real pause, allows in-game switching.

Fig 7. Enemy Damaged and Enemy Killed Information Onscreen.

Please see the control scheme for battles below — as I’ve played primarily on Playstation 4, that is the controller featured here.

Fig 8. PS4 Controller Input.

Iconography

Let’s look at some of the most important icons int he game and ones the player will be encountering most frequently. The first icons the player needs to understand are the combat classes. These are a mixed bag, with some being quite clear, such as specialist, a sniper class, resembling a crosshairs or the speeder land-vehicle class resembling doubled-up directional arrows. While many of them seem obtuse and unrecognisable, it’s important to remember the UX context of these icons. They’ll be seen during combat, when the player wants to team up with appropriately classed companions or learn what type of enemy they are attacking (or has just killed them) in order to adapt strategy. Players will be learning these icons as they play and regularly witnessing what these icons are communicating — this means I can give some of the less immediately clear iconography a pass, with regards to the class icons.

Fig 9. Combatant Class Icons.

The next icons the player needs to be familiar with are the active abilities, these are unique to the different combatant classes and augmentable via Star Cards.

Star Cards

Star Cards are the meat of progression in the game and they make good use of the ‘Zeigarnik Effect’ and ‘Endow Progress Effect’ to hook players (we’ll cover the use of these later). Star Cards can either buff a combatant class or its abilities passively or actively be used to switch an ability out for a new one.

Fig 10. Ability Cars During Battle Gameplay.

Star Cards come in 2 varieties, these are Boost and Ability cards, with 3 being equippable at a time in combat (they can be swapped out at the re-spawn screen). Many Star Cards are shared by most combatant classes, but each combatant class also contains its own unique ‘Star Cards’.

Star Cards for each class (including heroes and vehicles) are unlocked by playing with that particular combatant class and levelling it up through earning experience (earned through objective completion, kills, playtime etc). Levelling up earns a ‘Skill Point’ for that combatant class which can be used to unlock new Star Cards for that combatant class, or upgrade an already purchased Star Card to its next tier of effectiveness.

Now that we understand what Star Cards are and how they work, let’s look at the UI/UX of the whole affair.

Every Star Card has four tiers or rarities: common, uncommon, rare, and epic. Colour-coding of white, green, blue and purple signify this to the player. Each subsequent tier makes a ‘Star Card’ more powerful through various means, such as cool-down reduction or damage increase, giving a player an edge in battle.

Fig 11. Star Card Overview.

Locked card’s illustrations are completely blocked and marked with a number indicating what level the player must reach with the combatant class to be eligible to unlock the card using a skill point, if the player is eligible to unlock a card, then the card’s illustration is visible but darkened and marked, this time, with a simple lock icon. This distinction between the 2 reasons the card is locked are vital, but easy to miscommunicate. I really appreciate the clear message delivery here.

Furthermore card navigational selection and activation are 2 different highlight states and once again it’s vital to be clear here. The designer is highlighting cards, or even the same card, but must be certain the player understands the difference, visually. Card navigational selection is a yellow stroke outline around the card (consistent behaviour learned earlier in the flow from the main menus), while card activation is conveyed through a yellow check mark icon as well as a hologram overlay blue light. This may sound basic, but as a UI/UX designer I have encountered this issue before and seen how it can be handled poorly.

Card types are clearly differentiated onscreen and text is readable and a clear hierarchy of information is established in font sizes and left-to-right screen placement of panels (navigation-information-illustration), remember this behaviour has been learned in the combatant class selection screen too. The 4 tiers of ‘upgradeability’ are displayed in the central information area, giving a further breakdown of the explicit improvement each card upgrade offers.

Zeigarnik Effect

As I mentioned earlier, I have found Star Wars Battlefront 2 to be a great example of a video game UI utilising the ‘Zeigarnik Effect’.

Back in the 1920’s, Russian psychologist -Bluma Zeigarnik. was eating at restaurant when she noticed how capable the waiters were at remembering complex food orders from multiple tables, delivering them correctly — but forgetting all that information as soon as the orders were delivered. The waiters didn’t claim to have any secret or particular strategy for holding onto this information — instead, the orders that hadn’t yet been delivered just seemed to weigh on the waiters’ minds, nagging at them until they were checked off as complete.

Zeigarnik explored her observation in the laboratory, running experiments involving the completion of different kinds of tasks and puzzles. Some of the subjects performing the tasks were forced to stop before completion. Afterwards everyone was asked to describe what tasks they had undertaken. Like the waiters remembering what orders still needed to go to what tables, subjects were far more likely to recall the tasks they had started but hadn’t completed.

The Zeigarnik effect thus came to describe how people typically find it easier to remember tasks which have been begun, but which we’ve not been able to complete. An internal tension is created and a preoccupation with the task is developed. Completing the task provides closure, release of the tension and the person who undertook the task and can relax.

One of Bluma Zeigarnik’s contemporaries, Maria Ovsiankina, later discovered the ‘Ovsiankina Effect’, which states that an interrupted task, even without incentive, is valued by the human mind as a quasi-need — so very important.

Fig 12. Weapons Collection Utilising Zeigarnik and Ovsiankina Effects.

As I mentioned earlier, these are used to great effect in Star Wars Battlefront 2, with Star Cards and also combatant class weapons. t can be very difficult to turn off the game when you are regularly presented with progress bars on each of the combatant classes, vehicles, heroes etc showing how the player has begun a task, is not finished the task and isn’t so far away from task completion.

Fig 13. Combatant Classes utilising Zeigarnik and Ovsiankina Effects.

In Summary

I thoroughly enjoyed diving into the UI/UX of Star Wars Battlefront 2 and am particularly impressed with the drastic improvement its seen since its weak launch. I hope this has been interesting for you and I look forward to my next UI/UX discussion!

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: