This is post #2 in the series “Designing New Mechanics”

Intro // Communication I // Communication II // Communication III

In the last post we did an overview of mechanics-oriented design, and the three challenges involved in creating new mechanics: Creation, Validation and Communication. In this post we will dig deeper into one of these, Communication.

Communication of a mechanic: UX and UI

‘User eXperience’ (UX) is a broad term encompassing everything the game makes available to the user that is related to the concept at hand. If you’re overly broad, “UX design” in the scope of games is often just game design itself.

User Interface (UI) for a mechanic on the other hand, can be constrained to a group of distinct elements (usually visual) dedicated to representing all the information necessary to utilize the mechanic, that aren’t physically a part of the game universe. In certain types of games the UI is also how the player interacts with the mechanic, but we’ll come back to that. A good UI will contribute heavily to the UX, by giving clues about the operation of the mechanic in addition to explicit information.

In this post, we’ll focus on UI for communicating new mechanics in games. It’s a delicate balancing act with lots of considerations to be taken into account. Before we talk about the components of UI for core mechanics and how they relate to Color Balls, in this post let’s start with the “Why?” for mechanics communication design with an example in a popular AAA title of a ‘minor’ new mechanic.

UI Sample: Overwatch - Tracer’s Blink

The uniqueness of Overwatch from a mechanics design perspective is in the interaction between subtly fresh but simple mechanics that are rarely seen together, rather than a fundamentally different core mechanic. Overwatch is a team-based first-person character-based shooter, where each character comes with unique abilities inspired by MOBAs like DOTA and League of Legends. Each individual character ability can be treated as a ‘minor’ new mechanic.

All images are courtesy Blizzard Entertainment and Overwatch

Tracer is the face of Overwatch and is a great example to consider: She’s seen virtually no changes since launch and is loved by players across the skill spectrum as a high mobility skirmish hero. Her kit contains of two main abilities: Blink which allows her to teleport a short distance at a time and holds up to 3 charges; and Recall which allows her to return to her state (position and health) exactly 3 seconds ago.

Tracer’s Blink holds up to 3 charges. She regains 1 charge every 3 seconds until back to 3 charges. The UI for Blink involves 2 main aspects.

  • An icon in the normal ability kit region for Blink. The icon involves 3 upward-facing arrows. The number of available charges are shown above it, with a ring representing the 3 second cooldown for a charge to recover, and the assigned key for the ability below it.
  • Similar 3 arrows under the player’s reticle, each arrow representing an available charge when filled, and a used charge when empty.

Dedicated UI

The first aspect to consider when designing the UX for a mechanic is how familiar a player of your game may be with various aspects of it. It’s important to not over-design UX for a mechanic which players find familiar or naturally intuitive, as it can clutter the screen or game experience. Wherever possible, the UI for each mechanic is contained within the existing UI paradigms of the game.

However, there are times when a dedicated UI experience is called for, and Blizzard made this choice for Tracer’s Blink. Blink is a common RPG, RTS and MOBA ability, used to clear gaps and cliffs and perform surprise attacks. A simple textual description is sufficient UI for Blink in these games, and no dedicated UI is considered necessary. However, it’s uncommon in FPS games which is quite a different player experience, raising an important consideration: An FPS places higher emphasis on reflex and precision especially playing a character like Tracer making it harder to take your eyes off your targeting reticle to check the status of Blink which is also a fast-paced, reflex-oriented ability which is difficult to mentally track because of the charge-based cooldowns.

The dedicated UI seen under the reticle addresses the reliance on instantly having a good idea of the state of Blink to keep up with the fast-paced gameplay of Tracer.

Redundant UI

As mentioned earlier, avoiding UX clutter is a high priority, especially in fast-paced games where you do not want to be distracted by UI details. At times however, providing redundant UI can be very impactful. The Overwatch team has chosen to create redundant UI elements for Tracer’s Blink, and I believe this is an excellent choice. The ‘primary UI’, which contains the maximum information follows a standard observed across the game. Show the icon, assigned key, and all available status information - cooldown, charges, availability, etc. Following a standard is very important for a game with as many diverse player-selected experiences (in this case, playing several unique characters).

However, few things can be as powerful as a redundant UI if it greatly improves the player’s experience, as in the case with the dedicated UI for Tracer’s Blink which is also redundant.

UX: Everything besides UI

A lot goes into communicating a mechanic besides the UI, that isn’t actually core to the gameplay. These elements are often grouped into “graphics” or “visuals” for a game, but often their primary purpose is to provide recognizable and memorable feedback for various aspects of the game. Communicating a new mechanic is no exception to the applicability of feedback, and rounds out the UX of the mechanic.

Gameplay by reddit user zetagha on r/Overwatch

In the case of Tracer’s Blink, there’s mild world distortion in the direction of the player’s movement, subtle player camera jolt, streaking particle effects around the periphery, as well as a blue streak left behind by the player visible to others. There’s flair on the UI, which is as much UX as UI, with the fade plus pop-out and pop-in animation on the reticle UI when a charge is used up or recovered. All of these are important to giving a sense of experiencing this mechanic as a player, and give subtle clues as to how and when the mechanic is working.

UI - Interactive and non-interactive

One aspect we didn’t talk about was interactive vs non-interactive UI – whether the players actively manipulate the UI to perform in-game actions. This is largely decided by the genre of the game. UI tends to be non-interactive in first-person type games such as shooters and racers, where the mouse movement is permanently utilized as an input such as looking around with your character. Interactive UI is used in multi-tasking, top-down, turn-based or flex-paced (you’re not constantly in a real-time action sequence) games such as strategy, RPG, or adventure. The largest difference is that with interactive UI, the UI itself becomes a core part of the mechanic it represents.

The example we explored above, as well as Color Balls UI that we will talk about in the next post, use non-interactive UI, so we will discuss interactive UI hopefully alongside a future title of ours that uses it.

UI in Color Balls

In the next post we’ll discuss the UI design for the unique mechanic of paint management in Color Balls, which is still a work in progress. Stay tuned!

This is post #2 in the series “Designing New Mechanics”

Intro // Communication I // Communication II // Communication III

Let us know your thoughts on this post

« Communicating New Mechanics: Challenges

Return to the Color Blog

Color Balls has been Greenlit on Steam. Thanks for your support!

Coming soon for PC and Mac