TERRATECH BLOG

Designing TerraTech's New UI

By Nadim De Gouveia-Akhtar, Senior UI / UX Artist at Payload Studios. Posted 24th November 2019

With the release of TT’s new look UI earlier last week, l thought it would be a good opportunity for me to say hello and post about the work that went into the new UI, as well as some of the reasons behind it.

As expected, the release of any UI overhaul always generates a fair amount of discussion and TT has been no exception. Feedback has been positive, some negative and in most cases… very honest and fair.

As the UI/UX is such a large and far-reaching part of the game's overall experience, I felt it would be too much to try and cover it all in any meaningful way in the one post. So rather than to delve into too much detail, I will start off with a higher level overview of where the UI was and how that got us to where it is now. Then finally finish off with where it could be going in the future. So for those of you who like discussing the subtleties of sharp vs round corners, typefaces, colour palettes and kerning, we can explore these at a later date.

The Old UI

When l first joined the dev team earlier this year, it was just after the major milestone of console release and during the development of Co-op.

The inclusion of the Co-op game modes, the expansion to 20+ languages and the recent jump to console really was the beginnings of TT reaching out. It seemed that the natural ambition and direction of the game was to grow out towards a larger and more expansive community. For us, this set the lens through which we were able to evaluate the state of the current UI and it would influence the choices and decisions for the new UI.

We had to assess whether the old UI was going to hold up. So some of the questions we asked were:

  • How is it coping with its new cross platform adaptations?
  • How well does it deal with localisation of 20+ languages?
  • How scalable is it?
  • How accessible is its design?
  • How consistent is the design?
  • How close is it to achieving the desired user experience?
  • How aligned is it with the future direction of the game?

The old UI had done an excellent job of adapting to each iteration of the game's design and has evolved well from its humble indie beginnings. But it was clear that there were lots of inconsistencies (particularly on the console), aspect ratios issues and bits of text that were close to impossible to read in certain languages (both on PC and Console).

There was little scope for scaling the UI (as in adding new block types or corporations, should we decide to in the future), and many of the panels had too many buttons, UI elements and illegible text crammed together.

The blocks in the game looked amazing, but were barely visible in their tiny thumbnails, making the understanding of what each block does very difficult to decipher... especially for new players.

In summary, many features of the old UI were useable but not very accessible for the first time user and if our goal was to reach a wider community, the old UI was certainly holding TT back.

The New UI

At the very start of developing the new UI, we had to accept a few sobering truths about what the first iteration can ultimately achieve. We knew that we had a one man UI team and there were lots of other features that the dev team were working on.

What this meant was that we weren't going to have multiple variants of the UI (ie. dark themes, grey themes, old themes or anything in-between themes) as each would have to be QA'd, maintained and managed.

For similar reasons, there wasn't going to be platform specific UI. It would have to cater for all 20+ languages and a range of aspect ratios (4:3 through to super wide) all in one shot.

With so many constraints and challenges, why bother changing the UI? Well the ambition and direction of the game would need a more robust UI that could support its efforts and at least start to answer the questions we originally asked of the old UI (mentioned above)

Choices & Decisions (brief overview)

All the choices and decisions made for the new UI started with the question of usability & accessibility. Will this be usable for first-timers and experienced players in all languages on all target platforms and aspect ratios? And can we make this within budget constraints?

Aiming to support lots of languages meant that panels and buttons had to be large enough to fit some fairly extreme differences in string lengths. What is a 7 letter word in English, could be 23 letters in Russian!

A few random examples of English strings translated to Russian from our localisation doc.. Imagine getting some of these on buttons!

This meant that there were layouts that had too much white space or too little. We aimed to counter this by removing as much text from the UI and iconise where possible. This did prove to be very challenging in places where there were no established conventions to describe actions. Where text had to be used, we set out a minimum font size to ensure legibility across all target resolutions. This was a tricky thing to balance, as it would mean that text could appear a bit larger for some players on certain screens and in certain languages and at the minimum in other situations.

The amount of space taken up by the old UI (grey) and the new proposal (blue). 4:3

On the old UI, different panels and menus were at odds with one another. The way you used the Inventory was different to the Tech Loader, which was different to the Skins Palette and so on. The result meant that new players had to constantly learn new concepts each time, creating lots of friction and difficulty. Hats off to those smart, patient players who made an effort to do it with the old UI! We decided that we would aim to make side panels work in a similar way, where we had a shelf containing filters that altered the content of it corresponding list. Pop-ups would aim to do something similar.

We wanted to increase the size of the thumbnails, so that new players would find blocks and Techs are more visually recognisable, but we didn't want to take more screen width, which could hinder the whole building experience (especially on 4:3). The result was to make taller but fewer columns. Experienced players would apply the filters competently enough to reduce the size of the far larger inventories and new players can browse visually through their smaller lists.

We looked at how we can broaden the appeal of the UI by making it look sleek, fresh and contemporary. The game looks bright and friendly, but the previous UI didn't really compliment this (although this is just a matter of opinion... and we were aware that some would love/hate the new stuff). Our focus here, was again to choose something that would reach out to a wider community and help build on the positive identity of the game.

The in-game HUD components were designed to capture that character of eclectic Blocks placed together, but also to make it easier to read. Larger components, meant that when racing or flying at speed, players could easily glance down (much like a race car / flight sim dashboard) and see their readouts without having to strain. The varying sizes, colours and shapes, help differentiate fuel gauges from speedos and speedos from money etc.

We kept the game's typefaces as we felt that it would be too much work to change it everywhere and instead applied a more contemporary italicised version.

What next?

The new UI is a first iteration. It will be on a constant cycle of improvement and change. There will undoubtedly be areas where we can or should improve from the outset. There are also large portions of the game that still uses the old UI and many of the new bits of UI didn’t get implemented to their final design specs.

We would like to contextualise larger portions of the UI moving forward, so when you are building, we only show you what is relevant to building and when you are flying around, you only get what is essential to know whilst flying. We would like to continue to enhance the first-time user experience by using progressive disclosure, which is a fancy UI/UX phrase for drip feeding/unpacking the UI bit by bit, rather than overwhelming new players with too much at once.

We are of course open to listening to the community and interested in their ideas, opinions and experiences. We could look to provide them better sorting tools, so that the new lists can stack in more useful/efficient ways for instance. If you have any feedback or suggestions for the new UI feel free to post it to our forums here.

The main point to be made, as I mentioned above, is that this is a 1st pass and it will evolve and get better over time, with the help of the community, both old and new players. Also UI/UX is an iterative design process, so we won’t always get things right, but each thing is a step closer to learning what works best.

What happens next will still rest heavily on the game's overall direction/ambitions and will remain dependent on many of the constraints that have been mentioned earlier.

I am personally happy to have had the feedback from the community and look forward to hearing more as and when we release further tweaks and improvements.