Hi everyone, this is Erman, I'm the UX (User Experience) Design Lead on Company of Heroes 3. Rounding out the team are Sean and Kevin. We are passionate designers who love RTS games and especially CoH. Though you may not always hear from us, we love getting your feedback and following your conversations here and on the official Company of Heroes Discord. We have also watched a lot of live streams from your time with the Pre-Alpha Preview, allowing us to experience firsthand how players interact with our UI. We took lots of notes!

For today’s post, I wanted to outline our UX direction and touch base on some key new design work coming from the UX team.

After I wrap up, we are going to share part of this post to let our UI (User Interface) Art Lead, Bernard, give you an update as well.

UX Direction

We would like to design simple, clean, modular, familiar, and player-centric interfaces for CoH 3. We've read quite a bit of feedback over the years about UX in CoH 1 and CoH 2. We are always looking at how we can improve the overall game UX and make it familiar for our core players and at the same time easier for new players to jump in and play. 

We are also trying something new at Relic, by having both UX designers and UI artists informing each other’s work. They are separate but related disciplines. UX designers also work closely with our gameplay designers to deliver you player-centric interaction design. 

Let’s talk about some of the work-in-progress UX designs for our game. You might see some part of this work in the Pre-Alpha Previews, but this is super early work and not reflective of its final state. With that being said, we would still like to get your input on our new direction.

Selection Card

We recently did a pass for our core gameplay selection card in the real-time strategy portions of CoH 3. The selection card is critical to communicate high-level information about the selected object to the player.

We have taken a path where the player sees the necessary information about the selected object, but if the player is hovering over objectives, this will give you a more detailed breakdown of the necessary information.

Event Queue

The event queue (notification system) design for our campaign map is meant to give the player as much information as possible without being too distracting. These notifications offer a few necessary details so the player can see what is happening without clicking the notification. As an example, when you receive a supply, this notification will show what kind of supply has been received. Similarly, this will display when you’ve purchased a company, when it is ready, what port it is located at, and even what type of company it is.

Some of these notifications will stay on the panel until the player acts and some of them will be time-based. All notifications will clear the screen when you advance to the next day. The player can always access important notifications by pressing the bell icon to open the notification panel.

World Map

The dynamic campaign map will also feature its own version of the tactical map, or what we’re calling the World Map. This will be available in the campaign to let players quickly access the full map of the Italian theater of operations. From here, you’ll be able to see all companies, all resource points, objective/mission locations, and capture areas. You can also click anywhere on the World Map to zoom in and return to the campaign map view.

This will function as a simpler version of our tactical map from the RTS portions of the game. Players will not be able to issue commands in the World Map, as its purpose is to provide a higher-level view of information for your entire campaign. By hovering over a company decorator, you’ll pull up the selection card with more detailed information on that unit. You’ll also be able to see any broken supply lines and the active supply lines of the enemy. Hovering over resource points will show their location supply status and the origin of the supply on their selection card. Once you know what you want to do next, simply click where you’d like to go on the World Map to return to the dynamic campaign view to issue your orders.

When players switch to the objectives tab, they’ll be able to see all objectives and side objectives. You will also be able to hover over any of these objectives to see their mission summary.

Tactical Pause

To wrap up my section of this deep dive, I would like to give a quick overview of how we approached designing the UX for tactical pause. 

In single-player, tactical pause is meant to allow the player to pause the game and queue up commands on all their units, so that they can have more time to make strategic decisions. A UX goal for tactical pause was to address the difficulty new RTS players face when getting into the genre. The fast pace and multitasking aspects of RTS games like CoH can be a big hurdle when first experiencing these types of games and their mechanics. Tactical pause is meant to provide these players some relief and allow them to enjoy single-player at their own pace. Additionally, even skilled players should find value in being able to pause the action and see all the commands queued up for their units to better assess the battlefield.

Single Unit Commands

