• Anno 1800
  • DevBlog

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!

Comments

 

 

15 Comments
  1. A Aiax2010 June 15, 2018

    I don’t get this obsession with “clean” and “functional” UI design. Imagine the Anno 1404 design was “clean” and “functional”….do you think people would love it as much as the beautiful, stylish actual one? Don’t you think aesthetic is just as important as functionality and cleanliness?

    I like clean and functional design in my Windows 10 or Microsoft Office. The style of a videogame UI like Anno should preferrably match the historical period.

    • B BB_CR June 15, 2018

      Personally, I would consider the 1404 UI to be clean and functional as well 🙂 If you look at it, you will see that it doesn’t have much in the way of visual flourishes or ornaments that distract from the functionality (for example, there are no superficial elements like spinning gears or cogwheels around the different UI elements like the minimap, which could distract from the gameplay). It also takes up little real estate on the screen, compared to the UIs in some other strategy titles.

      Clean design does not mean that it has to be spartan or “flat” (as in, flat icons) as is popular with some operating systems these days, just that it doesn’t put fancy graphics over usability. So if you liked the UI in 1404, chances are you will enjoy the one in Anno 1800 as well.

  2. a alleria.sb June 13, 2018

    Love the clean new UIs, everything appears very smooth and easy to read! Some more, discrete filigree embellishment around the margins would please my eye, but that is a matter of taste, of course 🙂 Bars would appear less solid and bulky with them, but I suppose the designs aren’t very detailed yet, so that’s likely to still change after the first drafts.

    One thing worth special attention, as others already highlighted, are the trading route UIs. Some of the Anno games were very intuitive, leading you step by step through setting up the route, while in other UIs you had to figure out what to do where and in what order, based on what you knew the outcome was in previous games. Clear indication of inbound and outbound traffic (load/unload), for example by colouring, would also be handy, so that the user can see in one snapshot what the trading routes are on the map, and upon inspecting them in more detail, what goes where and in what quantity.

  3. v v0str0yenVI June 12, 2018

    So far the UI looks good, I realy like the top bar.

    The only thing is that I hope how the map appears in the trade route will be improved, it looks low quality from what I saw.

    Also, like other said, npcs interaction are realy important, but please make them in purpose, for exemple it really upseted me when Hassan was saying he took money from me even though he was the one buying (and with rate that was well more advatageous for me imo)

  4. a aiguo_tw June 12, 2018

    Both Anno 1404 and Anno 2070 had a great UI design! Whereas Anno 2205 UI sucked!

    Anno 1800 UI looks ugly too! Just the purple color can make me not to buy the game!

  5. S Soulridder June 8, 2018

    In my opinion the new UI looks really nice. Just try to add to everything smooth animations, but don’t keep them too long. I’m just not sure about the new trade route menu, most likely because it looks different. Well, I have to play it to be able to give any more feedback to the UI.
    Giving feedback to the UI is pretty hard without beeing able to play the Game as you can basically only describe the look, but not how it feels within the Game.

    From previous Anno’s: Look at Anno 1404 when a character starts to talk to you. I always liked the animations of those AI characters when they talk to you. 😉

    And nice video and wireframe vs mock-up look. 🙂

  6. o olblf June 8, 2018

    When I think of UI in Anno games, I think of the way residents and characters are portrayed. I haven’t really seen the approach in Anno 1800 yet, but for earlier games the characters were always shown in the upper right corner, they were pretty large and they were constantly moving and sometimes talking. I know the characters themselves do not show any “useful information” (other than perhaps if they are happy or angry with you), but they really bring the game to life and give an emotional connection to the game. Don’t make the characters a small detail next to an information packed menu, is what I’m trying to say I guess. Make them stand out! (Just do the same thing as in 1404 or 2070 and you’ll got it)

  7. N Nox_29 June 7, 2018

    I’m think the current UI is looking ok, although I’m not yet getting any emotional connections with it like I had with the UI of 1404. But I guess that will change when I’m actually playing the game and have sounds with it.

    Talking about sounds I think that’s also an important part of the UI. Having the right button sounds should give you good feedback, but it should also be satisfying to click.

    What I really want to see developed further is to make some important things visible on the screen, without having to click too much. An example would be: I’m always interested in my amount of citizens from each tier, I like this to be accessible very easily.
    An example in previous Anno games that I liked was that in 1404 the number of houses per tier weren’t easy to find. You had to go to the marketplace and click through som stuff to eventually get that screen. In 2070 you improved on that by making it the first thing you see when you click on the marketplace. It’s a very small thing but it made such a big difference.

    I also would love to see a customizable/modular UI. The guy from the game Banished did an interesting twist on this by making every menu a movable window. That’s perhaps a bit too much customization, but it was very clever and easy to use.

    Some examples to make the UI ‘customizable’:
    The UI could be customizable by having shortcut menu’s. Perhaps a place on the screen where you can choose from multiple sorts of windows giving you extra buttons or stats. The player could choose the window that suits it’s play-style most.
    Giving the player to choose how big the overall menu should be or how big the minimap should be etc. could be nice as well.
    Maybe positions of a UI element shouldn’t be fixed. What I mean with that is that some players might like to see the notification menu on the right and the character menu on the left or the other way around.

    Little kinds of customization can really make a UI work better and be a bit unique.

    I also posted something about trading route colors on the forum. Ubi-O5 said he’d forward it to the team. I’d like to know what the team thought of the idea and if anything had become of it.

  8. S SKnight1233 June 7, 2018

    One thing i can say that would make things a bit better with the UI, would be to change up the trade routes menu, and make the map of the sector on the left, instead of right, like it was in older annos.

  9. M MMateos19 June 7, 2018

    Nothing to add, I think the showed UI fullfils the expectations I had for the new Anno, and looks really fancy. From my point of view, it brings together the old aspects from the XIX century and the modern desing you would expect from the actual techniques to make an UI perfectly.

    I hope you can give us an update of how the collector’s edition will look like! Really looking forward to it 😀

    • M MMateos19 June 7, 2018

      Oh yes, one thing to add. I really love the UI’s that give you tons of information from everything, and I mean, EVERYTHING! The more overloaded, the best 🙂

  10. H HannesDS June 7, 2018

    Wow, the artwork is awesome (as always).
    The trade route menu is very clear (better than Anno 1404).
    The animation when the characters appear is also very nice, it makes it smoother.
    I would advise to do a lot of those smooth animations when objects appear, but the duration should be kept short. If the animation is too long, it will be annoying.

    • U Ubi-O5 June 7, 2018

      Thats good feedback. We definitely don’t want opening a menu to become a slog.

  11. B BlueBreath June 7, 2018

    I like the color scheme, I can’t add anything other than that, without trying a test build first “:wink”.

Updates

View all News