When it comes to PC game classics, X-Com UFO Defense stands tall; over 15 years old and still highly regarded. From its use of multiple game systems, to an amazing dual progression system, it’s a game that people can still play today. However, while X-Com is a prime example of great game design, it’s also an example of poor UI design.

Before I get started, I just want to make the following clear: I’m not attacking the gameplay of X-Com. To be fair to the game, the problems with UI could easily stem from the fact that this game was made during the early days of PC game design. Both technology and design theory have evolved drastically. None of the issues mentioned in this post should deter anyone from replaying X-Com, as the design still holds up today. With that said the issues with the UI are universal and are important points for designers today to be aware of.

Screen Switching:

Both Strategy titles and RPGs are about making multiple decisions: Deciding what units to build, equipment to wear and so on. In order for the player to make informed decisions, they of course need accurate information to go on.

This UI misstep is when designers spread out information and the decision between multiple screens. What happens is that it’s cumbersome having to go back and forth between several screens to accomplish one task. What can happen is that with all the details involved, it’s easy for the player to forget them while switching, causing more frustration to the player.

In X-Com one of the most important decisions the player has to make is what squad members to take on each mission. Each person’s attributes are randomly generated at start and are increased as they survive battles. Time Units or TU are important as the more the person has, the more they can do during each turn, along with the bravery stat and another one that comes into play later on.

The problem with X-Com’s UI is that to make this decision, the player has to go through 5 screens to make it:

1. The soldier info screen showing a list of all members.

2. Each individual’s attribute screen.

3. The hanger where the vehicles are located.

4. Selecting the troop transport and then available spots for squad members

5. Assign people to the ship.

While the complete set of actions would take a normal player about 5 seconds to go through, that series must be repeated every-time the player wants to decide who take on a mission. Unless the player has the information written down somewhere else, or has a good memory, they’ll have to repeat it several times when assigning multiple people.

What makes this such an unusual problem has to do with the design of the screens. Here is the screen where players’ select squad members to examine for step 1:

X ComEX1 The UI Missteps Behind One of The Best Games of All Time.

Now here’s the screen where players assign squad members to the ship in step 5:

X ComEX2 The UI Missteps Behind One of The Best Games of All Time.

Notice any similarities? Both screens share the same design and have a lot of unused space. The red circled area would have been a great place to put a button that would link back to the attribute page, or for step one link to the ship assign screen. Besides quick access to relevant information, another solution is to repeat the information that is important on multiple screens.

As an example: Equipment swapping is common in RPGs, both from a store screen and from the player’s own equip screen. Due to the rate that players would replace gear, its common practice to repeat the information relating to the equipment attributes on each screen. This allows the player to quickly see how the new gear stacks up to what they are currently wearing. Incidentally this is also a minor problem X-Com, as to view the stats of new equipment, the player has to visit the ufopedia and then head back to the equipment screen to designate what items should be put on the ship.

To decide what information to repeat and where can come from play testing. If you notice that there are some actions or screens that you are repeating constantly over the course of playing, it would be good to find a way to condense the action down The best ways to condense would be to either repeat the relevant information or provide a quick link to it if it’s not possible to fit it on the screen.. By doing this it will streamline the UI and not waste the player’s time with unneeded actions.

Foreign Symbols:

Symbols are an important part of human comprehension. They allow the human brain to remember their purpose easier and can be used universally. For instance: In the US, we all know that the color red on an octagonal sign means to stop.

The other use is that a symbol can condense information down making it easier to understand. Instead of a sign giving a worded warning about radiation, the radiation symbol can be used to allow someone to quickly see and understand.

Due to the # of interactions and mechanics in a strategy game, symbols are important to prevent the player from being overwhelmed by information. But the problem is that every strategy game features its own unique mechanics which means having a different terminology for symbols. One game may designate magic attacks with a blue sphere, while others may use a star for example.

