Competitive analyses

Special abilities are obtained throughout gameplay and typically give the player some sort of advantage or enhanced/diversified gameplay experience. They can be unlocked over time, via certain in-game actions, or by meeting certain criteria. Also, they can range from all sorts of things, such as being “on fire” in NBA Jam, to invincibility in Sonic the Hedgehog, to kill streaks in Call of Duty, to bad-ass superhero powers. This post will look at how different action games notify the player that he/she has an ability ready to be used, as well as the advantages and disadvantages of each design from a UX perspective. Scroll to the end of the post for the TL;DR version/conclusion.

Titanfall

In Titanfall, a first-person shooter, the player can summon mech-style “Titans”. There is special ability mech suit HUD/UI in the bottom-right corner, which is represented by relevant iconography, and both a numerical timer and a progression-style timer that fills in the gray suit, indicating when the ability is ready to be used. Additionally, the icon changes from a standing position to a kneeling position, further indicating when the mech suit can be summoned. All of this is coupled with a “Titan Ready” pop up in the middle of the screen and a button prompt for how to activate it.

Advantages:

• Player is informed through multiple means
• Pop up is in the center of the screen and in the player’s main gaze
  • large, legible font
  • contains direction how to activate ability
• Relevant icongraphy as supplemental conveyance
  • positioned in the corner of the screen out of the player’s main gaze, yet is easily accessible as a reference
  • provides on-screen reference for player if the ability is not used immediately
  • multiple visual cues
    • mech suit
    • numerical timer
    • countdown progression timer

Call of Duty Modern Warfare 2

In Call of Duty multiplayer, when a player achieves a kill streak, he/she is rewarded a specific special ability depending on how long of a kill streak has been achieved. This is conveyed via pop-up text in the center of the screen, which is coupled with the appropriate button to press in order to activate the ability. Additionally, above the text, there is an icon that conveys which ability is ready; this specific scenario presents a parachute and satellite dish to represent airdrop and UAV, respectively.

Advantages:

• Notification is presented in the center of the screen near the player’s main gaze
• Relevant iconography as supplemental conveyance
• Direction/button prompt how to activate ability
• Numbers also presented to help the player keep track of his/her kill streak

Disadvantages:

• If the ability is not used right away, there is no on-screen reference to notify/remind the player

Dishonored

There are many different abilities that can be used in Dishonored, a first-person action game. In the upper-left corner, there is HUD for this specific ability, which is a blink/teleport ability that helps the player traverse the environment. Along with a progress bar, there is a relevant icon (arrow) that changes, as a visual indicator to the player, when it is ready to be used (white arrow, black background), currently being held (black arrow, white background), or depleted (grayed out).

Advantages:

• Doing more with less – minimalist, yet stylistic, approach
  • one icon represents three different states: ready to be used, in progress, and depleted
  • this is important in first-person games, as players might want less HUD/UI on-screen in order to feel more immersed
• Black/white contrast is visible to the player’s periphery while looking at the center of the screen
• Button prompt to “Cancel Blink” appears under HUD once activated by the player

Disadvantages:

• Some of the HUD/UI can clash with the color palette of the game’s environment, which might present contrast/visibility issues for some players

Gears of War series

The HUD for the player’s current weapon and ammo is in the top-right corner. There is a “perfect reload” mechanic where, if the player can time the reload of his/her weapon perfectly, he/she receives an increased-damage buff for a limited time. This is indicated by the reloaded portion of ammo flashing briefly (as well as the gun), which receives an increased-damage buff for a short period. Conversely, if the player mistimes the reload, the UI will turn red, indicating failure and the gun will jam briefly.

Advantages:

• Doing more with less – minimalist approach
  • conveyance is integrated into weapon HUD
  • the player knows where to look for all weapon-related information
• Black/white contrast is visible to the player’s periphery while looking at the center of the screen
  • this is enhanced because not only does the ammo that is buffed flash, but also the weapon as well

Disadvantages:

• As Gears of War is (primarily) an Xbox game, the player is likely to be playing farther away from the screen than when playing either PC, handheld, mobile, etc.
  • although the contrast of the flashing is helpful, some players might have difficulty seeing the HUD from certain distances

The Division