In this example, the selected unit has been issued commands and displays an icon on their decorator to indicate this. Note that this icon should also display on the game unit control or GUC (the line of units at the bottom of the screen that you have alive and under your control).

Even after the player has selected another unit, the icon is still displayed on the decorator and GUC of the unit that has pending commands.

Multi-Unit Commands

In this example, the selected units have been issued bulk/group commands and as a result show the "group actions pending" icon on their decorators and GUCs.

Retreat

If the player selects the retreat option in Tactical Pause the following will occur:

• A retreat command icon is added to the Tactical Queue. This icon should have a different visual treatment to indicate that Retreat is a "terminal action"
• Being a "terminal action" the player CANNOT queue up any additional commands until either:
  • The retreat is completed
  • The retreat is canceled (see canceling commands section below for details)
• The remaining "slot" UI spots in the Tactical Queue after the Retreat command should disappear, to further indicate that no more actions can be queued at this time.
• The retreat icon should appear in the game environment immediately right of the previous command in the Tactical Queue (in this case it was the player's Attack-Move command)
  • If the Retreat command is the first command in the Queue, the retreat icon should appear immediately right of the unit decorator.

Canceling Multiple Queued Commands

When you move your cursor over to highlight the second command in the queue, only the second and third commands are highlighted to indicate they will be canceled together.

Abilities

Abilities with a vertical travel component (thrown objects) should display their travel path in an arc to indicate to the player that their unit is throwing an object through the air.

At the destination pin, the ability icon will display to indicate where the ability is targeted.

Other abilities should simply use the normal travel line UI (ignore the fact that the ability icon is also a grenade in the example below. We just want to show the difference between how throwables and other abilities will appear in tactical pause.)

Targeting Off-Map Abilities

Players can target an off-map ability in the same way during tactical pause as they can during real time play.

Group Commands Overwrite Single Commands

1. In this example, the player currently has one infantry unit selected. This unit has two existing movement commands in its Tactical Queue.

2. The player has now selected all three units (by either box selecting, a command group, or shift selecting). As 3 units are now selected, the Tactical Queue UI has updated to display the decorators for all 3 units with an empty queue, and a text field informing the player that issuing a group command will overwrite any individual commands already assigned to any unit in the group.

3. The player has now issued two group movement commands. These commands appear a single time in the Tactical Queue, while individual travel lines and destination markers are displayed for each unit in the environment. Note that the "pending commands" icon on the unit decorators has updated to reflect that these units have pending group commands.

Hopefully, you enjoyed this example of how the UX team approaches the design of a feature. Before I hand things over to Bernard to discuss our UI art direction, I wanted to ask a quick question:

Was there anything in CoH 1 or CoH 2’s menus or interface preventing you from taking an action or giving a command that you wanted? An order you wanted to issue, an interaction you wanted to see or just anything you wanted to do in the UX and UI but couldn’t?

Thank you so much and I can’t wait to hear your feedback!

------------------------------

Hello everyone, my name is Bernard, and I am the UI (User Interface) Art Lead for Company of Heroes 3. Our UI art team is composed of myself, Tony, and Tristan our Creative Director. We’re excited to bring you a new UI experience in CoH 3. We have worked closely with our UX and games teams and we are confident in the new design we are taking for the franchise and we hope you enjoy our direction.

MOOD BOARD

We first crafted a mood board as this was super important to kick-off the initial discussion and defined what we wanted to see in this year’s front end. The front end is what we call the menus, the initial interface and the overall presentation before the player starts a campaign or a match. Essentially what they’ll see and interact with at the “front” of their experience.

We looked to several sources for inspiration, including TV show intros, movies, other games and more. A big influence was Kodachrome imagery which captured a stylized tone of the war.

Theme

Three elements that define our theme for CoH 3

1: LIGHT TABLE

A light table is a viewing device that is used to review photographic film or artwork placed on top of it. A horizontal form of a self-standing lightbox, it provides even illumination of the subject from below through a translucent cover and fluorescent lights that emit little heat. The Light table effect will be our backdrop for primary information and to display images. Design cues from exposed film will be used as windows/panels for content (also in the HUD or Heads-Up Display).

The 'Lightboard theme' will be used throughout the front end. White background with military and photographic overlays with Illustrations and map images will be incorporated into the background. Windows and panels will share 'film' characteristics. Kodachrome colors will be used for highlights and user indicators.

2: KODACHROME

The Kodachrome process — in which three emulsions, each sensitive to a primary color, are coated on a single film base — was the brainchild of Leopold Godowsky Jr. and Leopold Mannes, two musicians turned scientists who worked in photo research. This style of film will be used for background and hero images throughout the front end and HUD. Colorization/transitions from Black & White to Kodachrome will be seen throughout and our Color Palette will be taken from Kodachrome sampling as well.

3: PARALLAX

Parallax (from Ancient Greek παράλλαξις  ̶  parallaxis meaning 'alternation') is a displacement or difference in the apparent position of an object viewed along two different lines of sight, and is measured by the angle or semi-angle of inclination between those two lines. All content will be placed on layers and the parallax effect will be applied to them to show the separation of information.

The front end will contain layers with offset coordinates on the Z-axis to form the parallax effect. The main body of content should live on the first layer with supporting content behind it on subsequent layers. Layer effects (like blurring) will be applied to subsequent layers to add depth. Info on Layer 1 should always be clear with no layer effects applied. (Mockup above is a work in progress).

Color Palette

We chose a Kodachrome standard of colors for CoH 3’s front-end palette.  Kodachrome Color film was rare in World War II. Most of the photos taken during the conflict were in black and white, and color photography was still a relatively new technique.  We wanted to give some color, and the Kodachrome spectrum was the perfect fit.

Note: These are older mockups and are not indicative of the current UI in the Pre-Alpha or in the final game.

HUD

The HUD (Heads-Up Display) will incorporate elements from the front end  ̶  including Film stock and Kodachrome imagery. The goals for the HUD are to be clear and concise, to show more game real estate.

We are still exploring a clear way to represent 3D items on the HUD (soldiers and command card items).

Continuity is important to show during the transition from the front end to the HUD so we will transfer elements such as the film stock to use as panels in game.

What do you think about our current HUD art style? Do you have any comments or questions about our current direction?

Decorators

We’re taking a new approach to decorators, giving them a more clear and precise presentation. Icons and colors will now be used, with bold lines and contrast colors.  The UI art team is still working on delivering the best possible experience.  All designs are still works in progress.

What do you think about the latest Decorator styles for CoH 3? Was there anything in the CoH 1 or CoH 2 Decorators you thought worked particularly well? Or did CoH 1 or CoH 2 Decorators miss or overlook anything you feel should be included? Let us know if you have any comments or additional questions about the current direction and approach for CoH 3’s Decorators.

------------------------------

That’s a massive overview from our combined UX/UI team! We can’t wait to see your feedback and to discuss more of our plans in the future. Thanks so much!

Thanks for sharing your thought process.

One piece of information that I think is missing that would especially help newcomers is the ability to compare units. For example a newcomer would not understand who would win in a fight between grenadiers or riflemen. It would be great (maybe as an advanced option) to see a units stats, see their damage at distances, or even have an easy little separate training game mode to compare units.

As for the unit icons, while I like having all that information I feel having 6 pieces of information around the unit shield looks a little cluttered/overwhelming. Multiply that by 7 units and I imagine it'll be difficult to discern the information quickly. I would say perhaps you could blend the number of troops left with the unit health some way. To further reduce icons maybe instead of having an in combat icon the unit's works icon will change color from blue to red. Actually I see it looks like you're already doing that for pinned/suppressed status so maybe just another color/pattern to differentiate.

Thanks again for sharing and regretting feedback!

DannyBlaze wrote:

Hi guys,

First off I love all the info dumping that we are getting about what you guys are working on and your thoughts, as someone who fell in love with RTSs (specifically COH1) as a young child it makes me giddy to get these glimpses.

My only concern about the new UI is it looking too "clean and Modern" like the whites are Grey's to me strike me as something I would see modern setting and not WW2. Obviously I know it's in finished but I think if you guys just took the style and feel of COH2s UI and used the layout you have here I think it will look really good. To me it has a mix of modern design with its blacks and focus on the unit cards and flavor but stuff like the vet stars, the portrait, and the flavor text make it feel almost like a file or dossier on the unit

I love the direction of allowing the player to see more of the battle but at the same time still has all necessary information at a glance, I just think the WW2 style of COH can still be translated to these menus.

Very excited and thanks so much guys can't wait to play it again,

Danny 

Thanks for your feedback Danny. We are still in the process of striking a fine balance of art direction regarding the UI. In most cases, we are moving forward with the cleaner UI but will be adding some of the past directions for some familiarity.  We're excited that you're excited!

Overall this looks visually appealing. The main UI problems with COH2 user interface are not visual however- for example, units having poor pathing, getting stuck, unreliable delays before actions such as throwing a grenade, a combination of high micro demands and poor game control implementation fundamentals is a recipe for player frustration. Particularly when factoring in the combination of high importance of each unit with the high probability a misstep caused by a control problem causing it to die. Immediate and completely reliable control systems like in Starcraft can encounter frustrating events, but at all times always feel fundamentally 'fair' because the game did exactly what you commanded, exactly on time, and your inaction or mistake is likewise instantly reflected rather than the game's control interface fighting you constantly. Making unit movement and combat behavior smoother and snappier, and of course more reliable and consistent, will undoubtedly have a much greater impact on player enjoyment than enhancing the visual appearance of the UI, although that is of course also valuable. I would also note that units and abilities can be slow and yet still feel responsive- if they do exactly what you order, predictably, and at best speed, reliably, they just take some amount of time to complete the execution. As opposed to ordering a tank "go here" and watching it wiggle left and right several times before getting stuck going around a corner and rotating wide around to finally get there, taking five times longer to get that done than any reasonable execution should have taken. Whereas a big, slow tank that was snappy, predictable, consistent, pathed effectively, and didn't get stuck, would still be slow to get there, but it would begin immediately when commanded, and not botch the process so badly. Responsiveness and snappiness is about effectiveness, not about merely the time it takes- a big, heavy tank would be slow but can still feel responsive to orders.

Agreed that "tactical pause" seems like a complete waste of time to implement, perhaps even actively counterproductive if people actually use it and become accustomed to it in single player. 

Unit cards containing important information about the units such as HP, weapon stats, damage, rate of fire, accuracy, unit armor (especially now that tanks have different armor on different faces) would be much more helpful, to new and experienced players alike. These would not need to be displayed all the time of course. Abilities too- tooltips should describe the effect in detail; how much rate of fire increase, how many shells of what size will fall, how long will this effect last? If someone hits this mine, how much damage does it do, and what status effect does it cause? This data is important for all players, especially since there are likely to be numerous patches that will undoubtedly alter this data, and it would be helpful to have a first-party, reliable source for the actual truth about the game, inside the actual game (imagine that).

Finally, transparent units stats. I'm really happy because you are adding some transparent units stats (the hp of each model for example). I hope you will improve this even more (maybe adding the armor of the squads -> I'm not sure if the shock troops from CoH2 for example had some armor or just more hp) and that the vehicles have detailed transparent stats as well (front / side / rear armor, dmg, penetration power and so on).

As for answering to your question, yes,CoH1 and CoH2 missed the transparent units stats. We had to use 3rd party websites for seeing the stats of the units and that was a pain, especially for somebody who was new to the game. I would like to also see a special page in the main menu to see all the stats of all the units from the game for each faction and also the tech trees for each faction 

there is something similar in StarCraft 2: