< Back to blog

How Overwatch and Titanfall 2 give the player a subtle hint

Fast paced games present a challenge to interface designers: How does the player get critical information they need (e.g. Health points or current ammo count) without it getting in their way?

For example, the interface designer could put all the information the player needs in the centre of the screen, but this would obscure the most important area of focus.

The information, then, is usually pushed out towards the edges of the screen. This is common to most first person shooters, but I want to focus on two in particular: Overwatch and Titanfall 2. Both are very fast paced, and both put important information in the lower corners of the screen.

Both also happen to use similar methods for alerting players to changes in this information.

Overwatch and Titanfall have abilities that the player can use, which work with a cool-down system: You can use the ability an infinite number of times, but it needs to recharge between each use.

Each ability is represented by an icon, and that icon shows that the ability is recharging. When it's ready to use again, the icon shows an animation. Here's Overwatch:

(The above is a GIF - if it does not play for whatever reason, you can watch any Overwatch gameplay on Youtube if you want to see this animation in higher resolution, and at a smoother frame rate)

You can see that once the icon counts down to zero, it flashes with a flame effect and the icon changes from orange to white.

Here's the equivalent from Titanfall 2 - it's very similar:

This low quality GIF doesn't capture the effect very well - an important point to note is that after the yellow column flashes vertically, the icon itself flashes yellow three times, accompanied by a futuristic beeping or ticking sound. Again, check it out on Youtube!

Both Overwatch and Titanfall 2 are attempting the same thing: Create a visual effect that will intrude into the users primary area of focus (The centre of the screen) temporarily, so that they're aware something has changed regarding their abilities. This is why both effects are concerned with being very tall, and not at all concerned with being very wide.

An aside: Titanfall 1 didn't have this same effect - it was much weaker, and Respawn Entertainment has clearly learned a lesson for the sequel.

I prefer Titanfall 2's method to Overwatch's, for a few reasons:

  1. I didn't even notice Overwatch HAD this feature until I started paying attention in videos because I was curious - and I've played a LOT of Overwatch. I have played exactly zero Titanfall 2, and I noticed it the very first time it happened in the video I took the above GIF from.
  2. This is supported by the fact that I often don't know if my abilities have recharged in Overwatch, and I need to risk looking away from the centre of the screen at the wrong time just to check.
  3. The hard edges of Titanfall 2's flash make it more noticeable. Overwatch's approach is more stylish, but its soft edges don't help it to stand out.
  4. Overwatch plays a sound along with the flash, but it's barely noticeable.
  5. Titanfall 2's method, on the other hand, follows the main animation up by flashing the icon repeatedly and playing a more distinct sound in time with the flashes. I find the noise noticeable but not distracting.

I always enjoy the thought the video game interface designers are putting real effort into problems that most people would consider unimportant, but which improve the experience nevertheless.

That being said, it's not perfect - neither system addresses the fact that for two abilities, you might not be sure which one has just recharged, especially if you're not familiar with which one sits on the left and which on the right.

One possible solution to this is to have different coloured flashes for each ability. Let's see if that catches on.

< Back to blog