In The Division, the player has customizable skill slots, which have cool downs, and are located on the HUD in the center of the screen near the player’s avatar. As these skills are regenerating, the skill-specific spot turns into a whitish-gray pulsing progress bar. Once complete, the icon for the skill is restored.

Advantages:

• Location of the HUD/UI is based on the center of the screen and the player’s main gaze
  • player does not need to divert attention
• This HUD/UI moves intuitively with the player’s avatar as he/she traverses throughout the game world
• Pulsing progress bars are visible when aiming with reticle
  • player is able to constantly track the progress of the cool down
• Relevant iconography makes it easy to identify which skill is ready to be used

Disadvantages:

• Some players might not like too much information constantly within their main gaze

DOOM

Similar to The Division, the HUD/UI for cool down/regeneration of accessories (bottom right) shows a loading progress bar that culminates in a flash and restoration of the specific icon as a visual cue for the player.

Advantages:

• Close to player’s main gaze, yet not directly in the center of the screen
  • flash can be seen from peripheral vision
  • easily seen upon quick glance
• Relevant iconography makes it easy to identify what item is ready

Disadvantages:

• Depending on distance from/size of the screen, some players might have difficulty seeing this 

TMNT: Mutants in Manhattan

In TMNT: Mutants in Manhattan, the special-ability regeneration is not a transient pop-up, but is one the player can access at any time. By holding down the L2/LT, the player can see a circular regeneration progress bar in the middle of the screen for their four ninjitsu specials. Ready-to-use ones are bright orange, whereas currently regenerating ones are grayed out. However, there is no cue to notify the player when these are ready to use; the player must actively seek that information.

Advantages:

• Accessible at any time
• Contrast – bright orange for ready, grayed out/loading bar to convey cooling down
• Name labels and associated buttons for each of the four moves

Disadvantages:

• No cue to the player when these abilities have regenerated and are ready to be used
• Having to manually bring up this information could be inconvenient/ruin the flow of a high-paced game such as TMNT: Mutants in Manhattan

Batman: Arkham City

During combat, there is a multiplier in the upper-left corner that tracks the players’ successful hits. Certain upgraded abilities require the player to reach a certain number on the multiplier to be triggered; when this number is reached, it flashes and turns yellow, offering a visual cue to the player indicating that the specific move is ready to be used. Additionally, button prompts and ability name appears in the center of the screen.

Advantages:

• Minimalist, yet effective
• Flash is easily seen from player’s peripheral vision, regardless of screen size/distance from
  • contrasts the dark environment of the game
• Button prompts and name labels to remind player which ability can be used
  • this is very helpful in notifying the player in a game with a deep combat system

Disadvantages:

• Button prompt may be difficult to see from a distance/smaller screen; however, additional conveyance through color (red for B and yellow for Y on an Xbox controller) should help with this potential issue

Mad Max

Similar to the Batman: Arkham series, there is a combat multiplier in the upper-right corner that pulses and increases with each successive hit. Additionally, there is a Fury Meter next to it that fills up/pulses with each hit and turns red and pulsates once it is ready to be used, as well as a brief slow-down in the action once the meter is full.

Advantages:

• Progress is always visible to the player
• Numbers and fury meter used to convey progress
• Full Fury Meter can be seen from peripheral vision and is conveyed by pulsating and a brief screen pause

Disadvantages:

• Multiplier is close in proximity/color to Fury Meter, which can make them difficult to differentiate without diverting full attention
• Multiplier and Fury Meter are yellow and can clash with the environment (i.e., post-apocalyptic wasteland with a yellow-heavy color palette)

Conclusion

Good practices for special-ability conveyance:

• Use basic/relevant-to-art-style fonts and legible sizes
• Convey information in multiple ways (e.g., color, text, iconography) when possible
  • do more with less approach
• Flashing/pulsating is an effective way to make HUD/UI visible without requiring the player to glance away from his/her main gaze (important during high-paced action games)
• Make information constantly available to the player as a reference to give the option to track progress
• When possible, include button-prompt pop ups if there are many abilities that can be used in the game
• Knowing when a special ability is ready to be used is vital information, so make it stand out from other text/UI/HUD
  • different colors
  • flashing/pulsing
  • avoid placing too close in proximity to other text/UI/HUD
  • contrast from primary environmental colors

 

 

Company X is interested in how other games have incorporated timers into HUD and UI, perhaps to inform the design of an upcoming demo that will let players play for a specific amount of time. How have games conveyed this to players?

