Company of Heroes UI Concept

28 Aug 2013 Written by 
Published in UX/UI Design

This concept came about as an exploration on how real time strategy games can be made more accessible. The focus here was to remove many of the traditional interface barriers that overwhelm players who are not used to an RTS experience. Attention was given to streamline the interface and minimize mouse travel distance and time, encouraging a more seamless experience.

 

Click here to launch the interactive concept (Please ensure flash player is installed and up-to-date)

This interactive concept was created using Adobe Flash CS6 and ActionScript 3.0.


Usability Explored

The biggest hurdle new players experience when playing an RTS is the overwhelming sea of choices and information that the interface presents. Many RTS games follow the same basic layout with the lower section of the screen filled with various status bars and info, a map or compass, and a huge selection of menu options tied to a selected building or unit. This tends to lead to confusion on the part of the uninitiated and can cause many players to give up before they have even started.

 

A comparison of the 2 UI layouts (mouseover to see the original UI):

UI-Comparison-alternative

 

In an effort to mitigate this frustration and create a more welcoming experience, the alternative UI was created to limit the number of choices the player is required to process from the start. The dashboard on the bottom has been streamlined and the menu system is now hidden (it is only displayed when it is needed.) Additional menu elements, such as the upgrade options, are layered and can be quickly accessed when required. Furthermore, hotkey information is displayed in the middle of the menu when a player hovers over each option. This encourages an active learning experience, through repetition players will learn how to use hotkeys effectively.

 

It should be mentioned that this menu was designed to facilitate usage by both new and veteran players. The hotkeys remain the same, as does their usage. In addition, all the status bars and information displays are still where veteran players would expect to find them. Those familiar with playing Company of Heroes should experience no significant transition period from the original interface to this alternative one. The added benefit for veteran players is the streamlined dashboard on the bottom of the screen. It now obscures less of the screen, giving players a better view of the battlefield.

 

With the original UI, all the major menu items are located in the lower right corner. For those unfamiliar with the hotkeys, accessing this menu wastes a lot of time since the player has to stop whatever they are currently doing and drag their mouse cursor down to the lower corner. Repetition of this action can exasperate the player. With the alternative UI, the menu can be called from anywhere on screen, and it will pop-up directly around the mouse cursor. This saves time, creates a more seamless experience for the player, and produces a more positive and fun overall experience. As an added benefit, those players possessing only the usage of one hand are able to play the game on a more competitive level with this faster interface (with the menu call key mapped to an additional mouse button.)


Icon Design

The original UI for Company of Heroes puts little emphasis on the quick select menu. This is understandable, as there is an expectation that players will learn to use the hotkeys quickly. However, for the alternative UI the quick select menu plays a more pivotal role. The icons included as part of the original UI are small, difficult to make out, and in general do a poor job of conveying their function. The decision was made to redesign the icons in an effort to make this menu easier to comprehend from the start.

 

Below are the icons that were created specifically. Design conformity was sought for all quick select options that selected a building. The intent here is to communicate the very basic nature of the option's function and allow the user to make quicker decisions when confronted with this menu.

combined-icons

Company of Heroes was developed by Relic Entertainment. I take no credit for the creation of the game or the elements borrowed from it that were used as part of this concept.

 

To those of you who have contacted me in hopes of aquiring a version that works with the Company of Heroes game, I'm really encouraged by your enthusiasm and kind words! Unfortunately, I've looked into it and Company of Heroes is lacking the sufficient tools to allow me to incorporate this in earnest. Thanks for your support!

Stephen Cleland

I always appreciate good feedback and constructive criticism. If you have some you'd like to provide, I'd love to hear it!

Leave a comment

Make sure you enter the (*) required information where indicated. HTML code is not allowed.