Jump to content
  • DevDiary 7 - User Interface

    User Interface


    Hi everyone! I am Boyan Ivanov, Co-Creative Director on JA3, and this time we will talk about a topic that is often overlooked when discussing the development of a particular game – User Interface. It is an all-engrossing topic as UI and UX (user experience – how you the player interact with the game) covers a variety of game elements. From aspects like controlling hiring your mercs, controlling them in battle, getting the right information for a specific situation, to the ways you as players interact with the game world and even things like having the proper video settings for Ultrawide monitors.


    UI with character

    Our journey with the UI/UX of Jagged Alliance 3 has been a tough one and this part of the game has gone through the most iteration and experimentation by far. Early on our initial take on the UI was to focus on a typical modern minimalistic UI and that is what we built for our very first playable version. This was quickly called out by the team as it lacked the Jagged Alliance feel.

    Although a more modern approach would have made the whole journey of creating the UI easier we understood that this would come at the expense of capturing the unique feel of the second game.

    As many of you know the UI of Jagged Alliance 2 while not particularly easy to use (even for 1999) or consistent, had a unique character that not only immersed you in the game world but also showed a fun and entertaining side of the game. Everyone remembers sending Deidranna flowers via the web shop or using the IMP website to make a merc.



    Though these look like small details, having the SirOS laptop with the browser and all the websites really made you feel like the man behind the screen. The mastermind that plans and executes the mission away from the actual fighting. To this day this is one of the most memorable elements of Jagged Alliance and we knew we had to replicate that experience.


    Party like it’s … 2001

    We knew we wanted to make a direct sequel in terms of story and that firmly set the time frame somewhere in the early 2000s. That meant that to get the character of the UI we had to look back… way back. It was a trip we had lots of fun with – we remembered the old days of ICQ, mIRC and a very young Internet with non-functional sites, bad connections and popup adds. Ah, the good old days!


    Some time had passed since the story in Arulco, so we upgraded the laptop to a very early handheld PDA device. Our initial inspiration was the Palm devices that were somewhat popular in the early 2000s. I even dug out my Palm TX but unfortunately couldn’t charge it anymore. Even the name of our PDA – the OAK II is a reference to the Palm devices.


    The PDA is where you manage and command your squads on the Satellite map. You can also access different apps like an email client or a notes app to track your goals and tasks (a quest log, in a way). Of course, there’s also a browser where you can visit different web sites like AIM and IMP and some other fun easter eggs we managed to squeeze in.





    One particularly fun part of making the UI was our chat client – Snype. While the AIM web site shows a listing of mercs, contacting them for a job opens the Snype window. There you can offer them work and define the duration of the contract. The mercs will react with different fully voiced messages if they accept or reject your offer on certain grounds or even if they have a counteroffer – demanding more money.



    UI and the game world

    We began to apply the same visual style and “man behind the screen” idea with UIs while exploring the game world and tactical combat. You can see this in the style of the action icons, how the action bar auto hides like a task bar to allow you view more of the game world, the Command button that is reminiscent of a Start button. The portraits of the mercs and even some of the gameplay elements like enemy silhouettes when behind obstacles have subtle effects to emulate a bad connection. Even the tutorial hints have a bit of an old school OS vibe to reinforce this theme.



    One place where the device metaphor didn’t seem to work however was when working with the inventory. In one early mockup we had OS style icons of physical items and it looked and felt very strange. We decide to instead go with something physical which fit the task of managing items – a crate where mercs store their items and inventory. At different points of development the device vs crate aesthetic took over different UI screens but ultimately I believe we’ve settled on a good balance between the two.



    The Mercs

    I’ve already talked about the portraits and visual style of the mercs in DevDiary 3 – making a mercenary. Recreating the original cast and adding even more new faces was very important for us. This time we also wanted to show the mercs not only as small portraits but give them a chance to shine in a full-sized artwork in conversations, the inventory and even their merc evaluation page. One key aspect of these full-sized artworks is how the mercs are posed to best convey the unique character of each mercenary. I must give our animation lead all the credit for getting this extra layer of immersion that compliments the character’s unique visuals and aesthetic.





    The Struggle

    Creating the UI and UX of a game is always one of the biggest challenges of developing games. Many games fail or succeed based on this crucial aspect. It is a topic that everyone has a strong opinion on, and feedback can vary greatly. It is no surprise then that Jagged Alliance 3 went through a lot of iteration. Some screens have been reworked multiple times over the years. As a conclusion to this DevDiary I think it is fun to share some of the steps of the journey we went through. Do keep in mind that some of these are 3-4 years old and very early mockups.








    That’s it from me for today! Jagged Alliance has some of the most memorable UI elements and while it was a tough journey, we had fun going back the nostalgia lane back to the early 2000s. Join us on stream and upcoming DevDiaries uncovering more of Jagged Alliance 3’s key mechanics and gameplay.


    One last thing!
    We have a small surprise for you. Our Art Director Nelson has made a fantastic wallpaper inspired by our loading screens. You can find it here: Click me!


    PS: If you have any further questions, or simply wish to chat about Jagged Alliance 3, feel free to join us in our DevStream on Thursday, 18th of May on the THQ Nordic channel: http://twitch.tv/thqnordic
    Until then, commander!

    • Like 3
    THQN Roger

    User Feedback

    Recommended Comments

    Sorry hate to say it but I truly dislike your art style. This has nothing to do with Jagged Alliance; it looks like Desperados or Commandos really. In fact I even sense a hint of Team Fortress in here.
    Also the UI/UX doesnt give the same atmosphere/feeling that JA1 and JA2 did at all.

    Why having to create a beefed up 3D graphical environment instead of just sticking to (yes outdated but who cares) Isometric views? Why those tiny icons and emotionless faces?
    Why does Ivan not even look like the old Ivan (as goes for all AIM characters I have seen in here).
    Why those counter strike gear set ups and not the good old 'place item on bodypart' type of view?
    Why copying all modern games instead of sticking to the original old school versions.

    It all looks dull and uninspired. This will unfortunately be the next attempt at recreating a classic that will simply not hold and one I will pass.

    Hopefully one day there will be a company that truly understands what fans of the old games want; simply a new storyline in exactly the same classic setting as we remember and still play this game.

    RIP SirTech 😞

    Edited by MagicShadow
    Link to comment
    Share on other sites

    Why did u change medkit color from red to green? I mean red is very classic color. Green looks weird. When we talk that JA3 is too colorful - its not about medkit colors. Its more about whats happened with enemies from the first announcement trailer.


    Link to comment
    Share on other sites

    I know I said it few days ago, but one more time, turn back red medkits to MD and Fox. They look much cooler with red. Dont fail this please. Thank u.

    Link to comment
    Share on other sites

    • Developers

    Hey Lunokhod,


    Thanks for the feedback! There is a reason behind the change that might seem a little bit strange at first - the red cross can be interpreted as the symbol of the international Red Cross and its use is forbidden in games. If you are interested in the subject, you can read further on it here:





    • Like 4
    Link to comment
    Share on other sites

    2 hours ago, Haemimont_Boian said:

    symbol of the international Red Cross and its use is forbidden in games

    I bet Aliens: Dark Descent devs can make red med-kits, though. Ain't that right @Lunokhod 😂🤡

    Link to comment
    Share on other sites

    On 5/31/2023 at 1:52 PM, Haemimont_Boian said:

    There is a reason behind the change that might seem a little bit strange at first - the red cross can be interpreted as the symbol of the international Red Cross and its use is forbidden in games.

    10 minutes ago I played CS:GO with this guy. Pretty sure no one will sue Valve Corp. Same case as yours.


    Link to comment
    Share on other sites

    Actually neither is a red cross symbol. Also not in the case of the pic you posted before.

    Red Cross means Red Cross, literally. A cross in red, from what I know.

    You can also read up here. The developer by Prison Architect was also approached by the red cross to change it. Same as various oher developers. Even doom changed the red cross. And as pointed out, the pics above do not show a red cross:


    Ofc that would also mean a change from red to green would not be necessary and is probably a bit...overcautious

    Edited by Kordanor
    Link to comment
    Share on other sites

    11 minutes ago, Kordanor said:

    Ofc that would also mean a change from red to green would not be necessary and is probably a bit...overcautious

    Its very small detail, i know, but we cant change merc models/outfits in JA3, so thats why Im so unhappy. I mean MD and Fox was so cool with that red medbags. 😢

    Link to comment
    Share on other sites

    I mean u already did alternative models. Just try old cool models first and if u have problems with it u can change them in 10 seconds. There is no risk, just try. 😇

    Link to comment
    Share on other sites

  • Create New...