This post will examine some examples of how games have handled demo-specific timers, as well as timers in general, to convey this vital information and the advantages/disadvantages of each design. If you do not feel like reading through individual examples, there is a tl;dr version/summary at the end of the post.

Demo-specific timers

Just Cause 2

There is a prompt that appears in the middle of the screen notifying the player that the demo timer has begun, which then starts a countdown in the top-right of the screen before disappearing from the screen entirely. However, throughout the duration of the demo, this pane reappears in the top-right of the screen periodically to remind players how much time they have left.

Advantages: 

• Initial presentation in the center of the screen effectively notifies the player that the timer has begun.
• Timer pane in the top-right corner is out of the player’s main gaze and flashes to grab the player’s attention.
• Periodic reappearance of the pane reminds players how much time is left in the demo.

Disadvantages: 

• Disappearance of the timer pane results in no constant reference for time left; some players might not like not always knowing how much time is left

Mafia 2

Once the player enters the open-world portion of the demo, a countdown timer appears (in red) in the top-right of the screen.

Advantages: 

• Timer does not impede the player’s vision/main gaze, which is likely centered around the avatar

Disadvantages: 

• Font is small and a dark color that could clash repeatedly with the environment in a game with a brown/black-heavy color palette
• No indication that the demo timer has started
• Timer being constantly present could make the player feel rushed

Minecraft

Minecraft provides an overlay notifying the player how long the demo will last. This information is then constantly present in the top-right of the screen.

Advantages: 

• Upfront, player knows exactly how long the demo can be played
• If the initial message is skipped without being read, the player has the on-screen timer as a reference
• Basic, legible font and size

Disadvantages: 

• Timer being constantly present could make the player feel rushed

Mission-related timers

Here are some examples of how timers are implemented into games for various reasons, such as indicating how much time is left to complete an objective or how much time is left in a match.

Just Cause 3 

Just Cause 3 presents mission-objective-related timers in the top center of the screen.

Advantages:

• Basic, legible and large font
• Close to the center of the screen without interfering with other HUD/UI

Disadvantages: 

• Could potentially interfere with something in the world since it is so close to the center of the screen and the player’s avatar

Paragon

Constant timer display is common in MOBAs because it is necessary information. Also, MOBAs contain some of the busiest screens in video games when it comes to HUD and UI. Paragon, the new MOBA from Epic, has permanent timer HUD to keep track of the length of the match in the top center of the screen.

Advantages: 

• Basic, legible font and size that doesn’t stand out too much, yet is easily seen upon a glance
• Players can use the two white bars as reference points, allowing the timer itself to not be overly large
• Clutter with other HUD and UI elements is avoided since it is isolated at the top of the screen

Grand Theft Auto 5

Grand Theft Auto 5 displays timers in the bottom-right of the screen for things like racing missions and timed objectives.

Advantages: 

• Basic, legible font and size

Disadvantages: 

• Far away from the player’s peripheral vision
• Too close in proximity to other text and timers, which causes the players to stray far from the center of the screen, where their gaze is likely fixated, and might cause the player to mix up the timers

Need for Speed: Rivals

Need for Speed: Rivals displays timer information in the top-right of the screen.

Advantages: 

• Basic, legible font and size
• Distanced/distinct enough from objective and target timer HUD to keep player from chunking them together/mixing them up
• The grayish shading prevents the white font from clashing with similar backgrounds, such as the clouds in the GIF above

The Division

The Division flashes timer UI along with the new objective notification in the center of the screen. It then trails off to its permanent location in the top of the screen. Because it is a countdown, the timer is continuously flashing orange in order to be kept within the player’s attention.

Advantages: 

• Initially brought into center of the screen near the player’s main gaze
• Flashing orange is consistent with the rest of The Division’s color scheme and brings the player’s attention to the vital information, which is the time.
• Trails off to its permanent location next to the mini map where it also shrinks in size, not to impede the player’s vision in the center of the screen
• Continues to flash so the player is constantly aware where he/she can go to see how much time is left
  • This also encourages a sense of urgency, since it conveys something that needs to be done in a timely fashion.

Disadvantages: 

• Once the timer is in its permanent position, the font is a bit small; however, the flashing orange prevents this from being an issue.