During X-Com’s turn based battle system; the player uses a different UI. The problem is that the designers created a bunch of symbols that are unique to the game:

X ComEX3 The UI Missteps Behind One of The Best Games of All Time.

Looking at those symbols along the bottom of the screen it’s hard to tell what exactly the function of each button is. Fortunately, the issue of confusing symbols has one of the easiest solutions in the form of tool tips. A simple description that pops up if the player hovers over the icon for a few seconds. Some strategy games go a step further with advanced tool tips, where if the player hovers for a few more seconds, more information is displayed.

UI Design is a tricky concept as you won’t know how everything will flow until you are playing the game. Creating an easy to understand UI is important to learning Strategy titles due to the variety of rules and mechanics involved. The last thing a designer wants to happen is someone being completely overwhelmed by screens of information. If playing a game about being a king during the medieval era, is more complex then actually being a king during that time, then someone has some streamlining to do.

Josh Bycer

Posted By

THOUGHTS ON
“The UI Missteps Behind One of The Best Games of All Time.”

  • (Sorry I ramble a little:)

    I unfortunately only played X-com when it came out on Steam a few years ago, but while many have recommended it to me and it by all means should be I fall in love with, I was never able to get over the leaning curve and get into it.

    Is the UI to blame for this? Well certainly not entirely. The game was meant to be hard and involved, but it surly contributed.

    I've been playing the new beta of Xenonauts lately which is very much a modern X-Com remake and I've had very little trouble with it so far even though it seems to hold as much depth as that of an X-Com. (Seems so from my initial impressions at least). The UI for this game is very sleek and well designed and I have only had to look up one thing in their guide so far. A great example of how things have evolved.

    I've also been playing another beta for FTL: Faster Than Light. It's an amazingly fun game, kind of a space battle sim/rogue like. Even though I've put many hours into it already, there are a bunch of strange UI choices and issues that make it sometimes very frustrating to play. notably a lack of keyboard shortcuts which I sorely miss in the heat of a battle when my ship is on fire, systems are blow out and I'm being boarded and I can't quick select my crew to give them commands! (I know you can pause and give commands, but I don't want to be forced to!)

    Anyway, they are still both in pre-production and things will improve, but it's interesting to see how things have improved and stayed the same even after all these years. But games like Xenonauts give me hope that complex games can still exist without being made overly 'accessible'.

    That's definitively one of the biggest issues I have with modern games is that the intense complexity of many games is dumbed down or removed in the name of 'accessibility'. I think this happens in many mainstream games and is really a shame. Good UI can really make a difference here and allow you do have the complicated mechanics and still be accessible. But good UI is very hard to create and I'm sure a good UI designer is worth their weight in gold!

  • FTL looked like it's going to be a winner from playing it at GDC.

    One of the major shifts from older design to today would have to be teaching the player through failure. In X-com, chances are you're going to lose the game the first few times you play it learning how everything works.

    Same goes for a lot of complex strategy titles today. A lot of modern gamers aren't fans of having to pay “gamer tax” of playing a game for several hours before they “get it”

    I like complex games, but having to spend several hours thumbing through guides and watching videos to learn a game because the developers have 0 accessibility in the design doesn't suit me.

  • Yeah, I fall pretty squarely in the 'games today are too easy' camp.

    I love the complexity, but I know some people don't. (I remember reading the entire manual for Alpha Centari and its expansion one summer and loving it)

    However, I think that good UI can help with this a ton, and for sim games or RTS's the inclusion of a short tutorial separate form the main game is probably enough to teach the basics. Dungeons of Dreadmore is a good example of this (although I don't think that mechanics of that game are too difficult, UI is pretty good, though I have a few gripes) and is a very difficult game.

    FTL is great. I've only gotten to the last sector once so far, but I keep going back. Really I think it only needs a few UI tweaks and hopefully they keep adding more content to it.

Return to Top ▲Return to Top ▲