DevBlog: User Interface

Hi Annoholics, my name is Khajag Jabaghchourian, and I am one of the UI Designers working on Anno 1800’s user interface. When I joined Ubisoft Blue Byte’s UI team six months ago, it was just in time to get ready for our big UI overhaul project. During the last episode of the AnnoCast, I had the pleasure to chat with you about the style and functionality of our user interface and why that is especially tricky and important when it comes to strategy games such as Anno. Since then, we received some feedback regarding the UI from our community- a great opportunity to invite you all to have a look at the daily work of a UI Designer.

UI and UX in a nutshell
I bet that most of you have heard the term UI before and what seems simple at first glance, is the result of a fairly intricate design process. The UI (short for user interface) is, to put it simply, the first thing a player encounters when interacting with Anno 1800. It consists all of the interface elements of the game, such as buttons, menu windows, and contextual info layers.
The first thing which comes to your mind is probably a variety of colored boxes and icons. This visual layer on top of your gameplay screen hosts all information a player needs in order to understand what is happening and in the next step, enables you to interact with the game via your input commands.
You can say that the UI enables communication between the player and the game, translating the game language for the user and making the players input understandable for the game.

Especially a management game like Anno needs to convey huge amounts of information to the player.
The user experience (UX) ensures the usability and readability of our UI, as we need to make sure that it is easy to understand, gives clear feedback and takes the least possible effort to achieve a task. Think about Anno’s construction menu, where you want to be able to build complex production lines, consisting of many different buildings and materials, with the smallest amount of clicks (interaction) possible. We want you to be able to focus on your gameplay strategy and not distract you with busywork such as browsing through too many windows to figure out which buildings are connected to what production line. The UX basically serves as a blueprint map, defining the steps you need to take until you reach your goal, while the UI consists of all visual elements which accompany you on your journey.

Why is UI/UX design special or important in an Anno game?
For a complex strategy game like Anno 1800, a good UI and UX design can be the maker or breaker when it comes to ensuring a smooth gameplay experience. While units like ships utilize direct interaction with the player, many other interactions happen between the player and the UI.
If you compare it to a typical action game, most interaction usually happens through direct input to an avatar and it’s interaction with its environment. Here, the avatar reacts to your direct controller input such as a quick press of a button to cast a spell. In a strategy game like Anno, it would mean that you have UI elements such as buttons to command the avatar to perform that action.

But it is the huge scale of the management and building aspect what we all love about Anno, right?

One of the challenges is to find an easy solution for understanding the complex information -> as an example: trade routes (loading, unloading, a big list of items, islands, ships etc.). Without functional design, controlling a complex strategy game can easily overwhelm the player rather than providing an exciting gameplay experience.

And to achieve that goal, we have to prioritize functional design over the artistic touch. As our form follows the function, we can reduce the cognitive and physical workload for the player.

The Anno 1800 UI design
For Anno 1800, we decided on a clean design, including only a minimal amount of ornamentation, materials, and textures. Our focus was on preserving the functionality in our designs, aiming for a more contemporary and refined look that fits our “industrial revolution” setting. We want it to be easy on the eyes of the player, allowing fast access to all needed information. If there are too many visual elements, the UI itself would start competing with the actual game for the player’s attention; such distractions that quickly start hurting the gameplay flow. Talking about the colors, we decided for darker colors for the HUD (heads-up display). As the HUD is constantly visible, bright and flashy color schemes could quickly become tiring for the eyes and also steal too much attention from the actual gameplay screen.
For pop up information or notifications windows, on the other hand, we picked a brighter color to draw the immediate attention of the player.

Let’s start creating
Okay, so far so good, but how do we actually create our UI and UX design? When we start working on a new UI element, Game Design provides us all the gameplay information and details about the game logic we need to make accessible for the player. We discuss which details are the most important information the player needs to know and what tasks they need to be able to perform within the interface element. The trade route menu is again a really good example, as you need to be able to see all the needed information about your ships, the routes, goods, islands and what kind of orders you can give on the different destinations.

In the next step, we grab a pen and some paper and start sketching out so called wireframes, which serve as a blueprint. This wireframe holds all information about the functionality and the flow of the menus, which further allows us to create interactive prototypes to actually test the UX.
When we are confident that the wireframes are working, we can start on the actual visual UI elements. This means creating mock-ups, defining the text and color style as well as the shapes we want to use. Concept Art from our art department serves here as an inspiration and a visual guideline. The UI team has also dedicated Icon Designers, who support us by designing and producing the icons we need for our UI. That can be something simple like a specific button or something complex like the tourist ferry timer we have shown during the last stream.

From mockups to final assets, we usually use programs like Adobe Illustrator and Photoshop as well as After Effects for animations.

Once we have a functional wireframe, including all the boxes and visual elements we need, it’s implementation time! For that, we will discuss the technical requirements with our programming team.
They will then go ahead and build a working skeleton for our UI. In the final step, we make final preparations for the design and then apply it on the skeleton, to implement our UI into the game.

We need your input!
We hope we were able to give you a good understanding of Anno’s intricate UI/UX design, and why it is of such importance for strategy games. Up to the release of the game, we will continue to work and improve our interface but one of our challenges is a lack of community feedback, as the UI is something many players take as a given but rarely discuss in detail.

And here is where the Anno Union comes into play: we would love to get your feedback on our current state of the UI, as seen in the stream and on this blog. Is the overall look satisfying? Is there something from previous Anno games you especially liked about the UI? What is of most importance to you for an exciting and functional Anno 1800 user interface?

Our team is looking forward to your feedback!