DOOM

For timed sections, there is a countdown timer in the top-center of the screen. Additionally, since these missions are based on killing enemies to replenish the timer, there is additional HUD with iconography and a circular countdown around it.

Advantages: 

• Basic, legible font and size
• Top-center of the screen is far enough away from the center of the screen, where the player’s gaze is likely fixated, yet close/large enough that is within periphery/quick glance
• Iconography and circular visual timer in the center of the screen within the player’s main gaze, which is large enough to be seen easily, yet doesn’t impede the player’s vision.
  • This makes it unlikely that the player would ever need to stray his/her gaze from the center of the screen, which is important in a high-tempo game like DOOM.

Disadvantages: 

• Some players might prefer nothing be directly in their main gaze

TMNT: Mutants in Manhattan

TMNT: Mutants in Manhattan places its mission-related timer near its objective HUD in the top-right of the screen along with relevant iconography.

Advantages: 

• Basic, legible font
• Relevant iconography

Disadvantages:

• Player’s attention is never directed to the timer location
• Close in proximity to hideout indicator above it

Alienation

Timer HUD appears and pulses in the top-right of the screen.

Advantages: 

• Large and legible font
• Pulses as it counts down, which conveys a sense of urgency
• Far enough away from the player’s main gaze, yet large enough to be seen easily from player’s peripheral vision/quick glance

Dying Light

Mission-specific countdown timer with relevant iconography is under the mini map/objective HUD in the top-right of the screen.

Advantages: 

• Timer is orange and a different color from other text
• Consistency – timer is located near objective text, which is where the player is used to looking

Disadvantages:

• Font is a bit small and not easily seen upon initial glance

Conclusion

Good practices for timer conveyance:

• Use basic/relevant-to-art-style fonts and legible sizes
• If designing a demo timer, provide clear notification to the player how long he/she has to play, as well as either a constant or periodic reference timer
• Once the timer appears, the player’s attention should initially be directed to it
  • If possible, present the timer in the player’s main gaze initially and then transition it to its permanent position
• Include iconography as supplemental conveyance of time when possible
• Timers represent vital information, so make them stand out from other text/UI/HUD
  • different colors
  • flashing/pulsing
  • avoid placing too close in proximity to other text/UI/HUD

 

A competitive analysis is an evaluation companies use to to see what similar companies are doing with their products in order to figure out how they can make their product unique and marketable. In games user research, a competitive analysis can be a useful internal tool to help inform game design and different features during many stages of development.

An example:

Company X has been running many internal and external playtests of their current in-development game. They have been noticing a consistent trend of players not realizing when an objective has been updated, completed, and transitioned to a new one. The design team believes this might be an issue with the new objective UI, so a competitive analysis is conducted to see how other games have handled such UI design. This can help give the development team ideas about UI that have worked and not worked for other games, and how they can design theirs to be functional, effective, and consistent with the art direction of the new game. The following are some examples of new objective UI in games that could be presented to the development team for consideration.

Borderlands 2

When the player obtains a new objective, the objective text/check box slides onto the upper-right portion of the screen, briefly flashing, and remains under the mini-map.

As objectives are completed, they get checked off, flash, and exit the screen.

Sniper Elite III

Completed and new objectives are indicated by text that appears in the top-left portion of the screen.

The Witcher 3: Wild Hunt

Under the mini-map, the objective is updated as the player completes required portions of the main objective. Relevant text/numbers are updated and the text is highlighted as a cue to the player.

Diablo 3

Objectives, on the right side of the screen, are updated with a check and a yellow “complete” and “new,” which act as visual cues to notify the player and then fade from the screen.

Middle Earth: Shadow of Mordor

New objective text indicator appears in the center of the screen momentarily before trailing off to the upper-left corner of the screen as a reference for the player.

Conclusion

A report for the development team can be generated, which would include descriptions of the the game-specific features and critical comparisons between the games. Additionally, suggestions for potential directions may be included in the report; however, this would depend on the philosophy of the research department and development team.

This is just one example of a competitive analysis for games user research. Others might include investigating how different games handle blood spatter, damage indicators, or tutorials. A vast knowledge of games is undoubtedly beneficial for such analyses; however, in this digital age with access to YouTube at all times, it is certainly possible to conduct such analyses with little prior knowledge of such specific aspects of different games.